El bajo contraste es el problema de accesibilidad más común en la web. Dificulta la lectura a personas con baja visión, a cualquiera con una pantalla barata o bajo el sol, y a todos a medida que envejecemos. La buena noticia: también es el más fácil de medir y corregir.
Los números que necesitas
WCAG compara la luminancia relativa de dos colores y da un ratio entre 1:1 (sin contraste) y 21:1 (negro sobre blanco).
- AA, texto normal: al menos 4.5:1
- AA, texto grande (24px, o 18.66px en negrita): al menos 3:1
- AA, componentes de interfaz e iconos (bordes, anillos de foco, contornos de campos): al menos 3:1
- AAA, texto normal: 7:1 · AAA, texto grande: 4.5:1
AA es el nivel que citan la mayoría de las leyes y normas de contratación. Apunta a AA en todo y a AAA para la lectura larga.
Por qué “oscurecerlo” no es un plan
Oscurecer un color de marca hasta que pase suele convertir un morado vivo en uno apagado, y cada diseñador lo oscurece distinto. La corrección debe cambiar lo mínimo posible y ser repetible.
Una forma confiable de corregir una combinación
- Decide qué lado puede moverse. Normalmente se mueve el color del texto y el fondo (tu superficie de marca) se queda.
- Mantén el tono y la saturación y cambia solo la luminosidad. Así el color sigue siendo reconociblemente “tuyo”.
- Mueve la luminosidad lo mínimo necesario para alcanzar el ratio objetivo, en la dirección que aumenta el contraste.
- Revisa también los otros estados: hover, presionado y deshabilitado suelen olvidarse.
Trampas comunes
- El texto de ejemplo (placeholder) en los campos: es texto real y necesita 4.5:1 si transmite información (mejor: no uses placeholders como etiquetas).
- Texto sobre imágenes o degradados: revisa la zona más clara detrás del texto, o añade una capa oscura.
- Texto gris “secundario”: #999 sobre blanco da solo 2.85:1. #767676 es el gris más claro que pasa 4.5:1 sobre blanco.
- Estados hover que aclaran un botón detrás de texto blanco: el contraste baja justo cuando la persona interactúa.
El contraste es necesario, pero no suficiente
Pasar los ratios no ayuda a quien no distingue tu rojo de error de tu verde de éxito. Acompaña el color con texto o iconos, y revisa tu paleta también con un simulador de daltonismo.