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 hasta 0,040 45 se dividen entre 12,92, y los valores mayores, v, 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 figura 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
#767676 sobre blanco: el canal 118/255 = 0,463 pasa a 0,181 al linealizarlo, 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 el 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 paso siguiente, #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 alcanza 4,5:1. La herramienta juzga con el valor sin redondear y corta la cifra en lugar de redondearla. #0080aa sobre blanco da 4,4986 y no cumple para el texto normal. Redondeado se leería 4,50 junto a un no cumple, así que la herramienta muestra 4,49:1, y #777777 aparece como 4,47:1.
Texto grande y fuentes finas
El umbral del 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 de que las fuentes finas pueden verse más pálidas 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 trabaja solo con colores hexadecimales sólidos, sin transparencia y sin imagen detrás.