Lista de verificación de accesibilidad de color para desarrolladores web

Aproximadamente 300 millones de personas en todo el mundo tienen alguna forma de deficiencia en la visión del color. Muchas más —personas que usan pantallas de baja calidad, que trabajan al aire libre bajo la luz solar o que experimentan cambios visuales relacionados con la edad— tienen dificultades con colores que parecen perfectamente bien a un adulto joven con visión típica frente a un monitor calibrado. El diseño de color accesible no es una preocupación de nicho; es un estándar de calidad base que afecta a una proporción sustancial de la audiencia de cada producto.

Esta lista de verificación organiza el trabajo de accesibilidad de color en criterios claros y accionables. Está estructurada en torno a las Pautas de Accesibilidad para el Contenido Web (WCAG), el estándar internacional que rige la accesibilidad digital y que es legalmente requerido en muchas jurisdicciones.

1. Comprende los criterios de accesibilidad WCAG

Las WCAG están organizadas en cuatro principios (Perceptible, Operable, Comprensible, Robusto) y tres niveles de conformidad: A (mínimo), AA (estándar) y AAA (mejorado). Los requisitos relacionados con el color aparecen principalmente bajo el principio Perceptible.

Los dos criterios de color más importantes para los desarrolladores son:

1.4.1 Uso del color (Nivel A): El color no debe ser el único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

1.4.3 Contraste (Mínimo) (Nivel AA): El texto y las imágenes de texto deben tener un ratio de contraste de al menos 4.5:1. El texto grande (18pt o 14pt en negrita) requiere un ratio mínimo de 3:1.

1.4.11 Contraste de elementos no textuales (Nivel AA): Los componentes de interfaz de usuario y los objetos gráficos deben tener un ratio de contraste de al menos 3:1 frente a los colores adyacentes.

1.4.6 Contraste (Mejorado) (Nivel AAA): El texto debe tener un ratio de contraste de al menos 7:1 (texto grande: 4.5:1).

Comprender estos criterios antes de entrar en la implementación evita costosas refactorizaciones posteriores. La conformidad AA es el objetivo práctico para la mayoría de los productos comerciales.

2. Cumple los requisitos de ratio de contraste para el texto

El ratio de contraste se calcula comparando la luminancia relativa de dos colores. La escala va de 1:1 (sin contraste — colores idénticos) a 21:1 (contraste máximo — negro sobre blanco).

Requisitos de contraste de texto de un vistazo

El error más común es tratar "parece legible" como equivalente a "pasa el contraste". La percepción humana es dependiente del contexto y poco confiable para este juicio. Un color de texto que se lee cómodamente en tu monitor calibrado en una habitación tenue puede fallar para un usuario con una ligera deficiencia visual en una pantalla de teléfono bajo la luz del día.

Acción: Prueba cada par de texto sobre fondo usando el Verificador de Contraste. Introduce el color de primer plano y el color de fondo: la herramienta calcula el ratio exacto e indica si pasa AA y AAA.

Fallos comunes que hay que vigilar

Texto gris claro sobre fondos blancos. Una tendencia de diseño omnipresente. Incluso el texto en #767676 sobre blanco (#FFFFFF) apenas pasa AA a 4.54:1. Ir más claro a #808080 falla a 3.95:1.

/* Falla — 3.95:1 */
color: #808080;
background: #FFFFFF;

/* Pasa AA — 4.54:1 */
color: #767676;
background: #FFFFFF;

Texto de color sobre fondos de color. El texto del color de marca sobre un fondo con tinte puede verse armonioso pero fallar los requisitos de contraste. Prueba cada combinación, no solo negro sobre blanco.

Texto sobre imágenes o gradientes. No existe un único color de fondo contra el que probar. Prueba el peor caso —típicamente la región más brillante o de matiz más similar de la imagen. Añadir una superposición semitransparente bajo el texto es una solución común:

.text-over-image {
  /* La superposición oscura garantiza texto legible independientemente del contenido de la imagen */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  /* O usa un fondo con efecto cortinilla */
}

3. Contraste de elementos no textuales (componentes UI e íconos)

WCAG 1.4.11 extiende los requisitos de contraste más allá del texto a los componentes interactivos y gráficos significativos. Se aplica un ratio mínimo de 3:1 a:

• Bordes de botones y campos de entrada
• Indicadores de casillas de verificación y botones de opción
• Pistas de interruptores toggle
• Bordes de íconos (cuando el ícono transmite significado)
• Gráficos, diagramas y elementos de visualización de datos
• Indicadores de foco (ver Sección 5)

Ejemplos

Un botón con borde blanco sobre un fondo blanco falla a menos que el color de relleno del botón proporcione el contraste 3:1. Un ícono que depende únicamente del color para distinguirse del contenido circundante debe tener suficiente contraste con ese contenido.

/* Campo de entrada: el borde debe ser 3:1 contra su fondo */
.input {
  border: 1px solid #767676; /* Pasa 3:1 contra el blanco */
  background: #FFFFFF;
}

