Comprobador de contraste de color (WCAG)
Mide la relación de contraste entre un color de texto y uno de fondo y comprueba si cumple los niveles de accesibilidad WCAG (AA y AAA) para texto normal y grande. Escribe los colores en hexadecimal o rgb, o elígelos con el selector, y verás el resultado y una vista previa al instante. Todo ocurre en tu navegador.
Cómo comprobar el contraste de color
- Introduce el color del texto (primer plano) en hexadecimal o rgb, o elígelo con el selector.
- Haz lo mismo con el color de fondo.
- Lee la relación de contraste y si cumple WCAG AA/AAA para texto normal y grande.
- Usa «Intercambiar» para invertir el texto y el fondo.
- Ajusta los colores hasta que la combinación que necesitas quede en verde.
Preguntas frecuentes
¿Qué es la relación de contraste?
Es una medida de la diferencia de luminancia entre dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). Cuanto mayor sea, más legible es el texto. Se calcula con la fórmula de luminancia relativa de WCAG.
¿Qué contraste exige WCAG?
Para texto normal: 4.5:1 (AA) y 7:1 (AAA). Para texto grande (a partir de unos 18 pt, o 14 pt en negrita): 3:1 (AA) y 4.5:1 (AAA). Los componentes de interfaz y los gráficos necesitan al menos 3:1.
¿Qué diferencia hay entre AA y AAA?
AA es el nivel recomendado y exigido por la mayoría de normativas de accesibilidad; AAA es más estricto y no siempre es alcanzable para todo el contenido. Apunta al menos a AA.
¿Qué cuenta como texto grande?
Aproximadamente 18 pt (24 px) o más, o 14 pt (unos 18.66 px) o más si está en negrita. El texto grande admite una relación de contraste algo menor.
¿Qué formatos de color acepta?
Hexadecimal de 3 o 6 dígitos (#abc o #aabbcc) y rgb(r, g, b). El selector de color escribe el valor por ti automáticamente.
¿Se envían mis colores a algún servidor?
No. Todo el cálculo ocurre en tu navegador con JavaScript; nada sale de tu equipo y funciona sin conexión.