Comprobador de contraste
Elige un color de texto y un fondo, y la relación de contraste se mide según los requisitos de las WCAG.
Relación de contraste
16.69:1
La escala va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco.
Cómo se ve
Título en texto grande
El texto normal a este tamaño es el que más exige al contraste, porque los trazos de las letras son finos.
Requisitos de las WCAG
- Texto normal, AAMenos de 18 puntos, o menos de 14 puntos en negrita · 4.5:1Cumple
- Texto normal, AAAMenos de 18 puntos, o menos de 14 puntos en negrita · 7:1Cumple
- Texto grande, AADesde 18 puntos, o 14 puntos en negrita · 3:1Cumple
- Texto grande, AAADesde 18 puntos, o 14 puntos en negrita · 4.5:1Cumple
- Interfaz y gráficos, AABordes, iconos y todo lo que transmite significado · 3:1Cumple
Cómo funciona
La relación de contraste mide la diferencia de luminancia relativa entre dos colores. Va de 1:1, dos colores idénticos, a 21:1, negro sobre blanco.
Las WCAG exigen al menos 4.5:1 para el texto normal en el nivel AA y 7:1 en el nivel AAA. Para el texto grande (18 puntos, o 14 puntos en negrita) bastan 3:1 y 4.5:1.
Los componentes de interfaz y los gráficos con significado necesitan 3:1 respecto a lo que los rodea. Eso incluye el borde de un campo de texto y los iconos sin texto al lado.
La relación se calcula a partir de la luminancia, no de lo distintos que parezcan los colores. Dos colores con la misma luminosidad pero un tono totalmente distinto, como el rojo (#ff0000) y el verde (#009400), dan una relación de 1.00 y son ilegibles aunque parezcan diferentes.
Los requisitos son un mínimo, no un objetivo. Un texto justo en 4.5:1 sigue costando leerlo a pleno sol o en una pantalla barata.
Cómo calcula la herramienta
Cada canal se divide entre 255 y se linealiza: los valores de hasta 0.040 45 se dividen entre 12.92, y los valores v mayores pasan a ser ((v + 0.055) / 1.055) elevado a 2.4. La luminancia relativa es 0.2126 R + 0.7152 G + 0.0722 B, y la relación es (L1 + 0.05) / (L2 + 0.05), con el color más claro como L1. El umbral 0.040 45 está en las WCAG desde mayo de 2021; antes era 0.039 28, y el W3C dice que el cambio no tiene efecto práctico. Para los colores hexadecimales no cambia nada, porque ningún valor de canal cae entre los dos: 10/255 es 0.0392 y 11/255 es 0.0431.
Ejemplo paso a paso
#767676 sobre blanco: el canal 118/255 = 0.463 pasa a 0.181 una vez linealizado, y como los tres canales son iguales, la luminancia también es 0.181. La relación es (1 + 0.05) / (0.181 + 0.05) = 4.54, que cumple el nivel AA para texto normal. Un paso más claro, #777777 da 4.478 y no cumple. El gris más claro que cumple el nivel AAA, 7:1, sobre blanco es #595959, con 7.0047; el siguiente paso, #5a5a5a, da 6.897.
Sin redondeo
La explicación del W3C del criterio de conformidad 1.4.3 dice que la relación no debe redondearse: 4.499:1 no cumple 4.5:1. La herramienta juzga con el valor sin redondear y trunca la cifra en lugar de redondearla. #0080aa sobre blanco da 4.4986 y no cumple para texto normal. Redondeado, se leería 4.50 junto a un “no cumple”, así que la herramienta muestra 4.49:1, y #777777 se muestra como 4.47:1.
Texto grande y fuentes delgadas
El umbral para texto grande se fija en puntos. Con 1 pt = 1.333 píxeles CSS, 18 puntos son unos 24 píxeles y 14 puntos unos 18.5 píxeles, según la misma explicación. También advierte que las fuentes delgadas pueden verse más tenues que su color por el suavizado de bordes, así que un texto que cumple la relación puede tener poco contraste en la práctica. La herramienta solo trabaja con colores hexadecimales sólidos, sin transparencia ni imagen de fondo.