Comprobador de contraste de color WCAG 2.2
Se ejecuta localmente en tu navegadorComprueba el contraste de texto y UI con WCAG 2.2 AA y AAA y corrige los pares que fallan
Restaurando colores guardados…
Herramientas relacionadas
¿Qué es el comprobador de contraste de color WCAG 2.2?
El comprobador de contraste de color WCAG 2.2 mide la relación de contraste entre un color de primer plano y uno de fondo e indica si cumple AA y AAA para texto (CE 1.4.3 y 1.4.6) y para componentes de UI y objetos gráficos (CE 1.4.11). Acepta HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() y nombres de color CSS, muestra el par como texto y como control, y sugiere el color accesible más cercano cuando un par no cumple.
Cómo usarlo
- 1.Escribe o elige un color de primer plano y uno de fondo.
- 2.Lee la relación y la fila de cumple/no cumple de cada criterio WCAG 2.2.
- 3.Revisa las vistas previas de texto normal, texto grande y control.
- 4.Si una comprobación falla, elige Ajustar primer plano o Ajustar fondo a AA o AAA, compara el color original y el sugerido y selecciona Aplicar.
- 5.Copia el resumen del resultado o las declaraciones CSS.
Cómo se calcula la relación
Cada color se convierte a sRGB y su luminancia relativa se calcula con la fórmula de WCAG (umbral de linealización 0.04045). La relación es (L1 + 0.05) / (L2 + 0.05). Se muestra redondeada a dos decimales, pero cada decisión de cumple/no cumple usa el valor sin redondear, por lo que 4.499:1 no cumple AA aunque se muestre como 4.50:1. Un primer plano translúcido se mezcla sobre el fondo, y un fondo translúcido sobre el telón de fondo (blanco por defecto), canal a canal en sRGB, como lo pintan los navegadores. Los colores fuera de sRGB, como valores intensos de Display P3 u OKLCH, se recortan a sRGB antes de medir y la herramienta lo indica.
Límites y privacidad
El comprobador mide un par de colores. No evalúa el renderizado de fuentes, el texto sobre imágenes o degradados ni otros criterios WCAG; usa Web Accessibility Checker para auditar una página completa. En WCAG 2.2, el texto grande tiene al menos 18 puntos, o 14 puntos en negrita (unos 24px, o 18,66px en negrita). Los colores se procesan en tu navegador y el último par solo se guarda en el almacenamiento local de este navegador.
