Cómo se usa
- Introduce el color del texto y el del fondo, como códigos HEX o con los selectores.
- Lee la relación y la tabla de cumple / no cumple. La vista previa muestra los dos tamaños de texto.
- Usa Intercambiar colores para comprobar la combinación inversa, como texto claro sobre fondo oscuro.
La fórmula
WCAG 2 define la luminancia relativa como L = 0,2126 R + 0,7152 G + 0,0722 B, donde cada canal se pasa antes de sRGB a luz lineal. La relación de contraste es (L1 + 0,05) / (L2 + 0,05), con L1 el color más claro. Negro sobre blanco da 21:1 y dos colores iguales, 1:1.
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Los elementos de interfaz y los gráficos con significado necesitan 3:1 para AA.
Ejemplo
Gris #777777 sobre blanco: la luminancia del gris es de unos 0,184, así que la relación es 1,05 / 0,234 = 4,48. Cumple para texto grande, pero no cumple AA para texto normal. Con #767676 la relación sube a 4,54 : 1 y ya cumple AA.
Consejos
- El contraste no es la única necesidad de accesibilidad: no transmitas información solo con el color.
- El texto sobre imágenes o degradados hay que comprobarlo en su punto más desfavorable.
- El contraste de WCAG 2 es una medida simple, con puntos débiles en modo oscuro y con fuentes finas; tómalo como un mínimo.