Qu'est-ce que Verificateur de contraste CSS ?
Le rapport de contraste WCAG mesure la difference de luminance entre deux couleurs. Un rapport de 4,5:1 atteint le niveau AA pour le texte normal, et 7:1 atteint AAA. Ces seuils aident a garantir que les personnes malvoyantes, celles ayant une deficience de vision des couleurs, ou lisant sur un ecran dans un eclairage difficile puissent toujours lire le contenu. Cet outil calcule le rapport precis a partir des valeurs hexadécimales que vous saisissez et indique si la combinaison atteint le niveau necessaire, aidant les designers et developpeurs a verifier les combinaisons de couleurs avant publication.
Réponse rapide
Verifiez si deux combinaisons de couleurs respectent les normes de contraste WCAG avant publication. L'outil calcule le rapport precis et vous indique si le texte normal, le texte large et les composants d'interface passent les niveaux AA ou AAA.
Last updated: 2026-06-11
Limites
- Le selecteur de couleur ne retourne que des valeurs hexadécimales. Il ne prend pas en charge les entrees RVB, TSL ou les couleurs nommees directement.
- L'outil verifie les paires de couleurs unies. Il n'evalue pas le contraste sur du texte en degrade, du texte avec ombre portee ou des images d'arriere-plan ou la luminance varie selon l'element.
- Les rapports de contraste sont calcules a partir des couleurs que vous saisissez. Si l'une des couleurs est transparente, le resultat ne reflete pas le contraste visible reel par rapport au fond de la page sous-jacent.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Saisissez la couleur de premier plan en utilisant un code hex, une valeur RVB ou un selecteur de couleur.
- Saisissez la couleur d'arriere-plan de la meme maniere.
- Lisez le resultat du rapport de contraste et les indicateurs de reussite/echec WCAG AA et AAA pour le texte normal et le texte large.
- Ajustez l'une ou l'autre couleur jusqu'a ce que le rapport atteigne votre niveau d'accessibilite cible.
A quoi il sert
- Verifier si le texte du corps sur un fond clair respecte les normes de lisibilite WCAG AA.
- Valider les combinaisons de couleurs de marque sur les boutons, badges et composants d'interface.
- Preparer des specifications de conception accessibles avant de les transmettre au developpement.