Le RGAA exige un ratio de contraste minimum entre un texte et son fond. La règle dérive de la WCAG 2.1 AA : 4.5:1 pour le texte normal, 3:1 pour le texte de grande taille (au moins 24 px, ou 18,5 px en gras). Un texte gris clair sur fond blanc n'est pas un parti pris esthétique — c'est une non-conformité mesurable.
Les seuils, sans ambiguïté
- →Texte normal : ratio ≥ 4.5:1
- →Grand texte (≥ 24 px, ou ≥ 18,5 px gras) : ratio ≥ 3:1
- →Composants d'interface et éléments graphiques porteurs d'information (icônes, bordures de champ, focus) : ratio ≥ 3:1 — c'est le critère 3.2
Comment mesurer
- →Chrome DevTools : inspecter un texte, l'onglet "Accessibility" affiche le ratio et signale l'échec
- →WebAIM Contrast Checker (en ligne, gratuit) — pour tester deux couleurs à la main
- →Figma : plugins "Stark" ou "A11y - Color Contrast" pour vérifier dès la maquette
- →axe-core : détecte automatiquement les contrastes insuffisants sur une page entière
Exceptions officielles
Le critère ne s'applique pas aux logos, aux éléments purement décoratifs, et aux composants désactivés (`disabled`, exclu volontairement). Le texte incrusté dans une image purement illustrative n'est pas visé non plus — mais dès que ce texte porte une information, il l'est. Tout le reste, y compris les états `:hover` et `:focus`, doit respecter le ratio.
// Erreur design fréquente
Le gris #999 sur fond blanc atteint 2.85:1 — non conforme. Le gris-sur-blanc minimal acceptable est environ #767676 (4.54:1). Pour rester tranquille en e-commerce, n'utilisez pas de gris plus clair que #595959 pour tout texte de contenu.
Les zones qui échouent le plus en e-commerce
- 01Prix barrés et mentions "à partir de" en gris clair
- 02Badges promo : texte blanc sur fond jaune ou pastel (souvent sous 3:1)
- 03Texte en surimpression sur une photo de bannière (contraste variable selon le pixel)
- 04Placeholders de formulaire en gris très clair
- 05États désactivés de boutons que l'on croit exemptés alors qu'ils restent cliquables
⚠ Le texte sur image
Un texte blanc posé sur une photo passe le contraste à un endroit et échoue à un autre selon la zone de l'image. La parade : un voile semi-opaque sous le texte, ou un dégradé sombre, pour garantir le ratio quel que soit le visuel.
Questions fréquentes
Le contraste s’applique-t-il aux icônes ?
Oui, aux icônes porteuses d'information (panier, statut, alerte) via le critère 3.2 : ratio minimum 3:1 avec leur fond. Une icône purement décorative doublée d'un texte n'est pas concernée.
Et le mode sombre ?
Le ratio doit être respecté dans chaque thème proposé. Un mode sombre avec du gris moyen sur fond gris foncé échoue tout autant qu'un gris clair sur blanc. Testez les deux thèmes séparément.
AA ou AAA ?
Le RGAA et l'EAA visent le niveau AA (4.5:1). Le niveau AAA (7:1) est une cible de confort, non exigée. Inutile de vous y contraindre partout, mais c'est un bon objectif pour le corps de texte principal.
Une couleur de marque non conforme, on fait quoi ?
On garde la couleur de marque pour les aplats, les fonds et les éléments non textuels, et on fonce la teinte uniquement quand elle sert de texte. C'est le compromis le plus courant entre identité visuelle et conformité.
Détecter tous les contrastes insuffisants de votre site, page par page :
→ Lancer un audit