BLOG · MÉTHODE
Contraste RGAA : les ratios de couleur que demande le référentiel
Par Théodis Guyon · Publié le · Lecture : 6 min
L’essentielLe RGAA demande un rapport de contraste d’au moins 4,5:1 entre un texte et son arrière-plan, et de 3:1 pour les grands textes, les composants d’interface et les éléments graphiques utiles. Il interdit aussi de donner une information par la couleur seule. Ces trois règles forment la thématique 3, Couleurs.
Que disent les critères 3.1, 3.2 et 3.3 ?
Ils couvrent trois sujets distincts. Voici leurs libellés officiels, dans la méthode du RGAA 4.1.2.
- Critère 3.1 : « Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? »
- Critère 3.2 : « Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ? »
- Critère 3.3 : « Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ? »
Le critère 3.2 renvoie au critère WCAG 1.4.3, et le critère 3.3 au critère WCAG 1.4.11. Tous deux sont de niveau AA. La place de ces critères dans l’ensemble du référentiel est décrite dans l’article sur les 106 critères du RGAA.
Quels ratios de contraste pour le texte ?
4,5:1 pour le texte courant, 3:1 pour le grand texte. Le seuil dépend de la taille du texte tel qu’il s’affiche, et de sa graisse.
| Texte | Taille restituée | Rapport minimal |
|---|---|---|
| Sans effet de graisse | Inférieure à 24px | 4,5:1 |
| En gras | Inférieure à 18,5px | 4,5:1 |
| Sans effet de graisse | 24px ou plus | 3:1 |
| En gras | 18,5px ou plus | 3:1 |
Ces seuils valent aussi pour le texte en image. Les WCAG expriment les mêmes tailles en points : 18 points, ou 14 points en gras. Le W3C indique qu’elles correspondent à environ 24px et 18,5px.
Chaque test prévoit une seconde voie : un mécanisme qui permet à l’utilisateur d’afficher le texte avec le bon rapport de contraste. Nous y revenons plus bas.
Et les boutons, les icônes, les graphiques ?
Ils relèvent du critère 3.3, avec un rapport de 3:1. Le test porte sur un composant d’interface dans ses différents états, face à la couleur d’arrière-plan contiguë. Un bouton dont on ne distingue pas le contour, ou une case à cocher redessinée en gris très pâle, échoue à ce critère.
Le critère vise aussi les éléments graphiques porteurs d’information, comme les courbes d’un graphique ou les zones d’une carte. Il ne s’applique pas à tout. La méthode liste des cas particuliers, notamment :
- un composant inactif, par exemple un bouton désactivé ;
- un composant dont l’apparence est celle du navigateur, sans modification par l’auteur ;
- un élément graphique qui fait partie d’un logo ;
- un élément dont la présentation est essentielle à l’information, comme un drapeau ou une photo.
Le focus est concerné. Le glossaire du RGAA précise que le repère de focus du navigateur ne doit pas être supprimé ou dégradé, sauf si le style de l’auteur est visible et suffisamment contrasté au regard du critère 3.3.
Qu’est-ce qu’une information donnée par la couleur seule ?
C’est une information que l’on perd si l’on ne perçoit pas les couleurs. Le critère 3.1 s’applique aux mots, aux images, aux styles et aux médias. Deux exemples courants :
- un calendrier de collecte des déchets où chaque type de collecte n’est indiqué que par une couleur ;
- un formulaire qui signale les champs obligatoires ou en erreur uniquement en rouge.
La correction consiste à doubler la couleur : un texte, un pictogramme, un motif ou un encadré. C’est aussi la consigne de la checklist PDF de DesignGouv, qui renvoie au critère 3.1.
Comment mesurer un contraste ?
On compare la luminance relative des deux couleurs. Le glossaire du RGAA donne la formule : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative la plus claire et L2 la plus sombre. En pratique, on utilise un outil qui fait le calcul.
- Relever les deux couleurs. Une pipette de couleur suffit. La checklist PDF de DesignGouv cite par exemple Colour Contrast Analyser pour la vérification, et Tanaguru Contrast Finder pour chercher une couleur voisine qui passe.
- Comparer au bon seuil. Mesurer la taille et la graisse du texte, puis lire le tableau ci-dessus.
- Tester chaque état. Un bouton se vérifie au repos, au survol et au focus.
- Sur une photo, viser la zone la moins favorable. L’arrière-plan change d’un point à l’autre. Nous mesurons là où le texte est le moins lisible.
Un outil automatique calcule bien un contraste entre un texte et une couleur de fond. Il ne juge pas si une couleur porte une information. Nous détaillons ces limites dans l’article sur l’audit automatique.
Un mode sombre ou un bouton « contraste renforcé » suffit-il ?
Le RGAA 4.1.2 ne parle pas de mode sombre. Il prévoit en revanche un « mécanisme qui permet d’afficher un rapport de contraste conforme ». Le glossaire fixe trois conditions :
- c’est un composant que l’utilisateur active pour changer l’apparence de la page ;
- ce composant respecte lui-même les critères 3.2 et 3.3, sans passer par le mécanisme ;
- il conserve à l’identique les contenus et les fonctionnalités.
Un thème sombre ou un bouton de contraste peut donc jouer ce rôle, s’il remplit ces conditions. Le bouton lui-même doit être bien contrasté. Et le test 3.2.5 vérifie que le contraste est suffisant dans le mécanisme.
Quelles erreurs voit-on sur les sites communaux ?
Un défaut de contraste qui vient de la charte graphique se répète sur toutes les pages. Quelques situations que l’on rencontre souvent :
- Le titre posé sur la photo d’accueil. Un texte blanc sur un ciel clair ou une façade claire. Un voile sombre ou un bandeau uni sous le texte permet d’atteindre le seuil.
- Les boutons pâles. Un bouton dans une couleur claire de la charte, avec un texte blanc. Ou un bouton « fantôme » au contour à peine visible.
- Le gris clair. Dates d’actualités, mentions de pied de page, aides sous les champs. Voir trois défauts fréquents des formulaires.
- Le focus effacé. Un contour de focus retiré, ou remplacé par une couleur trop proche du fond.
Chaque défaut relevé devient une fiche de correction. Le détail de l’offre est sur la page Prestations.
Questions fréquentes
Le logo de la commune doit-il respecter le contraste ?
Non. Le texte d’un logo ou d’un nom de marque fait partie des cas particuliers du critère 3.2. Les éléments graphiques d’un logo font aussi partie des cas particuliers du critère 3.3.
Un bouton désactivé doit-il être contrasté ?
Non. Un élément d’interface sur lequel aucune action n’est possible, comme un bouton désactivé, est un cas particulier des critères 3.2 et 3.3.
Le texte visible dans une photo est-il concerné ?
Non, s’il fait partie de la scène. Le glossaire du RGAA précise que les textes présents dans une image ou une vidéo, comme un écriteau ou une affiche, ne sont pas concernés. Le texte ajouté par-dessus la photo, lui, l’est.
Les PDF sont-ils concernés par le contraste ?
Oui. La checklist de DesignGouv pour produire un PDF accessible demande des couleurs contrastées, en renvoyant au critère 3.2. Voir l’article sur les PDF accessibles.
Le niveau AAA est-il demandé ?
Non. Les critères 3.2 et 3.3 correspondent à des critères WCAG de niveau AA. Le niveau AAA n’est pas exigé.
Sources
- DINUM, RGAA 4.1.2, critères et tests, thématique Couleurs (critères 3.1 à 3.3), consulté le 27/09/2026.
- DINUM, RGAA 4.1.2, glossaire : contraste, mécanisme qui permet d’afficher un rapport de contraste conforme, prise de focus, consulté le 27/09/2026.
- W3C, Understanding WCAG 2.1, critère 1.4.3 Contrast (Minimum), en anglais, consulté le 27/09/2026.
- DesignGouv, checklist : créer un PDF accessible à partir d’un traitement de texte, consultée le 27/09/2026.
À lire ensuite : PDF accessibles : ce que doit faire une mairie.