Qué es el contraste de color y por qué importa en accesibilidad web

1. Qué es el contraste de color

El contraste de color es la diferencia perceptual entre dos colores cuando se colocan uno junto al otro o uno sobre el otro. En el contexto del diseño web, el contraste más importante es el que existe entre el color del texto y el color del fondo sobre el que ese texto aparece.

Un contraste alto significa que los dos colores son muy diferentes en luminosidad, lo que hace que el texto sea fácil de distinguir del fondo. Un contraste bajo significa que ambos colores son parecidos en luminosidad, lo que dificulta la lectura, especialmente para personas con baja visión, daltonismo o en condiciones de luz adversas como pantallas bajo el sol.

El contraste no depende solo de la intensidad del color, sino de la luminosidad relativa de cada tono. Dos colores muy saturados y vivos pueden tener un contraste muy bajo entre sí si su luminosidad es similar. Por eso, un rojo sobre verde puede parecer visualmente impactante y aun así ser casi ilegible para personas con ciertos tipos de daltonismo.

2. Cómo se mide el contraste: el ratio de contraste

El contraste entre dos colores se expresa mediante un número llamado ratio de contraste, que puede ir de 1:1 (mismo color, ningún contraste) a 21:1 (negro sobre blanco, contraste máximo posible).

Para calcularlo se usa la luminosidad relativa de cada color, que es una medida de cuánta luz emite ese color en términos perceptuales para el ojo humano. La fórmula está definida por el W3C y tiene en cuenta que el ojo humano no percibe todos los colores con la misma sensibilidad: somos más sensibles al verde que al azul, por ejemplo.

No es necesario calcular esto a mano. El Test de contraste de Color;Code lo hace automáticamente: introduces el color del texto y el color del fondo y obtienes el ratio al instante, junto con una indicación de si superas los niveles mínimos recomendados.

3. Los niveles WCAG: qué contraste necesita tu web

Las WCAG (Web Content Accessibility Guidelines) son las pautas internacionales de accesibilidad web publicadas por el W3C. Definen tres niveles de conformidad (A, AA y AAA) y establecen requisitos mínimos de contraste para cada uno.

Los requisitos más relevantes para el trabajo habitual de diseño son los del nivel AA, que es el estándar de referencia en la mayoría de proyectos y el exigido por muchas legislaciones de accesibilidad:

• Texto normal (tamaños de fuente habituales, por debajo de 18pt o 14pt en negrita): ratio mínimo de 4,5:1.
• Texto grande (18pt o superior en peso normal, o 14pt o superior en negrita): ratio mínimo de 3:1.
• Componentes de interfaz y gráficos (bordes de campos de formulario, iconos informativos, elementos gráficos con significado): ratio mínimo de 3:1.

El nivel AAA eleva esos umbrales a 7:1 para texto normal y 4,5:1 para texto grande. Es el estándar más exigente y no siempre es posible cumplirlo con todas las combinaciones de color de una marca, pero es el objetivo recomendable para texto de cuerpo largo.

4. Qué elementos de tu web necesitan pasar el test de contraste

No todos los elementos visuales de una web tienen los mismos requisitos de contraste. Estos son los que conviene revisar siempre:

• Texto de cuerpo: el contenido principal de párrafos, artículos y descripciones. Es el que más afecta a la experiencia de lectura y donde el ratio de 4,5:1 es más crítico.
• Textos en botones: el texto que aparece sobre el color de fondo de un botón. Un botón visualmente llamativo puede tener un contraste insuficiente para su texto si el color de fondo y el del texto son demasiado parecidos en luminosidad.
• Texto sobre imágenes o degradados: uno de los casos más habituales de problemas de contraste. Cuando el fondo no es un color sólido, el contraste varía en distintas zonas y puede ser suficiente en unas partes e insuficiente en otras.
• Placeholders en formularios: los textos de ejemplo dentro de campos de formulario suelen tener un color más suave que el texto real, y a veces caen por debajo del mínimo recomendado.
• Iconos y gráficos con significado: si un icono comunica información importante (estado de un proceso, tipo de alerta, categoría de contenido), su color sobre el fondo debe cumplir el ratio de 3:1.

5. Errores de contraste más habituales en diseño web

Algunos patrones de diseño son especialmente propensos a generar problemas de contraste, aunque a primera vista no lo parezca:

• Texto gris claro sobre fondo blanco. El uso de grises suaves para texto secundario o de apoyo es estéticamente muy habitual, pero muchos de esos grises no alcanzan el ratio mínimo sobre fondo blanco. Un gris como #999999 sobre blanco tiene un ratio de apenas 2,85:1.
• Texto blanco sobre colores pastel. Los colores pastel son claros por definición, y el texto blanco sobre ellos rara vez cumple los mínimos. El texto oscuro es casi siempre la elección correcta sobre fondos claros.
• Colores de marca saturados como fondo de texto. Un verde o naranja vivo puede parecer de contraste alto, pero su luminosidad real puede estar en un rango medio que hace problemático tanto el texto blanco como el negro.
• Texto en color de marca sobre fondo de color de apoyo. Dos colores de la misma paleta pueden tener una luminosidad muy similar aunque sean visualmente distintos, lo que genera un contraste bajo que se detecta fácilmente con el test pero que puede pasar desapercibido en el proceso de diseño.

6. Cómo mejorar el contraste sin romper tu identidad visual

Cuando una combinación de colores no supera el test de contraste, no siempre es necesario abandonar los colores de marca. Hay varias estrategias para mejorar el contraste manteniendo la coherencia visual:

• Oscurecer ligeramente el color del texto o aclararlo si es texto claro sobre fondo oscuro. Pequeños ajustes de luminosidad, de 5 a 10 puntos en HSL, pueden ser suficientes para pasar del nivel A al AA sin cambiar el carácter del color.
• Aclarar u oscurecer el fondo en lugar de modificar el color del texto. Si el problema está en un bloque de color de marca, probar una versión más clara o más oscura del mismo tono puede resolver el contraste sin alterar la identidad.
• Usar texto negro o blanco puro sobre los colores de marca en lugar de texto de color. En la mayoría de casos, texto negro (#1a1a1a) o blanco (#ffffff) sobre un color de marca supera fácilmente los mínimos requeridos.
• Añadir un halo o sombra de texto cuando el texto va sobre imágenes o fondos variables. Un degradado oscuro bajo el texto, como el que usan las tarjetas hero de muchos sitios, es una solución habitual para garantizar legibilidad sin depender del color del fondo.

Usa el Test de contraste de Color;Code para probar cada ajuste al momento y ver en tiempo real si la nueva combinación supera los niveles WCAG.

Qué hacer ahora

Si no has comprobado el contraste de tu web todavía, un buen punto de partida es revisar las tres combinaciones más usadas: el texto de cuerpo sobre el fondo principal, el texto de los botones primarios y el texto sobre las secciones de color de tu diseño.

• Abre el Test de contraste e introduce cada combinación.
• Anota cuáles no superan el ratio de 4,5:1 para texto normal o 3:1 para texto grande.
• Ajusta los colores problemáticos siguiendo las estrategias de esta guía hasta que todos los elementos principales superen el nivel AA.

Una vez tengas el contraste resuelto, puedes dar un paso más y comprobar cómo se comporta tu paleta con daltonismo usando el Simulador de daltonismo. Sigue aprendiendo en las guías de Color;Code.