1.4.6 Contraste (mejorado)
Criterio de éxito oficial
La presentación visual del texto y de las imágenes de texto tiene una relación de contraste de al menos 7:1, excepto para texto grande (4,5:1), texto incidental y logotipos.
¿Qué diferencia hay con el nivel AA?
El criterio 1.4.3 Contraste mínimo (AA) exige 4,5:1 para texto normal y 3:1 para texto grande. Este criterio 1.4.6 (AAA) eleva esos umbrales para cubrir a personas con visión baja más severa.
La razón del aumento: alguien con agudeza visual de 20/80 (sin corrección disponible) necesita aproximadamente el doble de contraste que una persona con visión normal para distinguir el texto con la misma facilidad.
Comparativa: nivel AA vs nivel AAA
Texto normal (menos de 18pt / 14pt negrita)
Texto normal (mismo umbral de tamaño)
Paletas que cumplen AAA
Combinaciones de color con ratio ≥ 7:1 sobre fondos comunes:
--color-dark (#003D6B) cumple AAA con 9,4:1. --color-primary (#005A9C) solo cumple AA con 4,7:1. Para contenido que requiera AAA, usar siempre el azul oscuro.
Simulación: contraste bajo vs alto con visión baja
Así percibe el texto una persona con visión baja moderada (aproximadamente 20/80 de agudeza visual):
El texto con contraste bajo resulta difícil de leer para personas con visión baja moderada o severa, especialmente en condiciones de poca luz.
Ratio: ~4,5:1El texto con contraste alto es mucho más legible para personas con visión baja, independientemente de las condiciones de iluminación.
Ratio: ≥7:1¿Por qué importa?
Aproximadamente el 3% de la población mundial tiene baja visión que no puede corregirse completamente con gafas. Para estas personas, el contraste AA puede ser insuficiente, especialmente en pantallas de menor calidad o con luz ambiental alta.
Además, alcanzar el nivel AAA en contraste beneficia a todas las personas: mejora la legibilidad en pantallas al sol, en condiciones de fatiga visual y en pantallas con brillo reducido.
¿Quién se ve afectado?
Baja visión severa
Agudeza visual de 20/80 o peor — necesitan mayor contraste para distinguir letras.
Daltonismo
La reducción de sensibilidad al color hace que el contraste luminoso sea aún más importante.
Luz solar directa
Cualquier usuario con pantalla al sol se beneficia del contraste más alto.
Envejecimiento visual
La sensibilidad al contraste disminuye con la edad; el nivel AAA compensa esta pérdida.
Cómo implementarlo
El proceso es el mismo que para 1.4.3, pero con umbrales más estrictos. Usa una herramienta de comprobación de contraste y apunta al ratio 7:1:
/* ✓ Combinaciones que cumplen AAA (≥ 7:1) */
color: #1A1A1A; /* sobre blanco: 16,8:1 ✓ AAA */
color: #003D6B; /* sobre blanco: 9,4:1 ✓ AAA */
color: #FFFFFF; /* sobre #003D6B: 9,4:1 ✓ AAA */
/* ✗ Combinaciones que solo cumplen AA */
color: #005A9C; /* sobre blanco: 4,7:1 — solo AA */
color: #C01427; /* sobre blanco: 5,8:1 — solo AA */Herramientas recomendadas
/* WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Colour Contrast Analyser (app escritorio): gratuita
axe DevTools: detecta fallos AA y puede mostrar ratios
Browser DevTools: Accessibility → Color contrast */Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
G17 | Suficiente | Asegurar que existe una relación de contraste de al menos 7:1 entre el texto y el fondo |
G18 | Suficiente | Asegurar que existe una relación de contraste de al menos 4,5:1 entre el texto grande y el fondo |
G148 | Suficiente | No especificar el color de fondo, no especificar el color del texto y no usar tecnología que cambie esos valores predeterminados |
G174 | Suficiente | Proporcionar un control con una relación de contraste suficiente que permita a los usuarios cambiar la presentación del texto y su fondo |