Vérificateur de Contraste des Couleurs
Vérifiez le ratio de contraste WCAG entre les couleurs de texte et d'arrière-plan.
Aperçu texte large
L'aperçu du texte normal ressemble à ceci.
à propos du Vérificateur de Contraste des Couleurs
Vérifiez si la combinaison de couleurs de votre texte et de votre arrière-plan respecte les exigences d'accessibilité de contraste WCAG 2.1. AA est la norme minimale recommandée ; AAA est la norme renforcée pour une meilleure lisibilité.
Qu'est-ce que cet outil ?
Vérifiez si une combinaison de couleurs de premier plan (texte) et d'arrière-plan respecte les normes d'accessibilité de contraste WCAG 2.1. Obtenez instantanément un ratio de contraste et des résultats de réussite/échec pour les niveaux de conformité AA et AAA.
Comment l'utiliser
- Choisissez ou saisissez une valeur hexadécimale pour la couleur de premier plan (texte).
- Choisissez ou saisissez une valeur hexadécimale pour la couleur d'arrière-plan.
- Consultez l'aperçu en direct et les résultats de réussite/échec pour chaque niveau WCAG.
Cas d'utilisation courants
- Vérifier que les choix de couleurs de texte et d'arrière-plan respectent les directives d'accessibilité avant de publier un design
- Choisir des combinaisons de couleurs lisibles pour les boutons, liens et texte principal
- Auditer un site web ou une application existante pour la conformité d'accessibilité
Astuces et conseils
- AA (4,5:1) est la norme minimale que la plupart des sites web devraient respecter pour le texte normal.
- Le texte large (18pt+, ou 14pt+ en gras) nécessite un ratio inférieur car il reste lisible avec un contraste plus faible.
Questions fréquentes
Quelle est la différence entre la conformité WCAG AA et AAA ?
AA est la norme minimale que la plupart des sites web devraient respecter, exigeant un ratio de contraste de 4,5:1 pour le texte normal. AAA est une norme plus stricte exigeant 7:1, destinée au contenu où la lisibilité maximale est critique.
Pourquoi le texte grand a-t-il un ratio de contraste requis inférieur ?
Le texte plus grand (18pt+ régulier, ou 14pt+ gras) est intrinsèquement plus facile à lire avec un contraste plus faible, donc WCAG fixe un ratio minimum réduit de 3:1 pour la conformité AA sur le texte grand par rapport à 4,5:1 pour le texte normal.
Comment le ratio de contraste est-il réellement calculé ?
Il est basé sur la luminance relative des deux couleurs, calculée selon la formule WCAG, et exprimé comme un ratio de 1:1 (pas de contraste, couleurs identiques) jusqu'à 21:1 (contraste maximal, noir sur blanc).
Que faire si ma combinaison de couleurs échoue le test de contraste ?
Essayez d'assombrir la couleur du texte, d'éclaircir l'arrière-plan, ou d'augmenter la taille du texte pour tomber sous le seuil du texte volumineux, qui a un ratio requis plus faible.
Les couleurs que je teste sont-elles envoyées quelque part ?
Non. Le ratio de contraste est calculé entièrement dans votre navigateur en utilisant les formules WCAG standard — aucune donnée de couleur n'est transmise ou stockée.
Vérifiez le ratio de contraste WCAG entre les couleurs de texte et d'arrière-plan. Vérifiez instantanément la conformité d'accessibilité AA/AAA, gratuitement et en ligne.