Test de contraste des couleurs (WCAG / RGAA)
Saisissez la couleur de votre texte et celle de son fond : l'outil calcule le ratio de contraste et vous indique aussitôt s'il respecte les seuils WCAG niveau AA et AAA. Le calcul se fait dans votre navigateur, rien n'est envoyé.
Exemple de texte sur ce fond
Aa — vérifiez la lisibilité avec vos couleurs.
Ratio de contraste9.74:1
Texte normal — AA (≥ 4,5:1)Conforme
Grand texte — AA (≥ 3:1)Conforme
Texte normal — AAA (≥ 7:1)Conforme
Grand texte — AAA (≥ 4,5:1)Conforme
Éléments d'interface / icônes (≥ 3:1)Conforme
Les seuils à retenir
- Texte normal : 4,5:1 (AA) — 7:1 (AAA)
- Grand texte (≥ 24 px, ou 18,7 px en gras) : 3:1 (AA) — 4,5:1 (AAA)
- Éléments d'interface et icônes informatives : 3:1
Le contraste n'est qu'un critère sur plus de cent
Cet outil vérifie une paire de couleurs. Mais la conformité RGAA repose sur l'ensemble du site : structure, alternatives, clavier, formulaires, médias. Pour savoir où en est réellement votre site, lancez un diagnostic complet gratuit, puis envisagez un audit humain pour la conformité.
Testez l’accessibilité de votre site, gratuitement
Au-delà du contraste : voyez tous les écarts d'accessibilité de votre site, gratuitement.
Lancer le diagnostic gratuitQuestions sur le contraste des couleurs
- Quel ratio de contraste faut-il pour le niveau AA ?
- Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AA est celui exigé par le RGAA et l'European Accessibility Act. Le niveau AAA, plus strict, demande 7:1 pour le texte normal.
- Qu'est-ce qu'un « grand texte » au sens des WCAG ?
- Un texte d'au moins 24 px (environ 18 pt), ou d'au moins 18,7 px (14 pt) s'il est en gras. Pour ces tailles, le seuil de contraste descend à 3:1 en niveau AA.
- Le respect du contraste suffit-il pour être conforme ?
- Non. Le contraste n'est qu'un critère parmi plus d'une centaine dans le RGAA. Un site peut avoir des contrastes parfaits et rester inaccessible (navigation clavier, alternatives, structure). Le contraste est nécessaire, pas suffisant.
- Les boutons et les icônes sont-ils concernés par le contraste ?
- Oui. Les composants d'interface et les éléments graphiques porteurs d'information doivent atteindre un contraste d'au moins 3:1 avec les couleurs adjacentes, pour rester perceptibles.
- Comment corriger un contraste insuffisant ?
- En assombrissant le texte ou en éclaircissant le fond (ou l'inverse) jusqu'à atteindre le ratio requis. Testez plusieurs variantes ci-dessus jusqu'à obtenir « Conforme » pour le niveau visé.