Verificador de Contraste
El comprobador de contraste calcula el ratio de contraste WCAG 2.1 entre un color de texto y un color de fondo y muestra si la combinación cumple AA y AAA para texto normal y grande.
Acerca de esta herramienta
El comprobador de contraste calcula el ratio de contraste WCAG 2.1 entre un color de texto y un color de fondo y muestra si la combinación cumple AA y AAA para texto normal y grande.
Cómo se usa
- Introduce o elige el color del texto.
- Introduce o elige el color de fondo (sirven valores hex, incluida la forma abreviada de 3 dígitos).
- Lee el ratio de contraste y los resultados AA/AAA para texto normal y grande.
- Ajusta cualquiera de los dos colores hasta que cumpla el nivel que necesitas.
Datos útiles
- WCAG 2.1 AA exige un ratio de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande.
- WCAG 2.1 AAA exige al menos 7:1 para texto normal y 4.5:1 para texto grande.
- Texto grande significa al menos 18 pt (24 px) en peso normal o 14 pt (unos 18.66 px) en negrita.
- Los ratios de contraste van de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
- El ratio se calcula a partir de la luminancia relativa de cada color, según la fórmula de WCAG.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Qué ratio de contraste se exige para la accesibilidad?
Para WCAG 2.1 nivel AA, el texto normal necesita al menos 4.5:1 y el texto grande al menos 3:1. El nivel AAA lo eleva a 7:1 y 4.5:1.
¿Es accesible el texto blanco sobre verde?
Depende del tono. Muchos verdes brillantes no cumplen AA con texto blanco; los verdes más oscuros suelen cumplir. Introduce tus valores hex exactos para comprobarlo.
¿Qué se considera texto grande en WCAG?
El texto de al menos 18 puntos (24 px) en peso normal, o de al menos 14 puntos (unos 18.66 px) en negrita.
¿El contraste WCAG se aplica a botones e iconos?
El criterio de conformidad 1.4.11 de WCAG 2.1 pide un contraste de al menos 3:1 para los componentes de interfaz y los gráficos significativos respecto a su entorno.