Contraste de color accesible: qué ratio exige WCAG
Si el texto de tu web es gris claro sobre blanco, probablemente no cumple: WCAG exige un contraste de al menos 4,5 a 1 para el texto normal. Los umbrales, cómo se calcula el ratio y qué valores tienen colores reales.
Los umbrales que importan
Las Pautas de Accesibilidad para el Contenido Web (WCAG), del W3C, miden el contraste como una proporción entre la luminosidad del color más claro y la del más oscuro, de 1:1 (mismo color) a 21:1 (negro sobre blanco). Para el nivel AA, que es el que suele exigirse, piden:
| Qué | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | al menos 4,5:1 | al menos 7:1 |
| Texto grande | al menos 3:1 | al menos 4,5:1 |
| Componentes de interfaz y gráficos necesarios (bordes de un campo, iconos) | al menos 3:1 | — |
El W3C considera «texto grande» el de 18 puntos o más, o el de 14 puntos o más si está en negrita. En una web, 18 puntos equivalen a unos 24 píxeles CSS, y 14 puntos en negrita, a unos 18,7 píxeles. Quedan fuera de la exigencia el texto de un componente inactivo, el puramente decorativo y el que forma parte de un logotipo.
Cómo se calcula el contraste
La fórmula es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminosidad relativa del color más claro y L2 la del más oscuro. La luminosidad relativa de un color se calcula a partir de sus componentes rojo, verde y azul una vez corregidos por la curva de gamma de sRGB, ponderando el verde mucho más que el azul (0,2126 de rojo, 0,7152 de verde y 0,0722 de azul), porque el ojo es más sensible al verde. Por eso dos colores que «parecen» igual de oscuros pueden tener contrastes muy distintos.
No hace falta hacer la cuenta a mano: la calculadora de contraste te da el ratio de dos colores al instante y te dice si pasa AA y AAA para texto normal, texto grande y componentes.
Colores reales sobre fondo blanco
Estos ratios están calculados con la fórmula de WCAG, sobre fondo blanco (#ffffff):
| Color del texto | Ratio | Texto normal (AA) |
|---|---|---|
| #000000 (negro) | 21:1 | Pasa |
| #595959 (gris oscuro) | 7,0:1 | Pasa (y AAA) |
| #666666 | 5,74:1 | Pasa |
| #767676 | 4,54:1 | Pasa por muy poco |
| #777777 | 4,48:1 | Suspende |
| #808080 | 3,95:1 | Suspende (sirve solo para texto grande) |
| #999999 | 2,85:1 | Suspende |
| #CCCCCC | 1,61:1 | Suspende con claridad |
La frontera de los grises sobre blanco está en #767676: un gris un solo escalón más claro (#777777) ya no cumple. Por eso el gris «de texto secundario» que se pone casi por instinto, #999999, no llega ni a 3:1.
Con colores de marca pasa lo mismo, y es donde más sorprende. El azul #1A73E8 sobre blanco da 4,51:1 y pasa por los pelos; el rojo #E53935 da 4,23:1 y no pasa; un verde azulado tan habitual como #0F9E8E da 3,33:1, que solo vale para texto grande o para iconos. Con el mismo color, un tono más oscuro como #0B7A6E sube a 5,22:1.
El texto sobre un color: botones y fondos de color
El contraste se mide entre el texto y el color de fondo que tiene justo detrás, así que un botón de color necesita su propia comprobación. Blanco sobre #0F9E8E tiene 3,33:1; es decir, un botón de ese color con letra blanca y tamaño normal no cumple AA. Blanco sobre rojo puro (#FF0000) da 4,0:1, y en cambio negro sobre ese mismo rojo da 5,25:1: a veces la solución no es oscurecer el fondo, sino cambiar el color del texto.
Los fondos con imágenes o degradados son más difíciles, porque el contraste cambia en cada punto. Lo seguro es poner una capa semitransparente oscura o clara entre la imagen y el texto, y comprobar el peor punto.
No solo el texto: iconos, bordes y estados
El criterio 1.4.11 (Contraste de elementos no textuales, nivel AA) pide al menos 3:1 frente a los colores adyacentes para los componentes de interfaz y los gráficos necesarios para entender el contenido. En la práctica: el borde de un campo de formulario, un icono sin texto, el estado «seleccionado» o «con foco» de un botón y las barras de un gráfico deben distinguirse del fondo con ese mínimo. Un campo con un borde gris muy clarito sobre blanco es un fallo muy común.
El contraste no lo es todo
- No dependas solo del color. Si distingues un error solo porque el texto es rojo, una persona con daltonismo puede no verlo. Añade un icono o un texto. La herramienta de simulador de daltonismo te enseña cómo se ve una imagen o una paleta con los tipos más habituales.
- Cuida el tamaño y el peso de la letra. Un texto fino de 12 píxeles necesita más contraste real que uno grueso de 20, aunque ambos pasen la métrica.
- Prueba con luz real. Una pantalla con mucho brillo ambiental, o con el brillo bajo, hace que contrastes justos dejen de leerse.
Si estás diseñando una paleta desde cero, el generador de paletas accesibles parte de los colores que eliges y propone combinaciones que ya cumplen el contraste.
¿Es obligatorio?
Depende de quién seas. En la Unión Europea, la Directiva 2016/2102 obliga a los sitios web y aplicaciones del sector público a ser accesibles, y para ello se remite a la norma EN 301 549, que incluye íntegramente el nivel AA de WCAG 2.1 para el contenido web. La Ley Europea de Accesibilidad (Directiva 2019/882) extiende exigencias de accesibilidad también a determinados productos y servicios del sector privado, con obligaciones aplicables desde el 28 de junio de 2025. Si tienes una duda legal sobre tu caso, consulta a un profesional: esta guía explica los criterios técnicos, no sustituye el asesoramiento jurídico.
El contraste también cuenta fuera de tu página: el favicon debe leerse en pestañas claras y oscuras, y la imagen que sale al compartir el enlace en las tarjetas de las redes.
Fuentes y más información
- W3C: WCAG 2.2, criterio 1.4.3 Contraste (mínimo)
- W3C: WCAG 2.2, criterio 1.4.6 Contraste (mejorado)
- W3C: WCAG 2.2, criterio 1.4.11 Contraste de elementos no textuales
- W3C WAI: políticas de accesibilidad en la Unión Europea
Datos comprobados el 3 de octubre de 2026.
Hazlo ahora, gratis y en tu navegador. Tus archivos no se suben.
Comprueba colores de texto y fondo según WCAG y obtén un arreglo que cumple.
Preguntas frecuentes
¿Qué contraste mínimo exige WCAG para el texto?
¿Qué se considera texto grande en WCAG?
¿Pasa el gris #999999 sobre fondo blanco?
¿Los bordes de un campo de formulario también necesitan contraste?
¿Hace falta contraste en un logotipo?
Guías relacionadas
Herramientas de esta guía
Funcionan en tu navegador: no se sube nada.