Comprobador de contraste de color WCAG
Introduce el color del texto y el del fondo para obtener su relación de contraste según WCAG 2.2, ver si cumple los niveles AA y AAA y, si no llega, recibir el color corregido más parecido al tuyo.
Texto normal de 16 px: el veloz murciélago hindú comía feliz cardillo y kiwi.
Texto grande de 24 px
Negrita de 14 puntos (18,67 px) · borde de un control
Cómo usar el comprobador
- Escribe el color del texto y el del fondo, o elígelos con los selectores. Puedes copiarlos directamente de tu hoja de estilos.
- Mira la vista previa: muestra texto normal, texto grande y el borde de un control con tus colores reales.
- Revisa la tabla de resultados. Si una fila no cumple, debajo aparecen los colores corregidos más próximos para alcanzar 4,5:1 (AA) y 7:1 (AAA), cambiando solo el texto o solo el fondo.
- Pulsa Aplicar para probar la sugerencia; la herramienta recalcula todo al instante.
Si el texto tiene transparencia, primero se mezcla con el fondo (composición alfa) y el contraste se calcula con el color resultante, que es el que realmente ve el usuario.
Fórmula del contraste WCAG
El contraste se calcula a partir de la luminancia relativa (L) de cada color, que va de 0 (negro) a 1 (blanco). Primero se linealiza cada canal sRGB normalizado a 0–1:
c ≤ 0,04045 → c ÷ 12,92 · c > 0,04045 → ((c + 0,055) ÷ 1,055)^2,4
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
Contraste = (L₁ + 0,05) ÷ (L₂ + 0,05), siendo L₁ la luminancia más clara
El resultado va de 1:1 (mismo color) a 21:1 (negro sobre blanco). Los pesos muestran que el ojo es mucho más sensible al verde que al azul: por eso un azul puro (#0000FF) tiene una luminancia de solo 0,0722 y contrasta 8,59:1 con el blanco, mientras que un verde puro (#00FF00) solo llega a 1,37:1. Las versiones antiguas de WCAG usaban el umbral 0,03928 en lugar de 0,04045; con colores de 8 bits ambos dan exactamente el mismo resultado.
Niveles AA y AAA: tabla de requisitos
| Criterio WCAG | Elemento | AA | AAA |
|---|---|---|---|
| 1.4.3 / 1.4.6 | Texto normal (menos de 24 px, o de 18,67 px en negrita) | 4,5:1 | 7:1 |
| 1.4.3 / 1.4.6 | Texto grande (24 px o más, o 18,67 px en negrita) | 3:1 | 4,5:1 |
| 1.4.11 | Bordes de campos, iconos, foco, partes de gráficos | 3:1 | — |
El nivel AA es el que exigen la mayoría de normativas: la norma europea EN 301 549 (aplicable a webs del sector público en la UE y en España) y las pautas que adoptan muchos países latinoamericanos se basan en WCAG nivel AA.
Ejemplos de combinaciones habituales
| Texto | Fondo | Contraste | Veredicto |
|---|---|---|---|
| #767676 | #FFFFFF | 4,54:1 | El gris más claro que cumple AA sobre blanco |
| #595959 | #FFFFFF | 7,00:1 | El gris más claro que cumple AAA sobre blanco |
| #FFFFFF | #2EA44F | 3,21:1 | Solo texto grande; el fondo #268741 ya cumple AA |
| #FFFFFF | #FF0000 | 3,99:1 | Rojo puro: insuficiente para texto normal |
| #000000 | #FFFF00 | 19,55:1 | Máxima legibilidad (señalética) |
Errores comunes y consejos
- Fiarse del ojo: en una pantalla brillante, un gris claro parece legible, pero en un móvil al sol o para una persona mayor no lo es.
- Olvidar los estados: comprueba también el texto del placeholder, los enlaces al pasar el ratón, el foco y los botones desactivados que sí deben leerse.
- Texto sobre imágenes o degradados: mide el punto más desfavorable. Si usas degradados, comprueba ambos extremos.
- No depender solo del color: el contraste no garantiza que alguien con daltonismo distinga rojo de verde. Revisa tu diseño con el simulador de daltonismo y añade iconos o texto.
- Diseña la paleta con contraste en mente: al crear una paleta de colores, reserva tonos oscuros para texto y claros para fondos. El selector de color te muestra el contraste con blanco y negro de cada color.
WCAG 3 está en desarrollo y propone un método distinto (APCA). Mientras no sea una norma, las obligaciones legales siguen basándose en la fórmula de WCAG 2.x que usa esta herramienta.
Preguntas frecuentes
¿Qué contraste mínimo exige WCAG?
Para el nivel AA, 4,5:1 en texto normal y 3:1 en texto grande y en componentes de interfaz. Para el nivel AAA, 7:1 en texto normal y 4,5:1 en texto grande.
¿Qué se considera texto grande?
El que mide al menos 18 puntos (24 px en CSS) o 14 puntos en negrita (unos 18,67 px). Un texto de 16 px normal es texto normal, aunque parezca grande en el móvil.
¿Se redondea la relación de contraste?
No. WCAG no permite redondear: un contraste de 4,499:1 no cumple el mínimo de 4,5:1. Por eso esta herramienta trunca el valor mostrado en lugar de redondearlo hacia arriba.
¿El blanco sobre mi color de marca no cumple, qué hago?
Oscurece el fondo hasta llegar a 4,5:1 (la herramienta te propone el tono más cercano), usa texto oscuro en lugar de blanco o reserva esa combinación para texto grande y elementos decorativos.
¿Qué pasa con los logotipos y el texto decorativo?
WCAG exime del requisito de contraste a los logotipos, al texto puramente decorativo y a los controles desactivados. Aun así, conviene que sean legibles.