Vérificateur de contraste des couleurs (WCAG, RGAA)
Saisissez la couleur du texte et celle du fond : le ratio de contraste et le verdict s'affichent pour le texte courant, le grand texte et les composants d'interface, aux niveaux AA et AAA.
Format hexadécimal, par exemple #1A1F2B
Format hexadécimal, par exemple #1A1F2B
Ratio de contraste
4,54:1
| Usage | AA | AAA |
|---|---|---|
| Texte courantmoins de 24 px, ou moins de 18,5 px en grasRGAA 3.2 · WCAG 1.4.3 / 1.4.6 | Conforme | Échec (min. 7:1) |
| Grand texte24 px et plus, ou 18,5 px et plus en grasRGAA 3.2 · WCAG 1.4.3 / 1.4.6 | Conforme | Conforme |
| Composants et graphiquesbordures de champs, icônes, états, courbesRGAA 3.3 · WCAG 1.4.11 | Conforme | — |
Les seuils à respecter
| Élément | AA (exigé) | AAA | Référence |
|---|---|---|---|
| Texte courant | 4,5:1 | 7:1 | RGAA 3.2 |
| Grand texte (24 px, ou 18,5 px en gras) | 3:1 | 4,5:1 | RGAA 3.2 |
| Composants d'interface et graphiques | 3:1 | — | RGAA 3.3 |
Le RGAA, comme la réglementation européenne, exige le niveau AA. Le niveau AAA est recommandé pour les textes longs ou les publics malvoyants, mais il n'est pas obligatoire.
Les erreurs les plus fréquentes
- Le gris clair sur fond blanc : très courant pour les textes secondaires, il échoue souvent sous 4,5:1.
- Le texte indicatif des champs (placeholder), souvent trop pâle.
- Le texte sur une photo : le contraste varie selon les zones de l'image ; ajoutez un voile ou un aplat.
- Les bordures de champs trop claires, qui ne délimitent plus la zone de saisie (3:1 minimum).
- Une information donnée seulement par la couleur : même bien contrastée, elle échappe aux personnes daltoniennes (RGAA 3.1).
Pour contrôler toutes les couleurs d'une page d'un coup, y compris le texte sur fond dégradé, lancez un audit Accessia ; le plugin Figma vérifie les contrastes dès la maquette, et l'extension Chrome simule les daltonismes sur votre site.
Questions fréquentes
Quel contraste minimum pour être conforme au RGAA ?
Au niveau AA exigé par le RGAA : 4,5:1 pour le texte courant, 3:1 pour le grand texte (24 px, ou 18,5 px en gras) et 3:1 pour les composants d'interface et les éléments graphiques porteurs d'information.
Comment se calcule le ratio de contraste ?
On calcule la luminance relative de chaque couleur, puis le rapport (L1 + 0,05) / (L2 + 0,05), où L1 est la plus claire. Le ratio va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc).
Peut-on arrondir un ratio de 4,49:1 à 4,5:1 ?
Non. Les WCAG demandent d'atteindre le seuil sans arrondi : 4,49:1 échoue au seuil de 4,5:1. Le vérificateur affiche donc le ratio tronqué, jamais arrondi au-dessus.
Le texte des logos et des éléments désactivés est-il concerné ?
Non. Les logos, le texte purement décoratif et les composants désactivés font partie des cas particuliers où l'exigence de contraste ne s'applique pas.