Fundamentos de contraste WCAG

Una UI legible no es gusto subjetivo — es contraste medible entre texto y su fondo.

Ratio de contraste

WCAG define el contraste como un ratio de 1:1 (idénticos) a 21:1 (negro sobre blanco). Más alto es más legible para más usuarios, incluida baja visión y brillo exterior intenso.

Las herramientas calculan la luminancia relativa de primer plano y fondo, luego aplican la fórmula estándar. No debes adivinar texto gris pequeño sobre tarjetas teñidas.

Objetivos AA vs AAA

Mínimos habituales para texto normal (menos de 18pt regular / 14pt bold):

Nivel	Ratio mínimo
WCAG AA	4.5:1
WCAG AAA	7:1

El texto grande tiene umbrales más bajos (3:1 para AA). Iconos y glifos decorativos pueden estar exentos, pero las etiquetas interactivas no.

Muchos equipos de producto publican AA por defecto; AAA para texto de cuerpo es ideal pero no siempre viable en fondos de marketing coloridos.

El fondo importa

Una etiqueta de botón azul debe pasar contraste contra el relleno del botón, no la página detrás del botón. Las superposiciones semitransparentes se componen con lo que haya debajo — comprueba el peor caso de fondo o foto.

Los colores de estado (success, warning, danger) suelen fallar emparejados con texto blanco en saturaciones claras. Oscurece el relleno o cambia a texto oscuro.

No confíes solo en el color

Los puntos de estado rojo/verde fallan para usuarios daltónicos. Combina color con iconos, etiquetas o patrones. Las herramientas de contraste no sustituyen codificación redundante.

Flujo de prueba

1. Elige tokens de primer plano y fondo de tu tema
2. Mide contraste en un conversor o plugin de diseño
3. Ajusta claridad antes que tono al corregir fallos — suele tener menos efectos secundarios
4. Vuelve a probar estados hover/focus; son pares separados

Conclusión clave

Publica pares de texto con ratios de contraste documentados. Corregir contraste tras el lanzamiento es costoso; integra comprobaciones en revisiones de tokens.