Comprobador de Contraste
Comprueba al instante el ratio de contraste WCAG entre el texto y el fondo.
100% privado: todo funciona en tu navegador
Cómo usarla
- 1
Define el color del texto y el de fondo con los selectores o escribiendo códigos hex.
- 2
El ratio de contraste WCAG se calcula al instante.
- 3
Comprueba las cuatro insignias para ver qué niveles WCAG se cumplen.
- 4
Usa Intercambiar para comprobar la combinación inversa.
Ejemplos
Texto oscuro sobre blanco
Entrada
Texto #111827 · Fondo #FFFFFFSalida
17.74 : 1 — AA y AAA aptos para todos los tamañosGris de bajo contraste
Entrada
Texto #9CA3AF · Fondo #FFFFFFSalida
2.54 : 1 — no apto para AA en texto normalPreguntas frecuentes
¿Qué ratio de contraste debo buscar?
La WCAG recomienda al menos 4.5:1 para texto normal (AA) y 7:1 para AAA. El texto grande (18 pt o 14 pt en negrita) necesita al menos 3:1.
¿Cómo se calcula el ratio?
Con la fórmula WCAG 2.x (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas del color más claro y el más oscuro. El ratio va de 1:1 a 21:1.
¿Se comprueba el daltonismo?
No: el ratio solo mide la diferencia de luminosidad. Unos colores pueden cumplir el ratio y aun así ser difíciles de distinguir para personas con daltonismo.