Ratios de contraste WCAG en el diseño de producto real — casos y trampas
Qué mide realmente una ratio de contraste
Una ratio de contraste WCAG compara la luminancia relativa de dos colores — el texto y su fondo — en una escala de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. La palabra clave es luminancia, no tono: el contraste trata de cuán claros u oscuros son los colores, no de cuán distintos parecen.
Por eso dos colores vivos y obviamente distintos pueden fallar igualmente. Un rojo medio y un verde medio pueden tener casi la misma luminancia, dando una ratio cercana a 1:1 — texto en uno sobre fondo del otro es casi ilegible, aunque sean 'colores distintos'. Contraste y colorido no son lo mismo.
Los umbrales, con precisión
El nivel AA de WCAG 2 exige 4.5:1 para texto normal y 3:1 para texto grande. Grande se define como al menos 24px (18pt), o 18.66px (14pt) en negrita — un tamaño de píxel menor solo cuenta como 'grande' si está en negrita. El nivel AAA sube esto a 7:1 normal y 4.5:1 grande.
Hay una regla aparte que la gente olvida: el criterio de éxito 1.4.11 (contraste no textual) exige 3:1 para componentes de interfaz y gráficos con significado — bordes de botón, contornos de campo, iconos, indicadores de foco — frente a sus colores adyacentes. Los controles deshabilitados quedan exentos de los mínimos de contraste, pero esa exención se abusa mucho para justificar estados inactivos difíciles de ver.
Dónde fallan los diseños reales
El fallo más común es texto gris claro sobre blanco en nombre de la 'elegancia'. Un gris medio como #999999 sobre blanco es solo de unos 2.8:1 — falla AA de plano. El texto de marcador de posición suele ser aún más claro y casi nunca pasa, y aun así los equipos meten instrucciones reales en él.
Los colores de marca son otra trampa: muchas paletas de marca de tono medio fallan AA para la etiqueta de un botón sobre un campo blanco, así que la etiqueta debe oscurecerse o el botón también. El texto sobre una imagen principal o un degradado es el caso más sutil — la ratio de contraste cambia píxel a píxel, así que un pie de foto puede pasar sobre la parte oscura y fallar sobre la clara. El modo oscuro también se olvida: un gris oscuro de bajo contraste sobre negro falla igual que su primo en modo claro.
Las trampas que un verificador no detecta
Un verificador de contraste compara dos colores planos, pero el texto real no es plano. Una ratio que pasa con un peso normal puede leerse mal en una fuente fina o de pelo, porque la matemática ignora el grosor del trazo — los glifos finos ponen menos tinta en pantalla de lo que la ratio implica. El texto pequeño con suavizado también baja el contraste en los bordes.
Dos trampas más: aplicar la exención de texto grande a texto que es negrita pero aún pequeño (debe cumplir el umbral de tamaño), y tratar una ratio que pasa como accesibilidad completa. El contraste (1.4.3) y no depender solo del color (1.4.1) son requisitos separados — un enlace que pasa contraste pero se distingue del texto solo por color sigue fallando. Prueba siempre el texto sobre imágenes y degradados en el píxel del peor caso, no en el promedio.
WCAG 2 hoy, APCA mañana
La ratio de WCAG 2 es útil pero imperfecta. Como no modela tamaño de fuente, peso ni cómo percibe realmente la visión humana claro-sobre-oscuro frente a oscuro-sobre-claro, puede ser demasiado estricta con algunas combinaciones de texto claro y demasiado laxa con algunas oscuras. Los diseñadores lo notan cuando una combinación 'se ve bien' pero falla, o 'se ve fina' pero pasa.
El reemplazo propuesto es APCA (Accessible Perceptual Contrast Algorithm), explorado para el futuro WCAG 3. APCA pondera tamaño, peso y polaridad de contraste, buscando ajustarse mejor a la percepción. Aún no es normativo — no puedes reclamar conformidad con él. La postura pragmática: entrega a WCAG 2 AA hoy, y vigila APCA para ver hacia dónde va el estándar.
Conclusiones
Memoriza dos números: 4.5:1 para texto de cuerpo, 3:1 para texto grande y componentes de interfaz. La mayoría de decisiones vuelven a esos.
No confíes en la 'elegancia' del gris sobre blanco — #999 sobre blanco falla AA; comprueba antes de entregar.
Prueba el texto sobre imágenes y degradados en el peor píxel, no en el promedio, porque la ratio varía por el área.
Una ratio que pasa con una fuente de pelo sigue fallando a lectores reales — considera peso y tamaño, no solo el número.
Contraste e independencia del color son requisitos separados — nunca uses el color como única señal. El verificador de contraste de color de este sitio calcula la ratio WCAG 2 y el resultado AA/AAA para cualquier par.