Verificador de Contraste (WCAG)
Elige el color del texto y el color del fondo para ver el contraste entre ellos y si cumplen los niveles AA y AAA del WCAG.
Texto grande de ejemplo
Este es un texto normal de ejemplo para evaluar la legibilidad.
AA: aprobado
AAA: aprobado
AA: aprobado
AAA: aprobado
¿No lo crees? Apaga tu internet y pruébalo — sigue funcionando.
Cómo funciona
El contraste se calcula siguiendo la fórmula oficial del WCAG 2.x, a partir de la luminancia relativa de cada color. El resultado es una proporción de 1:1 (sin contraste alguno) a 21:1 (negro sobre blanco, el máximo). Las pautas de accesibilidad exigen contrastes mínimos distintos para texto normal y texto grande (desde 18pt, o 14pt en negrita), y definen dos niveles de conformidad: AA (mínimo recomendado) y AAA (más riguroso). Para tener una idea de los números: negro sobre blanco da 21:1; el gris #767676 sobre blanco da cerca de 4,5:1 (el gris más claro que aún pasa el AA para texto normal); y un gris claro #999999 sobre blanco da solo 2,85:1, por debajo del mínimo. Si la herramienta indica que no pasa, oscurece el texto (o aclara el fondo) hasta que la proporción suba. El mismo cálculo vale para iconos y bordes de campos: WCAG 2.1 pide 3:1 para los componentes de interfaz y los gráficos necesarios para entender el contenido.