Couleurs & contraste RGAA : checklist
Le contraste est un des points qui “bloque” le plus facilement une page : overlays semi-transparents, textes sur images, états hover/focus, et typos trop petites. Cette checklist vous aide à corriger sans casser la charte graphique.
1) Comprendre ce que vous validez
En RGAA, les validations de contraste se basent sur la lisibilité : texte (couleur de police vs couleur de fond) et parfois éléments graphiques.
- Le contraste dépend du rendu réel (transparence, background dynamique, overlays).
- Les états comptent : focus visible, hover, active, disabled.
- Les tailles de police peuvent faire basculer la catégorie (texte normal vs “large”).
2) Causes fréquentes d’échec
- Texte placé sur une image (fond variable, parfois trop clair ou trop contrasté selon la zone).
- Fond semi-transparent avec arrière-plan “non maîtrisé”.
- Couleurs “tokens” cohérentes en design, mais qui ne respectent pas le rendu réel en production (opacity, blur, dégradés).
- Focus visible qui n’est pas suffisamment contrasté (ou masqué).
3) Corriger sans “casser le design”
Quelques stratégies pragmatiques :
- Utiliser des fonds “cibles” (ex : overlay sombre ou clair) plutôt que compter uniquement sur la couleur de texte.
- Prévoir des styles distincts pour les états : focus visible et hover ne sont pas toujours identiques au repos.
- Réduire les effets de transparence sur les zones où se trouve du texte critique.
- Augmenter légèrement la taille / graisse si c’est acceptable pour le design (pour atteindre une catégorie plus favorable).
4) Valider après correction
Corriger “sur une seule page” est un risque : les fonds peuvent changer. La validation doit couvrir vos cas fréquents : pages produit, formulaires, pages de contenu, modals.
- Revalider les pages représentatives.
- Vérifier la navigation au clavier (focus visible) après changement de styles.
- Contrôler les composants réutilisables (cards, banners, modals).
5) Checklist rapide
- Les textes sur image/overlay ont un contraste validé au rendu réel.
- Les couleurs de focus visible sont suffisamment contrastées.
- Les états (hover/active/disabled) sont testés.
- Les corrections sont appliquées aux composants récurrents.
- Un scan/contrôle visuel est fait après correction.
FAQ rapide
Pourquoi mon texte est “OK” en design mais pas en RGAA ?
Parce que le rendu réel peut changer : opacité, blur, arrière-plan dynamique, ou tailles de police et états. La vérification doit refléter la production.
La transparence casse-t-elle le contraste ?
Souvent oui : la couleur finale dépend de l’arrière-plan. Si l’arrière-plan varie, le contraste varie aussi.
Focus visible : quel est le point le plus courant ?
Le focus est présent mais trop discret (contraste insuffisant) ou masqué par des styles qui ne s’appliquent qu’au clavier.
Ensuite : reliez vos corrections de contraste à votre checklist avant publication.