Comprobador de Contraste WCAG
Calcula el ratio de contraste entre dos colores y comprueba si cumple WCAG AA y AAA, texto e interfaz. Te sugiere el color corregido sin perder el tono.
Acepta #hex, rgb(), hsl() y nombres CSS.
Ratio de contraste
1.83:1
Aa
El veloz murciélago hindú comía feliz cardillo y kiwi.
Corregir el color
Ajusta solo la luminosidad y conserva el tono y la saturación, así que el color sigue siendo el mismo de tu marca.
Vista previa
Texto grande (24px)
El veloz murciélago hindú comía feliz cardillo y kiwi.
Texto normal (16px)
El veloz murciélago hindú comía feliz cardillo y kiwi.
Texto pequeño (13px)
El veloz murciélago hindú comía feliz cardillo y kiwi.
Qué cuenta como "texto grande"
No es una impresión visual, es un umbral concreto: 18 pt (24 px) en peso normal, o 14 pt (18.66 px) en negrita. Por debajo de eso el mínimo es 4.5:1 aunque el texto parezca grande. Es el error que más falsos aprobados produce.
Qué hace esta herramienta
Mide el ratio de contraste entre un color de texto y un color de fondo, y te dice de golpe si cumple los cinco umbrales de WCAG 2.2 que importan: AA y AAA para texto normal y grande, más el de elementos no textuales que casi nadie comprueba.
Si suspende, propone un color corregido conservando el tono y la saturación: ajusta solo la luminosidad, así que el resultado sigue siendo el color de tu marca, un poco más oscuro o más claro.
Acepta #hex, rgb(), hsl() y nombres CSS, y resuelve la transparencia por ti.
Cómo usarla
- Pon el color del texto y el del fondo, con el selector o escribiéndolos.
- Lee el ratio y los cinco resultados.
- Si algo suspende, pulsa el botón de corrección del nivel que necesites.
- Comprueba la vista previa: el mismo texto a 24, 16 y 13 píxeles.
Los umbrales, y cuál te aplica
| Elemento | AA | AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande | 3:1 | 4.5:1 |
| Elementos no textuales | 3:1 | — |
AA es el que exigen las normativas. La directiva europea de accesibilidad, la Section 508 estadounidense y la mayoría de leyes nacionales apuntan a WCAG nivel AA. AAA está pensado para contextos concretos y la propia norma dice que no se exige como requisito general de un sitio entero.
El umbral que se olvida: 1.4.11
El criterio 1.4.11 Contraste no textual pide 3:1 para cosas que no son texto pero transmiten información:
- El borde de un campo de formulario contra el fondo de la página. Un input con borde
#e5e5e5sobre blanco da 1.3:1 y es invisible para mucha gente. - Los iconos que significan algo (una papelera, un aviso, un check).
- Las líneas y barras de una gráfica, que es donde más se incumple.
- El estado de foco del teclado.
No aplica a decoración pura ni a logotipos. Pero un diseño que aprueba AA en todo su texto y falla aquí sigue siendo inaccesible.
Qué cuenta como “texto grande”
Es la causa número uno de falsos aprobados, porque suena a criterio visual y es un número:
- 18 pt = 24 px en peso normal
- 14 pt = 18.66 px en negrita
Un titular de 20 px en peso normal no es texto grande: necesita 4.5:1, no 3:1. La confusión aparece porque en pantalla se ve claramente más grande que el cuerpo de texto, pero el umbral no atiende a eso.
Regla práctica: si no estás seguro, aplica 4.5:1. Aprobar de más nunca ha suspendido una auditoría.
Por qué dos colores muy distintos pueden suspender
El contraste de WCAG no mide diferencia de color, mide diferencia de brillo. Y el brillo no se reparte por igual entre los tres canales:
| Canal | Peso en la luminancia |
|---|---|
| Verde | 71.52 % |
| Rojo | 21.26 % |
| Azul | 7.22 % |
El azul aporta menos de una décima parte del brillo percibido. Eso explica dos cosas que sorprenden:
- Azul sobre negro suspende casi siempre.
#0000ffsobre#000000da 2.44:1, aunque se distinga perfectamente en una pantalla buena. Para alguien con baja visión, o para cualquiera con el móvil a pleno sol, esa diferencia de tono no basta. - Amarillo sobre blanco es peor de lo que parece. El amarillo lleva rojo y verde al máximo, así que es casi tan luminoso como el blanco:
#ffff00sobre#ffffffda 1.07:1.
La razón de fondo es que el contraste está pensado para funcionar también cuando el color no se percibe: daltonismo, escala de grises, pantallas malas, luz directa.
Y la gamma, que es donde fallan las implementaciones caseras
Para obtener la luminancia no basta con ponderar los valores de R, G y B tal cual salen del hex. Hay que deshacer antes la corrección gamma de sRGB en cada canal, porque los valores de un color no son lineales respecto a la luz que emite la pantalla. Un #808080 no emite la mitad de luz que un #ffffff: emite un 21,6 %.
Saltarse ese paso —promediar canales, o ponderarlos sin linealizar— produce números que parecen razonables y están mal, que es lo peor que puede pasar en una comprobación de accesibilidad.
Cómo corregir sin perder la marca
Cuando un color corporativo suspende, el reflejo es cambiarlo. Casi nunca hace falta.
El contraste depende de la luminosidad, no del tono ni de la saturación. Moviendo solo la claridad en HSL se llega al umbral conservando la identidad: un azul de marca sigue siendo el mismo azul, solo un punto más oscuro. Eso es lo que hacen los botones de corrección de esta página, y por eso te dicen si el ajuste va hacia arriba o hacia abajo.
Dos matices honestos:
- A veces el problema es el fondo. Sobre un gris medio (
#808080) no existe ningún color de texto que llegue a 7:1, porque ni el negro ni el blanco puros lo alcanzan desde ahí. Cuando la herramienta no propone corrección, ese es el motivo. - El color de marca puede quedarse donde está si lo usas solo en elementos grandes o decorativos, y usas la variante corregida para el texto pequeño. Es lo que hacen la mayoría de sistemas de diseño serios: un color de marca y una versión “accesible” del mismo para texto.
La transparencia hay que resolverla antes
WCAG trabaja con colores opacos. Si tu texto es rgba(0,0,0,0.6), no tiene un contraste propio: tiene el del color que resulta de componerlo sobre lo que haya detrás.
La consecuencia práctica es que el mismo valor puede pasar y suspender según dónde lo pongas. Un gris translúcido que funciona sobre una tarjeta blanca puede fallar sobre una imagen. Esta herramienta compone automáticamente y te muestra los dos colores opacos que está midiendo de verdad, para que sepas qué estás aprobando.
Preguntas frecuentes
¿Qué ratio de contraste necesito para cumplir WCAG?
Depende de qué sea el elemento y de qué nivel busques. Para texto normal el nivel AA pide 4.5:1, que es el mínimo que exigen la mayoría de normativas de accesibilidad. Para texto grande baja a 3:1. El nivel AAA sube a 7:1 para texto normal y 4.5:1 para grande. Y hay un cuarto umbral que casi nadie comprueba, el del criterio 1.4.11: los elementos no textuales —bordes de campos, iconos que transmiten información, líneas de una gráfica— necesitan 3:1 contra lo que tengan al lado.
¿Qué cuenta como "texto grande" en WCAG?
No es una impresión visual sino un umbral concreto: 18 puntos, que son 24 píxeles, en peso normal; o 14 puntos, que son 18.66 píxeles, en negrita. Por debajo de eso el mínimo sigue siendo 4.5:1 aunque el texto parezca grande en pantalla. Es el error que más falsos aprobados produce: alguien mide un titular de 20px, aplica el umbral de 3:1 porque "es un titular", y en realidad ese tamaño exige 4.5:1.
¿Por qué dos colores que se ven distintos suspenden el contraste?
Porque el contraste de WCAG no mide diferencia de color sino diferencia de luminancia, y la luminancia no reparte igual entre los canales: el verde aporta el 72 % del brillo percibido, el rojo el 21 % y el azul solo el 7 %. Por eso un texto azul sobre negro suspende con facilidad aunque se distinga bien, y por eso dos colores muy diferentes de tono pero de brillo parecido pueden dar un ratio cercano a 1. Un usuario con baja visión o una pantalla a pleno sol necesita la diferencia de brillo, no la de tono.
¿Cómo se calcula el ratio de contraste?
Se calcula la luminancia relativa de cada color y se aplica la fórmula (L1 + 0.05) / (L2 + 0.05), con L1 el más claro. El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Lo importante es el paso previo: para obtener la luminancia hay que deshacer la corrección gamma de sRGB en cada canal antes de ponderarlos, no basta con promediar R, G y B. Saltarse ese paso da números plausibles y equivocados.
¿Qué hago si mi color de marca no pasa el contraste?
No hace falta cambiar de color, casi siempre basta con ajustar su luminosidad. La corrección que propone esta herramienta mueve solo la claridad y conserva el tono y la saturación, así que el resultado sigue siendo reconociblemente el mismo color de marca, solo un poco más oscuro o más claro. Si ni siquiera el extremo del tono llega al umbral, el problema no es el texto sino el fondo: sobre un gris medio no existe ningún color de texto que alcance 7:1.
¿Cómo afecta la transparencia al contraste?
WCAG no admite transparencias en el cálculo: exige colores resueltos. Si tu texto o tu fondo tienen alfa, primero hay que componerlos sobre lo que haya detrás y medir el color resultante. Esta herramienta lo hace automáticamente y te muestra los dos valores opacos que realmente se están midiendo. La consecuencia práctica es que un mismo `rgba()` puede pasar sobre un fondo y suspender sobre otro.
Reseñas y valoraciones
Aún no hay reseñas. ¡Sé la primera persona en opinar!
Herramientas relacionadas
Otras del catálogo que se usan bien junto a esta.