Comprobador de contraste de colores WCAG
Comprueba si el contraste entre dos colores cumple los niveles AA y AAA de accesibilidad.
Tus datos no se envían a ningún servidor.
El comprobador de contraste WCAG calcula el ratio entre el color del texto y el del fondo y te dice si la combinación cumple los niveles AA y AAA, para texto normal y para texto grande. Si no llega, te propone el color más parecido al tuyo que sí cumple, para que no tengas que ir probando a ciegas.
Los umbrales de un vistazo
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
El texto grande es el de 24 píxeles o más, o el de unos 18,66 píxeles en negrita. La mayoría de los textos de una web, incluidos los botones y los pies de foto, cuentan como texto normal.
Qué exige la normativa
En la Unión Europea, la norma EN 301 549 incorpora los criterios de WCAG en nivel AA. Es obligatoria para las webs del sector público y, desde junio de 2025 con la Ley Europea de Accesibilidad, también para muchos servicios privados, como el comercio electrónico, la banca o el transporte de viajeros.
El contraste es uno de los fallos más frecuentes en las auditorías, y también uno de los más fáciles de corregir: casi siempre basta con oscurecer un gris.
Cuando la combinación falla
Los casos típicos son el gris claro sobre blanco que tan limpio queda en un diseño, el texto blanco sobre un color de marca vivo, como un naranja o un verde claro, y los textos sobre fotos. En los dos primeros, la propuesta de la herramienta suele resolverlo con un tono un poco más oscuro del mismo color. En el de las fotos no hay un único fondo, así que lo habitual es poner una capa oscura semitransparente entre la imagen y el texto.
Cómo usar Contraste WCAG
- 1
Elige el color del texto
Usa el selector visual o escribe el código hex del color de primer plano, el del texto.
- 2
Elige el color de fondo
Haz lo mismo con el color sobre el que irá el texto. Si los has puesto al revés, el botón de intercambiar los cambia de sitio.
- 3
Lee el ratio y los cuatro niveles
El ratio va de 1:1, sin contraste, a 21:1, negro sobre blanco. Debajo verás si pasa AA y AAA, tanto para texto normal como para texto grande.
- 4
Aplica la propuesta si falla
Cuando la combinación no llega a un nivel, la herramienta propone el color de texto más parecido al tuyo que sí lo cumple. Con «Aplicar» lo pruebas en la vista previa.
Preguntas frecuentes
¿Qué ratio de contraste necesito para cumplir WCAG?
Para el nivel AA, 4,5:1 en texto normal y 3:1 en texto grande. Para el nivel AAA, 7:1 en texto normal y 4,5:1 en texto grande.
¿Qué se considera texto grande?
El de 18 puntos o más, que en pantalla son unos 24 píxeles, o el de 14 puntos en negrita, unos 18,66 píxeles. Al leerse mejor por tamaño, WCAG le exige menos contraste.
¿Qué diferencia hay entre AA y AAA?
AA es el nivel que exigen las normas de accesibilidad y los contratos públicos. AAA es más estricto y no se pide para un sitio entero, porque hay combinaciones de marca que nunca llegarían, pero conviene en textos largos o para público con baja visión.
¿Cómo se calcula el ratio de contraste?
Con la luminancia relativa de los dos colores, según la fórmula de WCAG: (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro.
¿Por qué a veces no hay propuesta posible?
Porque sobre fondos de luminosidad media ni el negro ni el blanco llegan a 7:1, y a veces ni a 4,5:1. En ese caso ningún color de texto sirve y la única solución es aclarar u oscurecer el fondo.
¿El contraste importa también fuera del texto?
Sí. Desde WCAG 2.1 se exige al menos 3:1 para los componentes de interfaz y los gráficos que transmiten información, como el borde de un campo de formulario, un icono sin texto o el indicador de foco.