Vérifiez le ratio de contraste entre deux couleurs selon les niveaux d'accessibilité WCAG AA et AAA.
Comment utiliser l'outil Vérificateur de contraste
Choisissez une couleur de texte et une couleur de fond.
Lisez le ratio de contraste et les badges WCAG réussi ou échoué.
Ajustez les couleurs jusqu'à ce qu'elles passent le niveau requis.
Il s'agit d'un vérificateur de contraste de couleurs WCAG qui affiche le rapport de contraste exact entre une couleur de texte et une couleur d'arrière-plan, et indique s'il respecte les niveaux d'accessibilité AA et AAA. Choisissez les couleurs avec le nuancier ou par code hex et visualisez un aperçu en direct.
Ajustez les deux couleurs jusqu'à ce que les badges valident le niveau dont vous avez besoin. Le résultat se met à jour instantanément au fur et à mesure.
Un texte dont la clarté est trop proche de celle de son arrière-plan est difficile, voire impossible à lire, en particulier pour les personnes malvoyantes ou atteintes de déficiences de la vision des couleurs, ou pour quiconque consulte son téléphone en plein soleil. Un contraste suffisant garde votre contenu lisible pour tout le monde.
Les règles pour l'accessibilité des contenus web (WCAG) fixent la norme. Le niveau AA, celui que la plupart des sites visent et auquel de nombreuses lois sur l'accessibilité font référence, exige un rapport de 4,5:1 pour le texte normal et de 3:1 pour le grand texte. Le niveau AAA est plus strict, avec 7:1 et 4,5:1.
Le grand texte bénéficie d'un seuil plus bas, car des lettres plus grandes restent lisibles avec moins de contraste. Il est considéré comme grand à environ 24px (18pt), ou 18,66px (14pt) en gras.
Le rapport provient de la luminance relative des deux couleurs selon la formule officielle WCAG, produisant une valeur de 1:1 (aucun contraste, couleurs identiques) jusqu'à 21:1 (noir sur blanc).
Tout est calculé dans votre navigateur, donc c'est instantané et privé. Rien de ce que vous choisissez n'est envoyé où que ce soit.
Questions fréquentes
Le niveau WCAG AA exige 4.5:1 pour le texte normal et 3:1 pour le texte de grande taille (18pt ou 14pt en gras). Le niveau AAA exige respectivement 7:1 et 4.5:1.
Un texte d'au moins 24px (18pt), ou 18.66px (14pt) en gras. Le texte de grande taille bénéficie d'un rapport de contraste plus bas.
À partir de la luminance relative de chaque couleur selon la formule officielle WCAG, donnant une valeur de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Un contraste suffisant garde le texte lisible pour les personnes malvoyantes ou ayant des déficiences de la vision des couleurs, et pour tout le monde dans un mauvais éclairage. C'est un élément essentiel d'un site accessible et utilisable.
Les Web Content Accessibility Guidelines, la norme internationale pour rendre le contenu web accessible. Son niveau AA est largement référencé par les lois et les politiques d'accessibilité.
Intégrer cet outil
Ajoutez cet outil à votre propre site web. Copiez le code ci-dessous. Il reste à jour automatiquement.
<iframe src="https://monu.tools/embed/fr/color-contrast-checker" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>Outils similaires
Formatez et embellissez des requêtes SQL avec des sauts de ligne par clause et une casse cohérente des mots-clés, ou minifiez-les en une seule ligne.
Embellissez du XML avec une indentation correcte, ou minifiez-le en une seule ligne. Les commentaires, CDATA et instructions de traitement sont préservés.
Embellissez du CSS avec une indentation propre, ou minifiez-le pour réduire la taille du fichier. Gère les media queries, calc() et les commentaires de licence.
Embellissez du HTML avec une indentation adaptée aux blocs, ou minifiez-le. Le contenu de pre, textarea, script et style est préservé.