Comprobador de Contraste WCAG
Comprueba si dos colores cumplen las pautas de accesibilidad WCAG 2.1 y 2.2 (niveles AA y AAA) para texto normal, texto grande y componentes de interfaz.
Resultado
--:1
La opacidad se compone con el color de debajo (si el fondo tiene opacidad parcial, se mezcla con #050505).
Referencia de umbrales
| Requisito | AA | AAA |
|---|---|---|
| Texto normal (< 18pt / < 14pt negrita) | 4.5:1 | 7:1 |
| Texto grande (≥ 18pt / ≥ 14pt negrita) | 3:1 | 4.5:1 |
| Componentes de interfaz / gráficos | 3:1 | — |
Cómo funciona
Este comprobador de contraste calcula la relación de contraste entre dos colores usando la fórmula oficial del W3C (WCAG 2.x): primero convierte cada color sRGB a luminancia relativa aplicando la corrección de gamma, y después compara la luminancia más alta con la más baja con la fórmula (L1 + 0.05) / (L2 + 0.05).
El resultado se evalúa contra los umbrales de las pautas WCAG 2.1 y 2.2, que son idénticos en este punto: 4.5:1 para texto normal en nivel AA, 7:1 en AAA; 3:1 y 4.5:1 para texto grande (18 puntos o 14 puntos en negrita); y 3:1 para componentes de interfaz y gráficos significativos. La herramienta muestra una vista previa en vivo con texto pequeño, texto grande y un botón de ejemplo sobre el fondo elegido.
Si usas colores con transparencia, el color se compone con el fondo subyacente antes de calcular la luminancia, tal y como exige WCAG cuando el texto se superpone a una imagen o degradado. También puedes intercambiar los dos colores con un clic para probar la combinación inversa.
Honestidad: WCAG 2.x solo contempla colores opacos; para transparencias sobre imágenes la práctica recomendada es medir el peor caso posible. WCAG 2.2 mantiene los mismos umbrales que 2.1, y el nuevo método APCA (propuesto para WCAG 3) usa otra matemática distinta: si tu proyecto exige APCA, usa una herramienta específica para ello.