Verificador de contraste de color online y gratuito. Comprueba cumplimiento WCAG AA/AAA y mide ratios de contraste para accesibilidad web. En el navegador.
Primer plano
Fondo
21.00:1
Relación de contraste
Texto normal
AA (4.5:1)Pasa
AAA (7:1)Pasa
Texto grande
AA (3:1)Pasa
AAA (4.5:1)Pasa
Vista previa
El veloz murciélago hindú comía feliz cardillo 1234567890
El veloz murciélago hindú comía feliz cardillo 1234567890
Verificador gratuito de contraste de color que prueba ratios contra estándares WCAG 2. 1 (AA, AAA). Todo en tu navegador.
¿Cómo usar Verificador de contraste?
Introduce colores de primer plano y fondo.
Comprueba la ratio y grado WCAG.
Ajusta colores para cumplir estándares.
Preguntas frecuentes sobre Verificador de contraste
¿Cuál es la diferencia entre WCAG AA y AAA?
AA requiere 4.5:1 para texto normal y 3:1 para grande. AAA es más estricto: 7:1 y 4.5:1.
¿Qué pasa si no cumple la ratio?
Ajusta los colores más claros u oscuros. La herramienta muestra resultados en tiempo real.
El texto grande tiene un umbral menor, ¿a partir de qué tamaño cuenta como grande?
La WCAG considera texto grande a partir de 18pt (unos 24px) en peso normal, o 14pt (unos 18,7px) en negrita. Cumplirlo baja el requisito AA de 4,5:1 a 3:1. Recuerda que son mínimos, no objetivos: el texto del cuerpo debe leerse también con la pantalla atenuada o a plena luz del día, así que acercarse a 7:1 es el hábito más seguro.
¿Cómo compruebo el contraste de un texto sobre una foto o un panel translúcido?
El cálculo del contraste presupone dos colores planos, así que sobre una fotografía hay que muestrear el punto más claro y el más oscuro bajo el texto y hacer la comprobación dos veces. Si uno de los dos falla, el texto se pierde en algún tramo de la imagen. En la práctica, poner una franja de color sólido detrás del texto es más fiable que una capa negra translúcida o una sombra, que dependen de lo que haya debajo.
¿Cómo aprovechar Verificador de contraste al máximo?
El texto normal necesita 4,5:1; a partir de 18pt o 14pt en negrita basta con 3:1 para el nivel AA.
En la UE, la norma EN 301 549 remite a estos mismos umbrales de contraste de WCAG.
Los elementos no textuales, como iconos y bordes de campos, también piden 3:1.