Contraste de color y paletas accesibles

Qué mide realmente la relación

Una relación de contraste compara la luminancia relativa de dos colores —a grandes rasgos, cuánta luz emite cada uno— en una escala que va de 1:1 para colores idénticos a 21:1 para negro sobre blanco. La luminancia no es el promedio de los canales: el verde aporta mucho más que el rojo, y el rojo mucho más que el azul, porque la visión humana es más sensible en el centro del espectro. Esa ponderación explica que un texto amarillo brillante sobre blanco falle estrepitosamente mientras el mismo amarillo sobre negro aprueba sin esfuerzo.

La consecuencia es que el tono apenas importa y la luminosidad domina. Dos tonos vivos y evidentemente distintos con la misma luminosidad casi no tienen contraste según esta medida, que es justo el caso en que los diseñadores más se sorprenden ante una puntuación insuficiente. Si una combinación falla, cambiar la luminosidad la arreglará; cambiar el tono normalmente no.

Los umbrales y cuál se aplica

Las WCAG piden 4,5:1 para texto normal y 3:1 para texto grande, donde grande significa unos 24px, o 19px en negrita. Ese es el nivel AA; el nivel AAA los eleva a 7:1 y 4,5:1. La concesión para texto grande existe porque los trazos más gruesos cubren más píxeles y siguen siendo legibles con menos contraste: es una concesión al grosor de la letra, no un resquicio.

Los elementos no textuales tienen su propia regla, que se olvida con frecuencia: los componentes de interfaz y los gráficos con significado necesitan 3:1 respecto a lo que tienen al lado. Eso cubre el borde de un campo, el anillo de foco, la barra de un gráfico, un icono que porta significado por sí mismo. Los infractores habituales son el texto de marcador de posición y los controles deshabilitados, a menudo muy por debajo de cualquier umbral con el argumento de que se ven tenues a propósito.

Aprobar la relación no es lo mismo que ser legible

La relación no sabe nada de tipografía. Los mismos colores a 4,6:1 resultan cómodos en un cuerpo de 16px con peso normal y penosos en 12px con peso ligero, porque los trazos finos cubren menos píxeles y pierden más con el suavizado. Cumplir el umbral es un suelo, no un objetivo, y el texto de lectura suele querer superarlo con margen.

Tampoco sabe qué hay detrás de tu texto. Un texto sobre una fotografía, un degradado o un vídeo tiene un contraste distinto en cada zona, y el número calculado contra un píxel muestreado no dice nada del resto. Esos casos necesitan una capa de atenuación, un panel sólido o una sombra: algo que garantice un fondo conocido en lugar de confiar en tenerlo.

El daltonismo cambia qué pares funcionan

Alrededor de uno de cada doce hombres tiene alguna deficiencia en la visión del color, sobre todo dificultad para separar el rojo del verde. Las relaciones de contraste resisten esto razonablemente bien, ya que las gobierna la luminosidad, pero cualquier información transportada solo por el tono no. Un punto de estado rojo frente a verde, un gráfico cuya única leyenda es el color, un enlace que se distingue del texto solo por el color y sin subrayado: cada uno es invisible para una porción considerable de lectores.

La regla que se deriva es simple: nunca dejes que el color sea el único canal. Añade una forma, un icono, una etiqueta, un patrón o una diferencia de luminosidad. Revisar un diseño con una simulación de las deficiencias comunes es rápido y suele detectar precisamente los gráficos e indicadores de estado que los verificadores automáticos aprueban sin rechistar.

Construir una paleta que aguante

El enfoque más fiable es diseñar por escalones de luminosidad en vez de elegir colores uno a uno. Fija una escalera de valores de luminosidad, genera cada tono en cada escalón y las combinaciones se vuelven predecibles: dos escalones suficientemente separados aprobarán, sea cual sea el tono. Los espacios de color perceptuales facilitan esto mucho más que HSL, cuya luminosidad no es perceptualmente uniforme: dos colores HSL con el mismo valor pueden verse muy distintos en brillo.

Una lista de comprobación práctica:

• Texto normal 4,5:1, texto grande 3:1, bordes de interfaz e iconos con significado 3:1.
• Arregla los fallos cambiando la luminosidad, no el tono.
• Revisa los estados de marcador de posición, deshabilitado y foco: son los que más fallan.
• Nunca codifiques información solo con el tono; añade forma, etiqueta o luminosidad.
• Prueba ambos temas: una paleta que aprueba en modo claro puede fallar invertida.