/* Casilla de verificación: el indicador visual debe ser 3:1 contra el fondo */
.checkbox-checked {
  background: #1D4ED8; /* Azul profundo — pasa 3:1 contra el blanco */
}

Prueba todos los componentes UI con el Verificador de Contraste introduciendo el color del componente y su color de fondo.

4. Nunca dependas únicamente del color

WCAG 1.4.1 es uno de los criterios más frecuentemente violados en el desarrollo web, y es fácil pasarlo por alto porque la violación suele ser visualmente sutil.

El color solo no puede transmitir: - Qué campo de formulario tiene un error - Qué opción de un conjunto está seleccionada - La dirección de tendencia en un gráfico - Campos obligatorios versus opcionales - Texto de enlace versus texto circundante (si el color es la única diferenciación)

Indicadores redundantes requeridos

Combina cada estado codificado por color con al menos otro indicador visual:

La prueba de escala de grises

Convierte tu diseño a escala de grises (o míralo a través de un filtro de escala de grises) y pregunta: ¿Puedes identificar todavía cada distinción significativa? Si la respuesta es no, tienes un problema de dependencia exclusiva del color.

Usa el Simulador de Daltonismo para previsualizar tu diseño bajo múltiples formas de deficiencia en la visión del color, incluida la escala de grises completa (acromatopsia).

Ejemplos comunes del mundo real

Apps de acciones y finanzas. Mostrar ganancias en verde y pérdidas en rojo es un fallo clásico de dependencia exclusiva del color: el daltonismo rojo-verde afecta a alrededor del 8% de los hombres. Añade flechas arriba/abajo o símbolos +/- junto a la codificación de color.

Validación de formularios. Un borde rojo es invisible para algunos usuarios como señal diferenciadora. Añade un mensaje de error en línea debajo del campo y considera añadir un ícono de error.

Estado activo de navegación. Si el enlace de la página actual solo se distingue por el color, añade texto en negrita, subrayado o un marcador de ícono como indicador redundante.

5. Indicadores de foco

WCAG 2.4.11 Apariencia del foco (AA en WCAG 2.2) requiere que los indicadores de foco cumplan los requisitos mínimos de tamaño y contraste:

• El indicador de foco debe tener un área de al menos el perímetro del componente al cuadrado multiplicado por 0.0625 (simplificado: visible y no diminuto)
• El indicador de foco debe tener un ratio de contraste de al menos 3:1 entre sus estados con y sin foco

En términos prácticos: nunca elimines el contorno de foco predeterminado con outline: none o outline: 0 sin proporcionar un reemplazo superior.

Estilos de foco conformes

/* No hagas esto sin reemplazo */
:focus {
  outline: none; /* Elimina toda la retroalimentación visual para usuarios de teclado */
}

/* Haz esto en su lugar — anillo de foco personalizado de alto contraste */
:focus-visible {
  outline: 2px solid #1D4ED8;
  outline-offset: 2px;
}

/* O usa box-shadow para mayor flexibilidad de diseño */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #1D4ED8;
}

El azul #1D4ED8 proporciona suficiente contraste contra la mayoría de los fondos. Prueba el color del anillo de foco contra el fondo de la página usando el Verificador de Contraste (mínimo 3:1).

Usar :focus-visible (en lugar de :focus) muestra el anillo de foco solo cuando se detecta la navegación por teclado, lo que evita la queja habitual de que los anillos de foco quedan mal para los usuarios de ratón, mientras que los conserva para los usuarios de teclado y de conmutación.

6. Simula el daltonismo

El daltonismo no es una condición única: hay varios tipos distintos que afectan a diferentes fotorreceptores:

En total, aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen alguna forma de deficiencia en la visión del color. Las formas más comunes son los tipos rojo-verde (deuteranopía y deuteranomalía combinadas).

Acción: Usa el Simulador de Daltonismo para ver tu paleta de colores a través de la perspectiva de cada condición. Enfócate especialmente en la deuteranopía y la protanopía, que son las más prevalentes.

Qué buscar

Bajo la simulación de daltonismo, comprueba si: - Los estados de error (a menudo en rojo) siguen siendo distinguibles de los estados de éxito (a menudo en verde) - Las series de gráficos que solo difieren en rojo versus verde siguen siendo separables - Los estados activos de navegación siguen siendo identificables - Los elementos UI de advertencia e información son distinguibles entre sí

Si los elementos que deberían verse diferentes se vuelven indistinguibles bajo la simulación, redisénialos para añadir diferenciación mediante patrón, forma, ícono o etiqueta junto a la diferenciación de color.

7. Usa herramientas de prueba automatizadas

La inspección manual detecta la mayoría de los problemas pero pierde los casos extremos a escala. Integra las pruebas de accesibilidad automatizadas en tu flujo de trabajo de desarrollo.

Extensiones de navegador (verificación manual puntual)

