Cómo se calcula el ratio
Para cada color se calcula primero la luminancia relativa: los canales RGB se convierten a un espacio lineal (des-gamma sRGB) y se combinan con la sensibilidad del ojo, que pesa mucho más el verde. Después, el ratio compara la luminancia del color más claro con la del más oscuro.
Fórmula
ratio = (L1 + 0,05) ÷ (L2 + 0,05), con L1 ≥ L2
L1 y L2 son las luminancias relativas del color claro y del oscuro. El resultado va de 1 (mismo color) a 21 (negro sobre blanco).
Qué exigen los niveles WCAG
| Uso | Mínimo | Nivel |
|---|---|---|
| Texto normal (menos de 24 px) | 4,5 : 1 | AA |
| Texto normal (menos de 24 px) | 7 : 1 | AAA |
| Texto grande (24 px en adelante, o 19 px en negrita) | 3 : 1 | AA |
| Componentes de interfaz y elementos gráficos (botones, iconos, bordes de campos) | 3 : 1 | AA |
Referencias útiles: negro sobre blanco da 21 : 1; un gris #767676 sobre blanco roza el 4,5 exacto; un gris #9CA3AF se queda en 2,54 y no sirve para texto.
Consejos de accesibilidad
- El contraste es la condición mínima, no garantía: también importa el tamaño de fuente, el interlineado y la anchura de línea.
- No uses solo el color para transmitir información: añade texto, iconos o subrayado.
- Comprueba también los estados de los botones y enlaces (hover, visitado, desactivado), no solo el diseño base.
- Si no llegas al 4,5 : 1, oscurece el texto o aclara el fondo: pequeños ajustes en HSL suelen bastar.