Test de contraste des couleurs : ratio WCAG, AA et AAA
Le ratio de contraste mesure la différence de luminance entre un texte et son fond, de 1:1 à 21:1. Les WCAG 2.1 (critère 1.4.3) et le RGAA 4.1 (critère 3.2) exigent au moins 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille au niveau AA ; le niveau AAA demande 7:1. Saisissez deux couleurs : le ratio, la conformité et une couleur corrigée s'affichent immédiatement.
Comment le ratio de contraste est-il calculé ?
Chaque composante sRGB (rouge, vert, bleu) est d'abord linéarisée : divisée par 255, puis, si elle dépasse 0,03928, transformée par ((c + 0,055) / 1,055)2,4, sinon divisée par 12,92. La luminance relative vaut 0,2126 × R + 0,7152 × V + 0,0722 × B. Le ratio est (L1 + 0,05) / (L2 + 0,05), L1 étant la plus claire des deux luminances. Ce calcul, défini par les WCAG 2.1, est celui qu'appliquent tous les outils d'audit, et celui de cette page.
Quels seuils selon l'usage ?
| Usage | AA | AAA | Critère WCAG |
|---|---|---|---|
| Texte normal (moins de 24 px, ou moins de 18,5 px en gras) | 4,5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Texte de grande taille | 3:1 | 4,5:1 | 1.4.3 / 1.4.6 |
| Composants d'interface (bordures de champs, icônes) et éléments graphiques porteurs d'information | 3:1 | — | 1.4.11 |
| Logos, textes décoratifs, composants inactifs | Exemptés | Exemptés | 1.4.3 |
Le contraste n'est qu'un des 106 critères du RGAA : pour les autres, suivez la checklist développeur ou la méthode d'audit rapide en 30 minutes, puis testez votre site complet avec le test d'accessibilité.
Questions fréquentes
Quel ratio de contraste faut-il pour être conforme ?
Au niveau AA des WCAG 2.1 (critère 1.4.3), repris par le RGAA 4.1 (critère 3.2) : 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille (24 px, ou 18,5 px en gras). Les composants d'interface et éléments graphiques porteurs d'information exigent 3:1 (critère 1.4.11). Le niveau AAA (1.4.6) demande 7:1 et 4,5:1.
Comment se calcule le ratio de contraste ?
Ratio = (L1 + 0,05) / (L2 + 0,05), L1 étant la luminance relative de la couleur la plus claire et L2 celle de la plus foncée, calculées à partir des composantes sRGB selon la formule des WCAG 2.1. Le résultat va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Le contraste s'applique-t-il aux logos et aux textes décoratifs ?
Non. Les WCAG exemptent les logos, les textes purement décoratifs et les composants inactifs. Tout texte porteur d'information, y compris les libellés de boutons et les textes sur image, est concerné.
Que faire si mes couleurs de marque ne passent pas ?
Conservez la couleur de marque pour les surfaces décoratives et utilisez une déclinaison plus foncée ou plus claire pour le texte, ou changez le fond. L'outil propose automatiquement la teinte la plus proche qui atteint 4,5:1.
Sources officielles
- W3C — WCAG 2.1, critères 1.4.3, 1.4.6 et 1.4.11
- W3C — WCAG 2.1, traduction française autorisée
- accessibilite.numerique.gouv.fr — RGAA 4.1, thématique 3 « Couleurs »
Faits vérifiés le 10 septembre 2026. Voir la méthodologie.