Vérificateur de contraste des couleurs
Saisissez ou choisissez la couleur du texte et celle de l’arrière-plan. Nous vous indiquons leur rapport de contraste et s’il respecte les niveaux AA et AAA des WCAG. Tout est calculé dans votre navigateur.
Cet outil nécessite JavaScript
Le calcul s’exécute dans votre navigateur avec JavaScript. En attendant, vous trouverez ci-dessous les valeurs minimales exigées par les WCAG.
Ce qu’exigent les WCAG
| Élément | Niveau AA | Niveau AAA |
|---|---|---|
| Texte normal | 4,5:1 (1.4.3) | 7:1 (1.4.6) |
| Grand texte | 3:1 (1.4.3) | 4,5:1 (1.4.6) |
| Composants d’interface et graphiques | 3:1 (1.4.11) | Pas de niveau AAA |
Le grand texte est un texte d’au moins 18 points (24 pixels CSS), ou d’au moins 14 points en gras (environ 18,66 pixels CSS).
Bon à savoir
- Le rapport va de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Il est calculé à partir de la luminance relative des deux couleurs.
- Il n’est pas arrondi : 4,49:1 n’atteint pas 4,5:1.
- Le contraste n’est pas exigé pour les logos, le texte décoratif ou les commandes désactivées.
- Le contraste ne suffit pas : l’information ne doit jamais reposer uniquement sur la couleur (critère de succès 1.4.1).
- Sur notre site, nous appliquons notre propre minimum de 7:1 pour le corps de texte, plus strict que le niveau AA des WCAG.
Commencer avec SiteNorma
Créez votre compte et commencez à améliorer l’accessibilité de votre site. Le plan Gratuit inclut 10 pages analysées par mois, sans carte bancaire.