axe DevTools (extensión de navegador de Deque): Inspecciona cualquier página y señala las violaciones de WCAG, incluidos los fallos de contraste. El nivel gratuito cubre la mayoría de las necesidades.

Lighthouse (integrado en Chrome DevTools): La auditoría de accesibilidad usa axe como motor. Ejecútalo con F12 → Lighthouse → Accesibilidad.

WAVE (WebAIM): Superpone indicadores visuales directamente en la página para mostrar errores y alertas.

Integración CI automatizada

axe-core (paquete npm): Se integra con Playwright, Cypress o Jest para pruebas de accesibilidad automatizadas en tu canal CI:

// Ejemplo: Playwright con axe-core
import { checkA11y } from 'axe-playwright';

test('La página de inicio cumple WCAG AA', async ({ page }) => {
  await page.goto('/');
  await checkA11y(page, null, {
    runOnly: { type: 'tag', values: ['wcag2aa'] },
  });
});

pa11y (CLI y npm): Herramienta de línea de comandos para verificar URLs en lote contra los estándares WCAG. Útil para sitios grandes.

Limitaciones de las pruebas automatizadas

Las herramientas automatizadas detectan aproximadamente el 30-40% de los problemas de accesibilidad. Son buenas para detectar fallos de contraste, texto alternativo faltante y etiquetas de formulario faltantes, pero no pueden determinar si el color se está usando como único diferenciador para un patrón UI complejo, si un indicador de foco es visualmente adecuado en contexto, o si la experiencia general del usuario es realmente usable por alguien con una discapacidad.

Complementa las pruebas automatizadas con pruebas manuales de navegación por teclado y pruebas con usuarios reales con discapacidades.

8. Resumen de la lista de verificación práctica

Usa esta lista de verificación al revisar cualquier página web o componente:

Contraste de texto

• [ ] Todo el texto normal cumple el ratio de contraste mínimo de 4.5:1
• [ ] Todo el texto grande (18pt+ o 14pt+ negrita) cumple el mínimo de 3:1
• [ ] El texto de color sobre fondos de color está probado, no solo negro sobre blanco
• [ ] El texto sobre imágenes o gradientes tiene contraste adecuado en la región de peor caso
• [ ] El texto de marcador de posición en los campos de formulario cumple el contraste (el texto de marcador es texto de cuerpo, no está exento)

Contraste de elementos no textuales

• [ ] Los bordes de campos de entrada cumplen 3:1 contra el fondo
• [ ] Los bordes o rellenos de botones cumplen 3:1 contra su fondo
• [ ] Los íconos significativos cumplen 3:1 contra los colores adyacentes
• [ ] Los elementos de gráficos cumplen contraste 3:1 entre series de datos adyacentes

Comunicación solo por color

• [ ] Los estados de error usan ícono o texto, no solo color
• [ ] Los enlaces son distinguibles del texto del cuerpo por algo más que el color
• [ ] Los campos obligatorios del formulario están marcados con algo más que color rojo
• [ ] Las series de gráficos se distinguen por patrón o etiqueta, no solo por color
• [ ] El estado activo de navegación usa algo más que color

Indicadores de foco

• [ ] Sin outline: none sin un estilo de foco de reemplazo
• [ ] Los anillos de foco personalizados cumplen contraste 3:1
• [ ] El anillo de foco es visible contra el fondo de la página
• [ ] Se usa :focus-visible en lugar de :focus para evitar fricciones con usuarios de ratón

Daltonismo

• [ ] El diseño fue revisado bajo simulación de deuteranopía y protanopía
• [ ] Los pares rojo/verde tienen indicadores redundantes
• [ ] El diseño pasa la prueba de escala de grises para todas las distinciones significativas

Verificaciones automatizadas

• [ ] axe DevTools o Lighthouse ejecutados y sin errores de contraste reportados
• [ ] Pruebas de accesibilidad integradas en el canal CI

Conclusiones clave

• WCAG AA requiere un contraste de 4.5:1 para el texto normal, 3:1 para el texto grande y los componentes UI. Estos son requisitos legales en muchas jurisdicciones, no directrices opcionales.
• Nunca uses el color como único medio de transmitir información: combina siempre el color con un segundo indicador como un ícono, una etiqueta de texto o un patrón.
• Elimina los contornos de foco solo cuando los reemplaces con un estilo de foco personalizado superior que cumpla el requisito de contraste 3:1.
• Alrededor del 8% de los hombres tienen daltonismo rojo-verde. Usa el Simulador de Daltonismo para verificar que tu diseño se lee correctamente bajo deuteranopía y protanopía.
• Las herramientas automatizadas detectan aproximadamente el 30-40% de los problemas de accesibilidad. Complémenlas con pruebas manuales y pruebas con usuarios reales.
• Usa el Verificador de Contraste para verificar cada par de colores de primer plano/fondo antes de finalizar un diseño o confirmar el código.