Critères en pratique
Contraste des couleurs RGAA : les ratios et les pièges
4.5:1, 3:1, texte large, composants d'interface : les seuils de contraste exigés par le RGAA, et les cas limites où même les designers expérimentés se trompent.
Les seuils à connaître
Le contraste des couleurs est le défaut le plus fréquemment relevé en audit — et l'un des plus faciles à corriger. Le RGAA reprend les seuils WCAG niveau AA :
- 4,5:1 pour le texte courant ;
- 3:1 pour le texte dit large : au moins 24 px, ou 18,5 px en gras ;
- 3:1 pour les composants d'interface et les informations véhiculées par un graphique.
Le ratio se calcule sur la luminance relative des deux couleurs, pas sur une impression visuelle.
Les pièges classiques
- le texte sur image : le ratio doit tenir sur la zone la plus claire de l'image, pas sur la moyenne ;
- le placeholder de champ de formulaire, presque toujours trop clair — et qui ne remplace jamais une étiquette ;
- l'état désactivé : exempté par WCAG, mais un bouton faussement désactivé reste un problème d'usage ;
- le focus visible : son indicateur doit lui-même contraster à 3:1 avec l'arrière-plan ;
- les dégradés et superpositions vidéo, où le ratio varie d'un point à l'autre.
> Le gris à la mode — Le #999999 sur fond blanc plafonne à 2,85:1. Il traverse presque toutes les chartes graphiques, et échoue au critère. Passer à #767676 suffit à atteindre 4,54:1 sans changer l'esprit du design.
Une correction à effet de levier
Le contraste se règle le plus souvent dans les variables de design system : quelques tokens corrigés propagent la conformité sur l'ensemble du site. C'est typiquement le genre de correction transverse à placer en première année d'un schéma pluriannuel.
Ce que l'automatisation apporte
Le contraste est mesurable : c'est l'un des critères qu'un moteur tranche de façon déterministe, sans jugement. Un audit outillé le relève exhaustivement, avec les couleurs exactes en cause — là où un contrôle manuel n'en échantillonne que quelques occurrences.
---
À lire aussi