WCAG Contrast Checker
Understand WCAG Contrast Checker
Calcule le rapport de contraste entre une couleur de texte et une couleur de fond, et indique s'il satisfait WCAG AA et AAA.
How it works
Chaque couleur est d'abord convertie en luminance relative. Les trois canaux sont normalisés entre 0 et 1 puis linéarisés — divisés par 12.92 en dessous du seuil de 0.03928, sinon élevés selon ((c + 0.055) / 1.055)^2.4 — puis pondérés à 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu, parce que l'œil est bien plus sensible au vert qu'au bleu. Le rapport vaut (L_clair + 0.05) / (L_sombre + 0.05), ce qui va de 1:1 pour deux couleurs identiques jusqu'à 21:1 pour du noir sur blanc. Le terme 0.05 représente le voile lumineux ambiant de l'écran, et c'est lui qui empêche la formule de diviser par zéro sur du noir pur.
When to use it
- Vérifier le corps de texte sur son fond avant de figer une couleur de système de design
- Trouver le gris le plus foncé qui passe encore sur du blanc — #767676 vaut environ 4.54:1, et une nuance plus claire échoue au niveau AA
- Auditer les textes indicatifs, les états désactivés et les textes d'aide, là où les échecs de contraste se cachent le plus souvent
- Fournir des preuves pour un audit d'accessibilité au titre de WCAG 2.1, d'EN 301 549 ou de la Section 508
Watch out for
- Le seuil dépend du texte, pas de la couleur. Le niveau AA exige 4.5:1 pour le corps de texte mais seulement 3:1 pour le grand texte — 18 pt (24 px), ou 14 pt (18.66 px) en gras. L'outil affiche les deux ; à vous de choisir celui qui s'applique.
- Les éléments non textuels ont leur propre règle. Icônes, anneaux de focus, bordures de champs et segments de graphique demandent 3:1 au titre de WCAG 1.4.11, ce qui échappe facilement quand on ne vérifie que les paragraphes.
- Les couleurs semi-transparentes ne se mesurent pas directement. Une couleur avec alpha doit d'abord être composée sur ce qui se trouve réellement derrière elle, et le résultat dépend de ce fond.
- Du texte posé sur une photographie ou sur un dégradé n'a pas de rapport unique. Testez la zone la plus défavorable, ou ajoutez un voile opaque derrière le texte.
Not the right tool for: Prouver qu'une palette est utilisable par des personnes atteintes d'une déficience de la vision des couleurs. Le rapport de contraste est une mesure de luminance — deux couleurs peuvent atteindre 7:1 et rester indiscernables pour un deutéranope, n'encodez donc jamais une information par la seule teinte.
Frequently Asked Questions
Comment vérifier le contraste des couleurs pour l'accessibilité ?
Saisissez la couleur de premier plan (le texte) et la couleur de fond en HEX ou en RGB. L'outil calcule le rapport de contraste à l'aide de la formule de luminance relative de WCAG 2.1 et indique la réussite ou l'échec pour AA (4.5:1 pour le texte normal) et AAA (7:1). Ajustez les couleurs jusqu'à la réussite.
Pourquoi le contraste des couleurs est-il important pour l'accessibilité ?
Un contraste faible rend le texte difficile à lire pour les personnes malvoyantes, daltoniennes ou placées dans un environnement très lumineux. Environ 8 % des hommes présentent une forme de déficience de la vision des couleurs. Les exigences de contraste de WCAG garantissent la lisibilité du contenu sur toute cette étendue de capacités et de conditions visuelles.
Quel est le rapport de contraste minimal pour WCAG AA ?
WCAG 2.1 AA exige 4.5:1 pour le texte normal (moins de 18 pt, ou 14 pt en gras) et 3:1 pour le grand texte (18 pt et plus, ou 14 pt et plus en gras). Les composants d'interface non textuels (icônes, bordures de champs) demandent 3:1. Le niveau AAA porte ces valeurs à 7:1 et 4.5:1. La plupart des normes légales d'accessibilité exigent le niveau AA.
How to Use WCAG Contrast Checker
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.