Vérificateur de contraste WCAG — ratio AA/AAA
Choisissez une couleur de texte et un fond pour voir le ratio WCAG et le résultat AA/AAA en texte normal et grand. Étapes : sélectionnez ou saisissez un HEX, cliquez Vérifier, lisez le ratio et les badges, inversez ou testez les suggestions. Exemple : #767676 sur #ffffff ≈ 4,54:1 — réussit AA en texte normal, échoue AAA en texte normal. Les couleurs restent dans le navigateur.
Fonctionnement
Définissez texte et fond avec le sélecteur ou en tapant un HEX. La page convertit le sRGB en luminance relative, calcule le ratio et affiche Réussi/Échec pour AA et AAA (texte normal et grand). Inversez la paire, copiez un résumé ou appliquez une suggestion si le contraste est trop faible.
Règles à connaître
Le contraste WCAG repose sur la luminance relative — pas seulement la teinte. Consultez ces règles si le ratio surprend.
- La luminance relative L vient des canaux sRGB après la courbe de linéarisation WCAG. Ratio = (Lclair + 0,05) / (Lfoncé + 0,05).
- Seuils : AA texte normal 4,5:1, AA texte grand 3:1, AAA texte normal 7:1, AAA texte grand 4,5:1. Un seul ratio alimente les quatre badges.
- Seuls les HEX sRGB opaques (#RGB ou #RRGGBB) sont pris en charge. HEX invalide → erreur ; premier plan et fond identiques → 1:1 et échec à tous les niveaux.
- Confidentialité : les couleurs sont traitées localement dans cet onglet — rien n'est envoyé au serveur.
Exemple
Chargez l'exemple : premier plan #767676 sur fond #ffffff donne environ 4,54:1. AA texte normal réussit (≥4,5:1), AA texte grand réussit (≥3:1), AAA texte normal échoue (≥7:1), AAA texte grand réussit (≥4,5:1). Inversez les couleurs pour voir le ratio changer.
Bonnes occasions
- UI : validez corps de texte et libellés sur le fond de marque avant livraison.
- Boutons et chips : vérifiez blanc sur couleur ou l'inverse pour AA normal ou grand.
- Mode sombre : inversez surfaces claires/foncées et confirmez que le texte secondaire reste à 4,5:1 ou 3:1 en grand.
Frequently asked questions
Quels sont les seuils de contraste WCAG ?
AA texte normal exige au moins 4,5:1 ; AA texte grand (18 pt regular ou 14 pt gras) 3:1 ; AAA texte normal 7:1 ; AAA texte grand 4,5:1. Cette page affiche les quatre badges d'un coup.
Qu'est-ce que le texte grand ?
Le texte grand tolère moins de contraste car il est plus lisible. WCAG le définit à ≥18 pt regular ou ≥14 pt gras. L'aperçu montre une ligne grande et une normale pour comparer.
Mes couleurs quittent-elles le navigateur ?
Non. Le calcul se fait entièrement dans le navigateur — vos valeurs de couleur ne sont pas envoyées.
Comment utiliser les suggestions de couleur ?
Sous 4,5:1, l'outil peut proposer un premier plan ou un fond plus clair ou plus foncé pour atteindre AA en texte normal. Ce sont des points de départ en mélangeant vers le blanc ou le noir, pas des palettes de marque finales.
Quel lien avec les tokens de marque ?
Utilisez cette page pour valider toute paire texte/fond. Pour une palette de marque avec tokens sémantiques, ouvrez l'outil de tokens couleur ; vous pouvez aussi prélever des couleurs sur une photo avec l'extracteur.
Related tools
Questions ou retours
Quelque chose n’est pas clair, cassé ou manquant ? Rédigez un message ci-dessous — nous lisons chaque note.