Relación de contraste
También: color contrast
La relación de luminancia entre el texto en primer plano y su fondo, en una escala de 1:1 a 21:1. WCAG 2.x exige 4,5:1 para texto normal y 3:1 para texto grande (≥ 18 pt o 14 pt en negrita) en el Nivel AA.
La relación de contraste mide la diferencia perceptual de luminancia entre dos colores —habitualmente el texto y su fondo—. La escala va de 1:1 (sin contraste alguno, por ejemplo blanco sobre blanco) a 21:1 (negro puro sobre blanco puro). WCAG define relaciones mínimas para la legibilidad del texto.
Los umbrales de WCAG
Los criterios de éxito 1.4.3 de WCAG 2.x (Contraste mínimo, Nivel AA) y 1.4.6 (Contraste mejorado, Nivel AAA) establecen los siguientes suelos:
| Tipo de texto | AA | AAA |
|---|---|---|
| Texto normal (< 18 pt o < 14 pt en negrita) | 4,5:1 | 7:1 |
| Texto grande (≥ 18 pt o ≥ 14 pt en negrita) | 3:1 | 4,5:1 |
| Objetos gráficos + componentes de interfaz (1.4.11) | 3:1 | — |
WCAG 2.x mide el contraste con la fórmula WCAG (una relación basada en la luminancia). WCAG 3 está investigando un sustituto perceptualmente uniforme («APCA» — Accessible Perceptual Contrast Algorithm), que se comporta de forma diferente con fondos muy oscuros o muy claros; APCA aún no es normativo.
Lo que se suele pasar por alto
El contraste es una de las pocas reglas de WCAG que una herramienta puede detectar con fiabilidad, por lo que los escáneres automatizados capturan la mayoría de los fallos de texto puro sobre fondo sólido. Lo que aún puede escaparse:
- Texto de marcador de posición en campos de formulario. A menudo #999 o más
claro sobre blanco —no supera el nivel AA—. Los diseñadores optan por marcadores
de bajo contraste para diferenciarlos del valor introducido, pero la práctica
recomendada es usar una
<label>separada encima del campo y un marcador de contraste suficiente (o directamente ningún marcador). - Estados de hover y foco. Un botón con contraste adecuado en su estado predeterminado puede fallar en el hover (por ejemplo, un estado gris claro sobre blanco). Se deben auditar los elementos interactivos en todos sus estados visuales.
- Controles deshabilitados. Los controles deshabilitados están formalmente
exentos del contraste AA, pero apagarlos solo con bajo contraste deja a los
usuarios con deficiencia de visión del color sin forma de saber que el control
está deshabilitado. Se debe combinar el color con otra señal —un icono, un
cambio de etiqueta o
aria-disabledpara que los lectores de pantalla lo anuncien—. - Texto sobre imágenes y degradados. Las superposiciones en los banners principales en que el mismo texto pasa sobre una zona clara y una zona oscura de la imagen de fondo con frecuencia fallan en la región más clara.
- Iconos usados como única etiqueta. Un icono de 24 píxeles sin texto necesita 3:1 frente a su fondo (1.4.11), y son los píxeles significativos del icono —los trazos del contorno— los que se miden.
Pruebas operativas
Tres flujos de trabajo reducen los errores de contraste desde el inicio:
- Análisis estático en fase de diseño. Stark, Able y el comprobador de accesibilidad de Adobe XD evalúan el contraste dentro de la propia herramienta de diseño. Es preferible corregirlo antes de escribir el código.
- Paletas con tokens. Se define cada combinación texto/fondo como un token cuyo contraste se verifica una sola vez. Se deshabilitan los valores de color ad hoc en los componentes que muestran texto.
- Comprobaciones automatizadas en CI. axe-core, Pa11y o Lighthouse hacen fallar las compilaciones al detectar incumplimientos de contraste. Es barato añadirlos y caro ignorarlos.
Más allá del suelo mínimo
4,5:1 es un mínimo, no un objetivo estético. Los usuarios con deficiencia leve de visión del color, pérdida de visión relacionada con la edad o pantallas de baja calidad prefieren 7:1 o superior para el texto del cuerpo. Un sitio que apenas supera el AA en todos sus elementos suele percibirse como de bajo contraste incluso para usuarios sin deficiencias visuales formales.