Vérificateur de contraste de couleurs
Choisissez une couleur de texte et une couleur de fond : Plainpied calcule le rapport de contraste et indique s'il respecte les seuils WCAG 2.1 (AA et AAA). Tout se passe dans votre navigateur.
Vos couleurs
Code hexadécimal, par exemple #1C1B17 ou #abc.
Résultat
21:1
rapport de contraste
-
Texte normal
AA, seuil 4,5:1 à calculer -
Grand texte
AA, seuil 3:1 à calculer -
Texte normal
AAA, seuil 7:1 à calculer -
Grand texte
AAA, seuil 4,5:1 à calculer -
Éléments d'interface et graphiques
seuil 3:1 à calculer
Code hexadécimal invalide. Utilisez un format comme #1C1B17.
Qu'est-ce que le rapport de contraste ?
Le rapport de contraste mesure l'écart de luminosité entre deux couleurs. Il s'exprime de 1:1 (couleurs identiques, illisibles) à 21:1 (noir pur sur blanc pur). Plus le rapport est élevé, plus le texte se détache de son fond et reste lisible, y compris pour une personne malvoyante, daltonienne, âgée, ou simplement en plein soleil.
Les seuils imposés par les WCAG
| Cas | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant (moins de 24 px, ou 18,7 px en gras) | 4,5:1 | 7:1 |
| Grand texte (au moins 24 px, ou 18,7 px en gras) | 3:1 | 4,5:1 |
| Éléments d'interface, icônes, contours de champs | 3:1 | 3:1 |
Le niveau AA est l'exigence retenue par le RGAA et par l'European Accessibility Act. Le calcul suit la formule officielle des WCAG, fondée sur la luminance relative de chaque couleur.
Et le reste de votre site ?
Le contraste n'est qu'un critère parmi d'autres. Lancez un audit gratuit pour voir le score global d'une page, ou consultez la fiche dédiée aux contrastes insuffisants.
Lancer un audit gratuit