El contraste entre el color del texto y el del fondo es uno de los factores que más influyen en la legibilidad de una web. Afecta a personas con baja visión, daltonismo o cataratas, pero también a cualquiera que lea el móvil a pleno sol. Las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C definen ratios de contraste medibles, de modo que la accesibilidad no depende de la opinión de nadie. En esta guía explicamos los niveles AA y AAA, cómo se calcula el ratio y cómo construir una paleta que cumpla.
Los ratios de las WCAG
| Elemento | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (≥ 24 px, o ≥ 18,66 px en negrita) | 3:1 | 4,5:1 |
| Componentes de interfaz (bordes de campos, iconos necesarios, foco) | 3:1 | — |
| Gráficos con información (líneas de una gráfica, iconos sin texto) | 3:1 | — |
El ratio va de 1:1 (mismo color) a 21:1 (negro sobre blanco). El nivel AA es el exigido habitualmente por la legislación y las auditorías; AAA es deseable para textos largos.
Exenciones: logotipos, texto decorativo, elementos deshabilitados y texto dentro de fotos sin función informativa.
Cómo se calcula
El ratio compara la luminancia relativa de los dos colores:
Ratio = (L1 + 0,05) / (L2 + 0,05)donde L1 es la luminancia del color más claro y L2 la del más oscuro. La luminancia se obtiene linealizando cada canal RGB (que viene en una escala corregida por gamma) y ponderándolo según la sensibilidad del ojo:
L = 0,2126 × R + 0,7152 × G + 0,0722 × BEl verde pesa mucho más que el azul: por eso el amarillo parece muy claro y el azul puro muy oscuro.
Ejemplos
| Texto | Fondo | Ratio | AA texto normal |
|---|---|---|---|
#000000 |
#FFFFFF |
21:1 | Cumple |
#767676 |
#FFFFFF |
4,54:1 | Cumple (justo) |
#777777 |
#FFFFFF |
4,48:1 | No cumple |
#FFFFFF |
#0066CC |
5,57:1 | Cumple |
#FFFFFF |
#FF6600 |
2,94:1 | No cumple |
El gris #767676 es el gris más claro que cumple AA sobre blanco: un tono más (#777777) ya no llega. Compruébalo con el comprobador de contraste.
HEX, RGB y HSL
El mismo color se puede escribir de varias formas:
| Formato | Ejemplo | Ventaja |
|---|---|---|
| HEX | #0066CC |
Compacto, el más usado en CSS y diseño |
| RGB | rgb(0, 102, 204) |
Valores de canal explícitos |
| HSL | hsl(210, 100%, 40%) |
Fácil de ajustar: tono, saturación, luminosidad |
HSL es útil para corregir el contraste: manteniendo el tono y la saturación, bajas o subes la luminosidad hasta cumplir el ratio. Pero ojo: la “L” de HSL no es la luminancia percibida; dos colores con la misma L en HSL pueden tener contrastes muy distintos. Usa el convertidor de colores para pasar de un formato a otro.
Crear una paleta accesible paso a paso
- Define el color de marca y comprueba su contraste con blanco y con negro.
- Si no llega a 4,5:1 con ninguno, crea variantes: una más oscura para texto y enlaces, y deja el original para fondos grandes o decoración.
- Genera una escala de 9–10 tonos (50 a 900) y anota qué combinaciones cumplen AA.
- Fija pares aprobados en tu sistema de diseño: “texto sobre primario-600”, “texto secundario gris-700 sobre blanco”, etc.
- Revisa los estados: hover, foco, error, deshabilitado.
- Comprueba el modo oscuro por separado: los pares no se invierten automáticamente.
El caso del naranja y el amarillo
Muchas marcas usan naranja o amarillo. El texto blanco sobre estos colores casi nunca cumple. Soluciones: texto negro o muy oscuro sobre el color de marca, u oscurecer el tono para botones con texto blanco.
No dependas solo del color
El criterio 1.4.1 de las WCAG exige que el color no sea el único medio para transmitir información:
- Los enlaces dentro de un párrafo deben subrayarse o distinguirse con algo más que el color.
- Los errores de formulario necesitan un icono o un texto, no solo un borde rojo.
- Las gráficas deben usar patrones, etiquetas o formas además del color.
Alrededor del 8 % de los hombres de ascendencia europea tiene algún tipo de daltonismo, sobre todo para distinguir rojo y verde.
Errores frecuentes
- Texto gris claro para “suavizar” el diseño (
#999sobre blanco: 2,85:1). - Texto sobre imágenes sin capa oscura o sombra.
- Placeholders como etiqueta: suelen tener poco contraste y desaparecen al escribir.
- Indicador de foco eliminado (
outline: none) sin alternativa visible. - Medir solo en el diseño: revisa en la web real, con fuentes y antialiasing reales.
Cómo auditar el contraste de una web
- Haz inventario de colores: texto principal, secundario, enlaces, botones, avisos, pie de página.
- Mide cada par texto/fondo con un comprobador y anota el ratio.
- Revisa estados interactivos: foco del teclado, hover y botones desactivados que deban leerse.
- Prueba con zoom al 200 % y en el móvil a plena luz.
- Usa las herramientas del navegador: el inspector de Chrome y Firefox muestra el ratio de contraste al seleccionar un texto, y Lighthouse lista los elementos que no cumplen.
- Documenta las correcciones en el sistema de diseño para que no vuelvan a aparecer.
Las WCAG 2.2 son la versión vigente de la recomendación del W3C. Se está desarrollando un nuevo método de contraste (APCA) para una futura versión, pero a día de hoy las auditorías y la normativa se basan en los ratios descritos en esta guía.
Contraste y SEO
Google no penaliza directamente el contraste bajo, pero sus herramientas como Lighthouse lo incluyen en la puntuación de accesibilidad, y un texto difícil de leer aumenta el abandono. Si estás revisando la calidad de tu web, la guía para acelerar una web y la de Core Web Vitals complementan esta revisión.