La historia del comprobador de contraste
El bajo contraste es uno de los problemas de accesibilidad más comunes en la web. Sus reglas parecen números mágicos, pero cada una tiene un motivo, relacionado con cómo el ojo pierde sensibilidad con la edad y cómo las pantallas producen la luz.
De dónde salen 4,5 y 7
WCAG 2.0 se convirtió en recomendación del W3C en diciembre de 2008. Sus autores partieron de un mínimo de 3:1 tomado de la norma ISO 9241-3 y lo subieron para compensar la pérdida de sensibilidad al contraste de una visión de aproximadamente 20/40, habitual hacia los 80 años. Así surgió 4,5:1 para el nivel AA. El nivel AAA, 7:1, hace lo mismo para una visión de unos 20/80.
La luminancia relativa
La fórmula convierte primero cada canal sRGB en luz lineal y pondera el rojo, el verde y el azul con 0,2126, 0,7152 y 0,0722, los mismos pesos del estándar de televisión ITU-R BT.709, porque el ojo es más sensible al verde. La relación es la luminancia más clara más 0,05 dividida entre la más oscura más 0,05. Ese 0,05 representa la luz reflejada por la pantalla y limita la escala de 1:1 a 21:1, negro sobre blanco.
Más allá del texto
El texto grande, de al menos 24 px o 18,66 px en negrita, sigue siendo legible con menos contraste y solo necesita 3:1 para AA. WCAG 2.1, publicado en junio de 2018, añadió el criterio 1.4.11 Contraste no textual: bordes de campos, indicadores de foco, iconos y las partes de un gráfico necesarias para entenderlo deben llegar a 3:1 frente a lo que tienen al lado.
El daltonismo y lo que viene
Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen una deficiencia en la visión del color, sobre todo en rojo y verde. El contraste se mide sobre la luminancia, así que un par válido sigue siendo legible, pero colores que solo se diferencian en el tono pueden parecer iguales. La simulación usa el modelo de Machado, Oliveira y Fernandes de 2009. Los borradores de WCAG 3 exploran APCA, un método más nuevo que también tiene en cuenta el tamaño del texto y si es oscuro sobre claro o claro sobre oscuro.
Preguntas frecuentes
¿Basta un buen contraste para la accesibilidad?
No. Es un requisito entre muchos. WCAG también pide que el color no sea la única forma de transmitir significado, por ejemplo añadiendo un icono o un subrayado a un enlace o a un error.
¿La simulación muestra exactamente lo que ve una persona?
Es una buena aproximación de la dicromacia completa. Muchas personas tienen una forma más leve y cada uno ve un poco distinto, así que úsala como guía.
¿Debo usar APCA en lugar de la relación de WCAG 2?
Para la conformidad actual, usa la relación de WCAG 2. WCAG 2.2, publicado en octubre de 2023, mantiene la misma fórmula, y leyes y normas como EN 301 549 la citan. APCA sigue en desarrollo.
Herramientas relacionadas
Comprobador de contraste de color
Comprobador de contraste WCAG gratuito: introduce los colores del texto y del fondo en HEX, RGB o HSL, mira la relación de contraste con los resultados AA y AAA, obtén el color válido más cercano y simula el daltonismo.
Generador de paletas de color
Cree, bloquee y mezcle paletas en el navegador. Copie HEX, variables CSS o JSON, exporte PNG o SVG y extraiga colores de una foto.
Rueda de color
Elija un color en una rueda interactiva, genere paletas complementarias, análogas, triádicas y otras, y copie HEX, RGB, HSL, HSV o CMYK.
Editor de degradados
Crea degradados CSS lineales y radiales en el navegador. Arrastra paradas de color, ajusta el ángulo y copia CSS, HEX, RGB, HSL, HSV o CMYK.
Los colores
Cómo funciona el color en pantalla y en impresión: RGB, CMYK, HSL, hex, rueda de color, degradados, contraste y herramientas PictorX.
¿Listo para probarlo?
Abra PictorX en su navegador: no requiere instalación ni tarjeta de crédito para comenzar.
Abrir el comprobador de contraste