Contraste des couleurs : les ratios WCAG et RGAA à respecter
Un texte gris clair sur fond blanc est l’erreur d’accessibilité la plus répandue sur le web. Elle gêne les personnes malvoyantes, mais aussi tout le monde en plein soleil sur un téléphone. Voici les ratios à respecter, comment ils se calculent et comment corriger sans refaire une charte graphique.
Les ratios à respecter
| Élément | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant | 4,5:1 | 7:1 |
| Grand texte : 24 px, ou 18,5 px en gras | 3:1 | 4,5:1 |
| Composants d’interface et graphiques : bordure de champ, icône, focus | 3:1 | — |
Le RGAA reprend ces seuils dans ses critères 3.2 (texte) et 3.3 (composants et éléments graphiques). Les logos, les textes purement décoratifs et les composants désactivés n’ont pas de seuil.
Comment se calcule le ratio
Le ratio compare la luminance relative des deux couleurs : (L1 + 0,05) / (L2 + 0,05), où L1 est la plus claire. Il va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc).
- #999999 sur blanc : 2,85:1, insuffisant pour du texte.
- #767676 sur blanc : 4,54:1, le gris le plus clair qui passe pour du texte courant.
- #595959 sur blanc : 7:1, le niveau AAA.
Les pièges fréquents
- Le texte d’exemple (placeholder) des champs, souvent gris très clair : c’est du texte, il doit atteindre 4,5:1.
- Le texte posé sur une photo ou une vidéo : le contraste varie d’un endroit à l’autre.
- Les états survol et focus : un bouton peut passer au repos et échouer au survol.
- La bordure des champs de formulaire, trop pâle pour qu’on repère le champ.
- Le mode sombre, testé moins souvent que le mode clair.
- L’information donnée par la couleur seule : un champ en erreur seulement rougi, un lien seulement coloré.
Corriger sans casser la charte
- Assombrir légèrement la couleur du texte : quelques points de luminosité suffisent souvent.
- Garder la couleur de marque pour les grands titres et les aplats, et une variante plus foncée pour le texte.
- Poser un voile sombre ou un fond uni sous le texte qui passe sur une image.
- Définir les couleurs une seule fois, en variables CSS, pour corriger tout le site d’un coup.
- Ajouter un soulignement ou une icône là où la couleur portait seule l’information.
Vérifier les contrastes d’un site
Un test automatique mesure le contraste de chaque texte de la page, sur ordinateur et sur mobile, et liste les éléments en échec avec leurs couleurs. Les cas ambigus, comme un texte sur une image ou un dégradé, demandent un contrôle à l’œil.
Questions fréquentes
- Le texte d’exemple d’un champ doit-il être contrasté ?
- Oui. C’est du texte affiché : il doit atteindre 4,5:1. Mieux vaut d’ailleurs ne pas s’en servir comme seule étiquette.
- Les logos sont-ils concernés ?
- Non. Les logos et les textes qui font partie d’une marque n’ont pas de seuil de contraste.
- Quel contraste pour l’indicateur de focus ?
- Au moins 3:1 avec les couleurs qui l’entourent, comme tout composant d’interface.
- Un contraste suffisant rend-il un site accessible ?
- Non. C’est un critère parmi 106 dans le RGAA, mais il touche presque tous les sites et se corrige vite.
Testez une page de votre site
Pour aller plus loin
- Vérificateur de contrasteLe ratio de deux couleurs et la plus proche qui passe.
- Tester l’accessibilité d’une pageTest gratuit sur ordinateur et mobile, sans compte.
- Test d’accessibilité automatique : ce qu’il détecte, ce qu’il ne voit pasCe qu’un robot trouve, ce qu’il rate et les vérifications à faire à la main.
- RGAA et WCAG : quelle différence ?Les WCAG fixent les règles, le RGAA donne la méthode française pour les vérifier.