Contraste de Color: Directrices WCAG para diseño accesible

El contraste de color es uno de los requisitos de accesibilidad más frecuentemente violados en la web — y uno de los más fáciles de corregir. Un contraste deficiente entre el texto y su fondo hace el contenido ilegible para usuarios con baja visión, daltonismo o en condiciones de mucha luz. WCAG 2.1 define umbrales numéricos precisos para ratios de contraste aceptables.

Esta guía explica cómo se calculan los ratios de contraste, qué significan los niveles WCAG en la práctica, dónde el contraste falla más comúnmente en diseños reales y cómo corregir esos fallos sistemáticamente.

Qué es el ratio de contraste de color

El ratio de contraste de color es una medida numérica de la diferencia en luminancia percibida entre dos colores — típicamente texto y fondo. El ratio va de 1:1 (colores idénticos, sin contraste) a 21:1 (negro puro sobre blanco puro, contraste máximo). La fórmula compara la luminancia relativa del color más claro (L1) con el más oscuro (L2): contraste = (L1 + 0.05) / (L2 + 0.05). Un ratio de 4.5:1 significa que el color más claro es 4.5 veces más luminante que el más oscuro.

Niveles WCAG 2.1 (A/AA/AAA)

WCAG 2.1 define tres niveles de conformidad. El nivel A es el mínimo. El nivel AA es el estándar legal e industrial en la mayoría de países. El nivel AAA es el más alto. Para contraste de texto: el texto normal (menor de 18pt o 14pt negrita) requiere 4.5:1 para AA y 7:1 para AAA. El texto grande (18pt+ o 14pt+ negrita) requiere 3:1 para AA y 4.5:1 para AAA. Los componentes UI requieren 3:1 para AA.

Cómo calcular la luminancia

La luminancia relativa se calcula a partir de valores RGB linealizados. La fórmula tiene en cuenta la respuesta no lineal del ojo humano a la luz. Se aplican pesos perceptuales (rojo=0.2126, verde=0.7152, azul=0.0722). El canal verde contribuye más a la luminosidad percibida — por eso el verde puro (#00FF00) tiene mayor luminancia que el azul puro (#0000FF).

/* Cálculo de luminancia (JavaScript) */
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

Fallos de contraste comunes

Los fallos de contraste más frecuentes en diseños reales: texto gris claro sobre fondo blanco (el texto atenuado falla con ratios de ~2.5:1), colores de marca de saturación media usados como texto sobre blanco, enlaces de texto de color sin subrayado sobre fondos de color, estados deshabilitados con poca diferencia visual, elementos UI solo con icono con contraste insuficiente. Los diseños en modo oscuro suelen introducir nuevos fallos.

Corregir contraste en temas oscuro/claro

Al construir un sistema de diseño de doble tema, es esencial probar el contraste en ambos modos de forma independiente. El mismo par fondo-texto que supera AA en modo claro puede fallar en modo oscuro si simplemente se invierte el tono sin recalcular el contraste. El enfoque práctico: definir escalas de color separadas para cada tema. Para el color de marca primario, puede necesitarse un paso de luminosidad diferente para el modo oscuro.

Herramientas y automatización

La verificación manual en tiempo de diseño no es suficiente. Las herramientas de auditoría de accesibilidad automatizadas (axe, Lighthouse, Pa11y) pueden detectar fallos de contraste en tiempo de construcción o en pipelines CI. La herramienta Color Contrast de PixCode acepta dos colores cualesquiera y devuelve el ratio, el nivel WCAG y sugerencias de alternativas conformes.

Preguntas Frecuentes