Contraste WCAG AA vs AAA: ¿qué nivel deberías buscar?
WCAG 2.2 define dos niveles de contraste para el texto. AA es el nivel al que remiten la mayoría de leyes y políticas de accesibilidad; AAA es un nivel reforzado para contenidos que deben poder leer el mayor número posible de personas.
Los umbrales de un vistazo
| Contenido | AA (mínimo) | AAA (mejorado) |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (≥ 24 px, o ≥ 18,66 px en negrita) | 3:1 | 4,5:1 |
| Componentes de interfaz y gráficos (CC 1.4.11) | 3:1 | Sin nivel AAA específico |
Los criterios de texto son el CC 1.4.3 Contraste (mínimo) para AA y el CC 1.4.6 Contraste (mejorado) para AAA. Los logotipos, el texto puramente decorativo y los controles deshabilitados están exentos.
¿Qué se considera «texto grande»?
WCAG define el texto grande como al menos 18 puntos con peso normal o 14 puntos en negrita. En la web, 1 pt = 1,333 px, así que equivale aproximadamente a 24 px normal o 18,66 px en negrita. La mayor parte del texto de cuerpo (14–18 px) es texto normal y necesita el umbral más exigente.
Ejemplos
Haz clic en cualquier ejemplo para abrirlo en el comprobador.
¿Qué nivel deberías buscar?
- Apunta a AA en todo el sitio. Las directrices de la ADA en EE. UU., la Sección 508, la norma EN 301 549 y la Ley Europea de Accesibilidad remiten al nivel AA de WCAG. No cumplir AA supone un riesgo real de incumplimiento normativo.
- Usa AAA para la lectura extensa. Artículos, documentación y contenidos de administraciones públicas o sanitarios se benefician de un texto de cuerpo a 7:1, sobre todo para lectores mayores y personas con baja visión.
- No exijas AAA en todo el sitio. El propio W3C advierte que no es posible cumplir AAA en todos los contenidos. Tómalo como objetivo para el texto principal, no como un obstáculo para usar los colores de marca en títulos grandes.
- No olvides el contraste no textual. Los bordes de los campos, los indicadores de foco y los iconos que transmiten significado necesitan 3:1 frente a los colores adyacentes, aunque tu texto cumpla.
Comprueba tus colores
Pega tu paleta en el comprobador de contraste de color ContrastCheck para ver al instante los resultados AA y AAA. Si una combinación se queda corta, te sugiere el ajuste de luminosidad más cercano que cumple.