Comprobador de contraste de color
Comprueba si el texto será realmente legible, según el estándar de accesibilidad.
- Se ejecuta en tu navegador — tu texto no se envía a ningún sitio
- Sin registro, sin cuotas, gratis para usar tantas veces como quieras
Cómo funciona
El texto gris claro sobre blanco es el fallo de accesibilidad más común de la web, y es totalmente evitable. Las pautas de accesibilidad definen el contraste como una relación precisa, así que si una combinación pasa o no es cuestión de aritmética y no de opinión.
Cómo se calcula la relación
La luminancia relativa de cada color se calcula como especifican las pautas, con la corrección gamma aplicada por canal, y la relación se toma entre el más claro y el más oscuro. El resultado coincide con lo que indicará una auditoría de accesibilidad, porque es la misma fórmula.
Los umbrales
El texto normal necesita 4,5:1 para AA y 7:1 para AAA. El texto grande, aproximadamente 24px o 18,7px si está en negrita, solo necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz y los gráficos con significado necesitan 3:1. AA es lo que exigen la mayoría de las organizaciones y de las legislaciones.
Por qué al texto grande se le exige menos
Las letras más grandes tienen más píxeles en cada trazo, así que siguen siendo legibles con menos contraste. Por eso un encabezado puede usar un gris más claro que el texto del cuerpo.
Lo que la relación no recoge
No dice nada sobre el daltonismo, que es una comprobación aparte, ni sobre si el texto es lo bastante grande o la tipografía es legible. Una relación que pasa es el mínimo, no la prueba de un diseño legible.
Comprobador de contraste de color: preguntas
¿Qué relación de contraste necesito?
4,5:1 para texto normal en AA, 3:1 para texto grande. AAA los eleva a 7:1 y 4,5:1.
¿Qué cuenta como texto grande?
Aproximadamente 24px o más, o 18,7px o más si está en negrita.
¿Aprobar significa que mi diseño es accesible?
No. El contraste es un requisito entre muchos; no dice nada sobre el daltonismo, el tamaño del texto ni la legibilidad.