Verificateur de contraste WCAG
Saisissez des couleurs de premier plan et d'arriere-plan pour voir instantanement le ratio de contraste et les resultats WCAG 2.2 AA/AAA, avec des suggestions, un historique et un lien partageable.
Entrez des couleurs ci-dessus pour voir l'apercu en direct.
Guide
Comment utiliser le verificateur de contraste
- 1 Saisissez une couleur de premier plan
Tapez une couleur dans le champ PP en HEX, RGB ou HSL. Vous pouvez aussi cliquer sur la pastille pour ouvrir le selecteur natif.
- 2 Saisissez une couleur d'arriere-plan
Tapez ou selectionnez une couleur d'arriere-plan dans le champ AP. Les valeurs alpha sont prises en charge.
- 3 Lisez le ratio de contraste
L'outil calcule instantanement le ratio WCAG 2.x et l'affiche a 2 decimales (ex. 4,52:1).
- 4 Consultez les badges AA et AAA
Quatre badges indiquent la reussite ou l'echec pour les niveaux WCAG 2.2 : AA Normal, AA Grand, AAA Normal et AAA Grand.
- 5 Utilisez l'apercu en direct
La carte d'apercu affiche du texte normal (16 px) et grand (24 px) pour visualiser votre combinaison de couleurs.
- 6 Appliquez une suggestion de couleur
Si la paire echoue AA Normal, la barre de suggestions propose jusqu'a 5 couleurs ajustees. Cliquez sur une pastille pour l'appliquer.
- 7 Partagez ou copiez le resultat
Cliquez sur "Partager le lien" pour copier un lien avec votre paire de couleurs, ou sur "Copier le resultat" pour copier le ratio et le statut WCAG.
- 8 Echangez ou reinitialises
Utilisez le bouton d'echange entre les deux champs, ou cliquez sur Reinitialiser pour effacer les deux champs et revenir a l'etat vide.
Reference
Seuils de contraste WCAG 2.2
| Niveau | Ratio minimum | Cas d'usage |
|---|---|---|
| AA Texte normal | 4,5:1 | Corps de texte, libelles, liens sous 18,67 px ou 14 px gras |
| AA Grand texte | 3:1 | Texte >= 18,67 px normal, ou >= 14 px gras |
| AAA Texte normal | 7:1 | Corps de texte ameliore pour malvoyants |
| AAA Grand texte | 4,5:1 | Grand texte ameliore |
Questions frequentes
Qu'est-ce que le ratio de contraste WCAG ?
Le ratio de contraste WCAG est un nombre de 1:1 (aucun contraste) a 21:1 (contraste maximum). Il est calcule a partir de la luminance relative des deux couleurs selon la formule sRGB IEC 61966-2-1 definie dans WCAG 2.x.
Quel est le ratio minimum pour WCAG AA ?
WCAG 2.2 Niveau AA exige un ratio d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.
Quelle est la difference entre AA et AAA ?
AA est le niveau de conformite standard. AAA est le niveau ameliore, qui exige 7:1 pour le texte normal et 4,5:1 pour le grand texte.
Comment l'alpha affecte-t-il le ratio de contraste ?
Les couleurs transparentes sont composees sur l'arriere-plan, puis sur du blanc opaque, conformement a la specification WCAG. Le ratio est calcule a partir des couleurs composees et opaques.
Quels formats de couleurs sont acceptes ?
L'outil accepte HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), RGB/RGBA et HSL/HSLA, avec des valeurs alpha de 0 a 1 ou de 0 % a 100 %.
L'outil envoie-t-il mes couleurs a un serveur ?
Non. Tous les calculs se font dans votre navigateur. Vos donnees de couleur ne sont jamais envoyees nulle part.
Pourquoi 4,50 peut-il echouer AA Normal ?
La specification WCAG compare le ratio non arrondi au seuil. Un ratio de 4,4996 s'affiche comme 4,50 mais echoue car la valeur brute est inferieure a 4,5.