Contraste WCAG AA ou AAA : quel niveau viser ?
WCAG 2.2 définit deux niveaux de contraste pour le texte. AA est le niveau auquel renvoient la plupart des lois et politiques d’accessibilité ; AAA est un niveau renforcé pour les contenus qui doivent être lisibles par le plus grand nombre.
Les seuils en un coup d’œil
| Contenu | AA (minimum) | AAA (renforcé) |
|---|---|---|
| Texte normal | 4,5:1 | 7:1 |
| Grand texte (≥ 24 px, ou ≥ 18,66 px en gras) | 3:1 | 4,5:1 |
| Composants d’interface et graphiques (CS 1.4.11) | 3:1 | Pas de niveau AAA distinct |
Les critères relatifs au texte sont le CS 1.4.3 Contraste (minimum) pour AA et le CS 1.4.6 Contraste (amélioré) pour AAA. Les logos, le texte purement décoratif et les contrôles désactivés en sont exemptés.
Qu’est-ce qu’un « texte de grande taille » ?
WCAG définit le texte de grande taille comme au moins 18 points en graisse normale ou 14 points en gras. Sur le web, 1 pt = 1,333 px, soit environ 24 px en normal ou 18,66 px en gras. La plupart des textes courants (14–18 px) sont du texte normal et doivent respecter le seuil le plus strict.
Exemples
Cliquez sur un exemple pour l’ouvrir dans le vérificateur.
Quel niveau viser ?
- Visez AA partout. Les recommandations ADA aux États-Unis, la Section 508, la norme EN 301 549 et l’Acte européen sur l’accessibilité renvoient toutes au niveau AA de WCAG. Ne pas atteindre AA représente un vrai risque de non-conformité.
- Réservez AAA aux lectures longues. Articles, documentation, contenus publics ou médicaux gagnent à avoir un texte courant à 7:1, en particulier pour les lecteurs âgés et les personnes malvoyantes.
- N’imposez pas AAA sur tout le site. Le W3C lui-même indique que AAA ne peut pas être atteint pour tous les contenus. Considérez-le comme un objectif pour le texte principal, pas comme un frein aux couleurs de marque sur les grands titres.
- N’oubliez pas le contraste non textuel. Les bordures de champs, les indicateurs de focus et les icônes porteuses de sens doivent atteindre 3:1 par rapport aux couleurs adjacentes, même si votre texte est conforme.
Vérifiez vos couleurs
Collez votre palette dans le vérificateur de contraste ContrastCheck pour voir instantanément les résultats AA et AAA. Si une combinaison n’est pas conforme, il propose l’ajustement de luminosité conforme le plus proche.