Cómo se calcula el contraste WCAG
WCAG 2.1 define el contraste como un ratio entre la luminancia relativa del texto
y la del fondo. La luminancia relativa de un color RGB se obtiene primero
linealizando cada canal (compensando la curva gamma sRGB) y luego ponderándolos:
0.2126·R + 0.7152·G + 0.0722·B. El verde pesa más porque el ojo
humano lo percibe como más luminoso.
El ratio final es (L1 + 0.05) / (L2 + 0.05), donde L1 es la
luminancia del color más claro y L2 la del más oscuro. Va de 1:1
(mismo color, ilegible) a 21:1 (negro puro sobre blanco puro).
Niveles WCAG explicados
- AA texto normal: 4.5:1 — el mínimo legal en muchas leyes (EAA en Europa, ADA en EE.UU. para sitios públicos).
- AA texto grande: 3:1 — texto desde 18pt regular o 14pt bold (≈ 24px / 18.6px en pantalla).
- AAA texto normal: 7:1 — el ideal. Requerido en gobierno y salud en muchos países.
- AAA texto grande: 4.5:1 — coincide con AA normal.
- Componentes UI: 3:1 — bordes de inputs, iconos, gráficos. Es una norma aparte (1.4.11).
Errores frecuentes
El más común: gris claro sobre blanco. #999999 sobre #FFFFFF
da 2.85:1 y falla incluso en texto grande AA. Si tu placeholder o
texto secundario está en #9CA3AF (gris-400 de Tailwind) sobre blanco,
falla. Usá #6B7280 (gris-500) o más oscuro.
El segundo: texto sobre imágenes. Una foto con luminosidad variable nunca garantiza
contraste consistente. Solución: overlay sólido rgba(0,0,0,0.5) entre
imagen y texto.
Por qué AAA no siempre es factible
Llegar a 7:1 con marca propia es difícil. Muchas marcas tienen colores corporativos que no superan AA. La salida pragmática: usar el color de marca solo en elementos no críticos (decoración, headers grandes), y para texto de cuerpo usar negro o gris muy oscuro contra fondo claro. Apple, Stripe y la mayoría de SaaS hacen esto.
Tres reglas de oro para diseño accesible
- Verificá texto pequeño primero. Si pasa AA, casi todo lo demás también pasa.
- No dependas solo del color para transmitir información. Errores en rojo + ícono. Status en verde + texto. Daltónicos te lo agradecen.
- Probá en pantalla real, no solo en monitor calibrado de diseñador. El brillo de un celular bajo sol cambia todo.