Contrastes et couleurs : les seuils, les cas limites, les outils
Cette page fait partie de L'accessibilité numérique.
Les seuils
| Élément | Ratio minimal |
|---|---|
| Texte courant | 4,5:1 |
| Texte de grande taille — à partir de 24 px, ou 18,5 px en gras | 3:1 |
| Composants d’interface et éléments graphiques porteurs d’information | 3:1 |
| Texte courant, niveau AAA | 7:1 |
Le ratio se calcule à partir de la luminance relative des deux couleurs. Il ne s’estime pas à l’œil : deux gris qui « paraissent » suffisamment différents peuvent être à 3,8:1.
Les cas que l’on rate le plus souvent
- Les libellés secondaires — dates, métadonnées, textes d’aide — en gris clair. C’est le défaut le plus répandu.
- Les états. Le contraste est vérifié au repos, et oublié au survol, au focus, à l’état désactivé ou en erreur.
- Le texte sur image. Le ratio change d’un pixel à l’autre. Il faut un fond opaque, un voile suffisant, ou un contour — pas un espoir.
- Les bordures de champ de formulaire, souvent trop pâles : ce sont des composants d’interface, donc 3:1.
- Les icônes porteuses d’information, soumises au même seuil de 3:1.
- Le thème sombre, dérivé du thème clair sans recalcul.
Les contrastes se dégradent par petites touches, au fil des évolutions de charte. Le seul moyen fiable est de calculer les ratios à chaque mise en ligne et de faire échouer le déploiement en cas de manquement.
C’est ce que fait ce site : 20 couples de couleurs, dans les deux thèmes, recalculés avant chaque déploiement. Le détail figure dans sa déclaration d’accessibilité.
L’autre règle : jamais la couleur seule
Indépendamment du contraste, une information ne doit jamais être portée par la seule couleur. Les cas typiques :
- les champs obligatoires signalés uniquement en rouge ;
- les liens dans un texte, distingués seulement par leur couleur — d’où le soulignement ;
- un statut « validé / en attente / refusé » codé par trois pastilles sans libellé ;
- une courbe dont les séries ne se distinguent que par leur teinte ;
- l’onglet actif marqué par une seule nuance.
La règle vaut pour les personnes daltoniennes, mais aussi pour l’impression en noir et blanc, les écrans en plein soleil et les modes de contraste élevé.
Le test rapide
Passez une capture de votre page en niveaux de gris. Tout ce qui devient indistinguable était porté par la couleur seule.