L'outil applique la formule de luminance relative officielle du WCAG, ce qui garantit des résultats identiques au vérificateur WebAIM et aux audits d'accessibilité courants. Tout se passe dans votre navigateur : les couleurs ne sont jamais envoyées sur un serveur, et il n'y a aucune limite d'utilisation.
Vérificateur de contraste des couleurs
Fonctionne entièrement dans votre navigateur : aucun envoi, aucune inscription.
Ratio de contraste
Réussinécessite 4.5:1
Réussinécessite 3:1
Échouénécessite 7:1
Réussinécessite 4.5:1
Grand = 18 pt (24 px), ou 14 pt (18,66 px) en gras.
À quoi sert un vérificateur de contraste des couleurs ?
Un vérificateur de contraste des couleurs mesure le ratio de contraste entre la couleur d'un texte et son fond, puis indique si celui-ci respecte les critères d'accessibilité WCAG. Il renvoie un ratio de 1:1 à 21:1 et affiche un résultat pass ou fail pour les niveaux AA et AAA, en texte normal et en grand texte.
Comment l’utiliser
- 1Saisissez vos couleurs. Entrez un code hex, une valeur rgb() ou un nom de couleur CSS pour le texte et le fond, ou sélectionnez-les avec les sélecteurs de couleur.
- 2Lisez le ratio. Le ratio de contraste se met à jour en temps réel, avec un aperçu du texte sur son fond.
- 3Consultez les badges. Chaque badge indique pass ou fail pour les niveaux AA et AAA du WCAG, en texte normal et en grand texte.
Pour qui
- Designers qui testent les couleurs de la charte graphique avant le développement.
- Développeurs front-end qui vérifient les couleurs des boutons, liens et étiquettes par rapport au niveau AA du WCAG.
- Auditeurs d'accessibilité qui documentent les échecs de contraste avec les ratios exacts.
- Équipes contenu et e-mail qui s'assurent que le texte reste lisible sur les fonds colorés.
Questions fréquentes
Le vérificateur de contraste des couleurs est-il gratuit ?
Oui - entièrement gratuit, sans inscription et sans limite. Il fonctionne directement dans votre navigateur.
Quel ratio de contraste faut-il pour le niveau AA du WCAG ?
Le niveau AA du WCAG 2.1 exige un ratio d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA porte ces exigences à 7:1 pour le texte normal et 4,5:1 pour le grand texte.
Qu'est-ce que le grand texte ?
Le grand texte correspond à au moins 18 pt (environ 24 px) en graisse normale, ou 14 pt (environ 18,66 px) en gras. Un ratio de contraste moins élevé est accepté car les glyphes plus grands sont plus faciles à lire.
Comment le ratio de contraste est-il calculé ?
La formule est (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont les luminances relatives de la couleur la plus claire et de la plus foncée. La luminance est calculée à partir des canaux rouge, vert et bleu en sRGB selon la définition du WCAG 2.x.
L'outil prend-il en charge le hex, le RGB et les noms de couleur ?
Oui. Vous pouvez entrer du hex à 3, 4, 6 ou 8 chiffres, des valeurs rgb() et rgba(), ou tout nom de couleur CSS comme « teal ». Le sélecteur de couleur natif est également disponible.
Pourquoi le même ratio passe-t-il parfois et échoue-t-il d'autres fois ?
Le ratio requis dépend de la taille du texte et du niveau ciblé. Un ratio de 3,5:1 échoue au niveau AA pour le texte normal, mais passe pour le grand texte - vérifiez toujours en fonction de la taille et du niveau réellement utilisés.