¿Cómo usar esta herramienta?
- Introduzca dos códigos HEX, separados por espacio o coma (p. ej. #333333 #FFFFFF)
- El ratio de contraste y la evaluación WCAG aparecen al instante
- Ajuste los colores hasta alcanzar el nivel de conformidad deseado
¿Qué hace el comprobador?
El comprobador de contraste toma dos códigos HEX y calcula el ratio de contraste según la especificación WCAG 2.1. Indica si la combinación de colores cumple los niveles de conformidad AA y AAA para texto normal y texto grande. Así se detectan problemas de accesibilidad antes de que un diseño se publique.
¿Cuál es la fórmula de cálculo?
El cálculo sigue dos pasos. Primero se determina la luminancia relativa de cada color. Para ello, los valores de canal sRGB (0-255) se transforman al espacio lineal y se suman ponderados:
L = 0,2126 * R_lin + 0,7152 * G_lin + 0,0722 * B_lin
Para cada canal vale: si el valor normalizado (0-1) está por debajo de 0,04045, se divide entre 12,92. Si no, rige la fórmula gamma ((c + 0,055) / 1,055) ^ 2,4.
En el segundo paso, el ratio de contraste resulta de las dos luminancias:
Contraste = (L_clara + 0,05) / (L_oscura + 0,05)
El resultado se sitúa entre 1:1 (colores idénticos) y 21:1 (negro sobre blanco). WCAG AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4,5:1 respectivamente.
¿Qué ejemplos de uso existen?
| Primer plano | Fondo | Ratio | AA Normal | AAA Normal |
|---|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Sí | Sí |
| #767676 | #FFFFFF | 4,54:1 | Sí | No |
| #AAAAAA | #FFFFFF | 2,32:1 | No | No |
| #333333 | #FFFFFF | 12,63:1 | Sí | Sí |
| #0000FF | #FFFFFF | 8,59:1 | Sí | Sí |
| #FF0000 | #FFFFFF | 4:1 | No | No |
| #FFFFFF | #FFFFFF | 1:1 | No | No |
El color #767676 es un umbral conocido: alcanza justo el umbral AA para texto normal sobre fondo blanco.
¿Qué áreas de uso existen?
Web design y desarrollo UI: antes de cada release, diseñadores y desarrolladores comprueban si los colores de texto ofrecen suficiente contraste sobre sus fondos. El comprobador da la respuesta en segundos, sin herramienta externa ni extensión de navegador.
Auditorías de diseño corporativo: las guías de marca definen colores primarios y secundarios como códigos HEX. Quien prepara informes de conformidad para el Real Decreto 1112/2018 o EN 301 549 necesita la evaluación WCAG para cada combinación de colores.
Pruebas de accesibilidad: las herramientas de auditoría automáticas como Lighthouse marcan errores de contraste pero no explican cuán cerca está un color del umbral. El comprobador muestra el valor exacto y hace transparente la decisión.
Plantillas de correo: muchos clientes solo renderizan estilos inline. Un control rápido de contraste antes del envío evita que texto claro sobre fondo claro sea ilegible para parte de los destinatarios.
Preguntas frecuentes
¿Qué es un buen ratio de contraste?
WCAG AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4,5:1 respectivamente. Negro sobre blanco alcanza el máximo de 21:1.
¿Cómo se calcula el ratio de contraste?
Se determina la luminancia relativa de los dos colores según la fórmula WCAG 2.1, se ponen la luminancia clara y la oscura en relación (L1 + 0,05) / (L2 + 0,05) y se obtiene un valor entre 1:1 y 21:1.
¿Qué cuenta como texto grande?
Al menos 18 pt (24 px) en grosor normal o 14 pt (18,66 px) en negrita. Para el texto grande rigen requisitos de contraste más bajos.
¿Basta con la conformidad AA?
AA es el requisito mínimo habitual para sitios y apps. AAA ofrece mejor legibilidad pero es más difícil de cumplir y se exige con menos frecuencia.
¿Los colores se envían a un servidor?
No. Todo el cálculo se ejecuta en local en el navegador. No se transmiten datos.
¿Qué herramientas de color están relacionadas?
Otras herramientas del ecosistema kittokit que encajan con el tema:
- Convertir HEX a RGB — convertir códigos HEX a RGB, HSL y OKLCH para CSS-authoring y flujos de diseño.
Última actualización: