Contraste de color y accesibilidad: guía de WCAG
Según WCAG 2.2, el texto de una web necesita una relación de contraste de al menos 4,5:1 con el fondo (nivel AA), o 3:1 si es texto grande. Para el nivel AAA, los umbrales suben a 7:1 y 4,5:1. Los iconos, los bordes de los campos y otros componentes de la interfaz necesitan al menos 3:1. La relación va de 1:1 (sin contraste) a 21:1 (negro sobre blanco) y se calcula a partir de la luminancia relativa de los dos colores.
En la práctica, eso significa que #767676 es el gris más claro que puedes usar en texto normal sobre fondo blanco y seguir aprobando el nivel AA. En esta guía verás los criterios, la fórmula, los casos difíciles (texto sobre imágenes, foco, placeholders) y cómo corregir colores que no pasan.
Los criterios de contraste de WCAG 2.2
Las Pautas de Accesibilidad para el Contenido Web (WCAG) las publica el W3C. Tres criterios de conformidad tratan directamente el contraste de color:
| Criterio | Nivel | Texto normal | Texto grande | Se aplica a |
|---|---|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | 4,5:1 | 3:1 | Texto e imágenes de texto |
| 1.4.6 Contraste (mejorado) | AAA | 7:1 | 4,5:1 | Texto e imágenes de texto |
| 1.4.11 Contraste no textual | AA | 3:1 | Componentes de interfaz, sus estados y gráficos necesarios para entender el contenido | |
El nivel AA es la referencia que adoptan la mayoría de las leyes y políticas de accesibilidad. El AAA es recomendable en textos largos y para públicos con baja visión, pero no siempre es viable en todo el contenido.
Qué se considera texto grande
Para WCAG, texto grande es el de al menos 18 puntos (unos 24px en CSS) o 14 puntos en negrita (unos 18,66px con font-weight: 700 o más). Un título de 20px con peso normal, por tanto, sigue siendo “texto normal” y necesita 4,5:1.
Qué queda exento
El criterio 1.4.3 no se aplica a logotipos y nombres de marca, al texto puramente decorativo, al texto incidental de una foto que no aporta información ni a los componentes de interfaz inactivos (deshabilitados).
Cómo se calcula la relación de contraste
El cálculo tiene dos pasos: obtener la luminancia relativa de cada color y comparar ambas.
1. Luminancia relativa
Para cada canal R, G y B del color en sRGB:
- Divide el valor de 0 a 255 entre 255 para obtener un número entre 0 y 1.
- Linealízalo: si el valor es menor o igual que 0,04045, divídelo entre 12,92; si no, calcula ((valor + 0,055) / 1,055) elevado a 2,4. (El texto de WCAG 2 cita 0,03928, heredado de un borrador antiguo del estándar sRGB; en la práctica, la diferencia no cambia ningún resultado con colores de 8 bits.)
- Combina los canales:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Los pesos reflejan la sensibilidad del ojo: el verde aporta mucho más a la luminosidad percibida que el azul. Por eso el amarillo (#FFFF00) parece tan claro y el azul puro (#0000FF) tan oscuro.
2. Relación de contraste
Siendo L1 la luminancia del color más claro y L2 la del más oscuro: relación = (L1 + 0,05) / (L2 + 0,05).
Ejemplo calculado: #767676 sobre #FFFFFF
- #767676 tiene los tres canales en 118. 118 ÷ 255 = 0,4627.
- Linealizado: ((0,4627 + 0,055) / 1,055)^2,4 = 0,4907^2,4 ≈ 0,1812. Como los canales son iguales, L ≈ 0,1812.
- El blanco tiene L = 1.
- Relación: (1 + 0,05) / (0,1812 + 0,05) = 1,05 / 0,2312 ≈ 4,54:1.
Aprueba el nivel AA para texto normal. Un paso más claro, #777777, baja a unos 4,48:1 y suspende. Para llegar al AAA (7:1) sobre blanco, el gris tiene que bajar hasta aproximadamente #595959.
| Texto sobre blanco | Relación | AA normal | AAA normal |
|---|---|---|---|
| #999999 | 2,85:1 | Suspende | Suspende |
| #767676 | 4,54:1 | Aprueba | Suspende |
| #595959 | 7:1 | Aprueba | Aprueba |
| Rojo #FF0000 | 4:1 | Suspende (solo texto grande) | Suspende |
| Azul marino #000080 | 16,01:1 | Aprueba | Aprueba |
No necesitas hacer la cuenta a mano: el comprobador de contraste calcula la relación e indica qué niveles cumple cada par.
¿Y el APCA y WCAG 3?
El APCA (Accessible Perceptual Contrast Algorithm) es un método alternativo que tiene en cuenta la polaridad (texto claro sobre oscuro o al revés), el tamaño y el peso de la fuente, y expresa el resultado como un valor Lc en lugar de una relación. Se ha estudiado como candidato para la futura WCAG 3, que todavía es un borrador de trabajo del W3C.
Esto significa que el APCA no es una norma y no sustituye a los criterios de WCAG 2.2 en auditorías ni en requisitos legales. Puede servir como segunda opinión, sobre todo en temas oscuros, pero la conformidad se sigue midiendo con la relación de contraste de WCAG 2.x.
Texto sobre imágenes y degradados
Cuando el fondo es una foto o un degradado, el contraste cambia de un punto a otro. La regla práctica es medir contra la zona más desfavorable detrás del texto: si una parte del cielo es casi blanca, el texto blanco también tiene que funcionar ahí.
- Capa oscura: una capa negra semitransparente entre la imagen y el texto uniformiza el fondo.
- Caja sólida: un fondo opaco detrás del texto garantiza el contraste sea cual sea la foto.
- Encuadre: coloca el texto sobre zonas uniformes de la imagen y compruébalo en pantallas de distintos tamaños, porque el recorte cambia con el ancho.
- La sombra de texto ayuda, pero por sí sola rara vez resuelve fondos muy variados.
Foco, hover, placeholders y deshabilitados
Foco y hover
El indicador de foco muestra a quien navega con el teclado dónde se encuentra. Debe tener un contraste de al menos 3:1 con los colores que lo rodean (criterio 1.4.11), y WCAG 2.2 añadió criterios sobre que el foco no quede oculto (2.4.11) y sobre su apariencia (2.4.13, nivel AAA). Nunca elimines el contorno con outline: none sin ofrecer una alternativa visible.
Al pasar el ratón, el cambio de color tampoco debe bajar el contraste del texto por debajo de 4,5:1. Un enlace que se aclara con el hover puede volverse ilegible justo cuando la persona va a hacer clic.
Placeholders
El texto de ejemplo dentro de un campo es texto y, según la interpretación habitual, debe cumplir 4,5:1. Los grises muy claros que muchos navegadores y bibliotecas usan por defecto, como #A0AEC0 (2,26:1 sobre blanco), no pasan. Además, el placeholder no sustituye a la etiqueta del campo: desaparece en cuanto la persona empieza a escribir.
Componentes deshabilitados
Los botones y campos deshabilitados están exentos de los requisitos de contraste. Aun así, ten cuidado: si el estado deshabilitado es demasiado tenue, la gente puede no ver que el botón existe o no entender por qué no funciona. Explica también el motivo con texto (“Escribe tu correo para continuar”).
Bordes e iconos
El borde de un campo de formulario es lo que indica dónde hacer clic. Un borde #E2E8F0 sobre blanco tiene solo 1,23:1; un gris como #64748B (4,76:1) cumple con holgura el mínimo de 3:1.
El mismo 3:1 se aplica a los iconos que transmiten significado sin etiqueta de texto (una lupa para buscar, una papelera para eliminar) y a las partes de un gráfico necesarias para leerlo, como líneas, barras y porciones. En un gráfico de líneas en tonos pastel sobre blanco, cada línea debe alcanzar 3:1 con el fondo; si las porciones o barras vecinas cuestan de distinguir, añade separadores, etiquetas directas o patrones en lugar de depender de diferencias sutiles de color.
Requisitos legales en España, Latinoamérica y otros mercados
Este resumen es solo informativo y no constituye asesoramiento jurídico. Para saber exactamente qué se aplica a tu caso, consulta con un profesional.
- Unión Europea y España: el European Accessibility Act (Directiva 2019/882) se aplica desde junio de 2025 a numerosos productos y servicios, como el comercio electrónico y la banca, y la norma técnica europea EN 301 549 incorpora los criterios AA de WCAG. En España, los sitios web del sector público se rigen además por el Real Decreto 1112/2018.
- Latinoamérica: varios países tienen normas propias, como la Ley 26.653 de accesibilidad web en Argentina, y las administraciones públicas de la región suelen tomar WCAG como referencia técnica.
- Estados Unidos: si tu web atiende a público estadounidense, ten en cuenta que la ADA (Americans with Disabilities Act) se aplica con frecuencia a sitios web en demandas judiciales y que la Section 508 exige que las agencias federales usen tecnología accesible, con WCAG AA como referencia.
Las obligaciones concretas varían según el país, el sector y el tamaño de la organización. En todos los casos, cumplir WCAG 2.2 nivel AA es el camino más seguro.
Cómo corregir colores que no pasan
- Mide el par exacto de texto y fondo con el comprobador de contraste y anota la relación actual.
- Ajusta la luminosidad, no el tono. Oscurece el texto o aclara el fondo sin salir de la misma familia de color. Un naranja #F97316 (2,8:1 con el blanco) puede pasar a #C2410C (5,18:1) sin dejar de parecer naranja.
- Cambia el color del texto. En fondos de tono medio, el texto casi negro suele funcionar mejor que el blanco: #0F172A sobre #F97316 da unos 6,4:1.
- Aumenta el tamaño o el peso cuando puedas convertir el elemento en texto grande, que solo exige 3:1.
- No uses solo el color para transmitir información. Los errores, los gráficos y los enlaces necesitan iconos, texto o subrayado. Comprueba el resultado en el simulador de daltonismo.
- Documenta los pares aprobados como tokens de diseño, para que la corrección no se pierda en el siguiente componente.
Resumen
El texto normal necesita 4,5:1 (AA) o 7:1 (AAA); el texto grande, 3:1 o 4,5:1; los componentes de interfaz y los gráficos, 3:1. Mide siempre los pares reales, incluidos los estados de foco y hover y el texto sobre imágenes, y corrige ajustando la luminosidad.
- Calcula cualquier par con el comprobador de contraste y convierte valores entre HEX, RGB y HSL con el conversor de colores.
- Profundiza con la guía de daltonismo y diseño inclusivo y aplica estos criterios a la paleta de colores de tu web.
- Consulta la especificación oficial en w3.org/TR/WCAG22.