Vérificateur de contraste (niveaux WCAG AA / AAA)
Choisis une couleur de premier plan et d'arrière-plan pour calculer le ratio de contraste WCAG. L'aperçu de texte en direct et les quatre badges de niveau (AA normal, AA grand, AAA normal, AAA grand) se mettent à jour en temps réel.
Fonctionnement
Comment fonctionne le ratio de contraste
WCAG (Règles pour l'accessibilité des contenus Web) définit le contraste comme le rapport entre la luminance relative de deux couleurs. La formule linéarise chaque canal sRGB, les pondère selon la sensibilité de l'œil humain (R 0,2126, G 0,7152, B 0,0722), puis calcule (plus clair + 0,05) / (plus sombre + 0,05). Le résultat va de 1:1 (identique) à 21:1 (noir sur blanc).
Nous calculons cela dans ton navigateur en utilisant la formule officielle WCAG 2.x. Les quatre badges de niveau vérifient par rapport aux seuils AA de 4,5:1 (normal) et 3:1 (grand), et aux seuils AAA de 7:1 (normal) et 4,5:1 (grand). Le « grand texte » correspond à 24px/18pt ou plus, ou 18,66px/14pt et gras.
Pourquoi passer le niveau AA au minimum
Le niveau AA est juridiquement contraignant dans de nombreux pays (loi française sur le numérique pour les services publics, directive européenne sur l'accessibilité web, EN 301 549). Échouer au niveau AA pour le texte principal est le problème d'accessibilité le plus fréquent et le plus facile à corriger pendant la conception plutôt qu'après le lancement.
Le niveau AAA est recommandé pour la lecture longue durée, les services gouvernementaux et les interfaces à enjeux élevés. Il est strict — le premier instinct d'un designer avec du gris pâle sur blanc échoue souvent facilement au niveau AAA. Si ton site sert principalement du contenu consulté rapidement, vise AA ; si tu publies des articles, des livres ou des informations critiques, vise AAA.
Erreurs courantes
« Ça a l'air bien sur mon écran. » Les écrans calibrés, l'éclairage fluorescent de bureau et l'utilisation d'un smartphone en extérieur changent tous le contraste perçu. Utilise le ratio, pas ton œil.
Concevoir le mode sombre en inversant les codes hex. L'inversion change la teinte et casse le contraste. Re-teste chaque paire de couleurs après avoir changé de thème.
Faire confiance aux chartes graphiques. Beaucoup de palettes de marque ont été choisies avant la prise de conscience WCAG. Si le rose de marque sur blanc échoue, propose un rose légèrement plus foncé pour le texte de corps et réserve l'original pour un usage décoratif.
Questions fréquentes
›Quelle est la différence entre AA et AAA ?
AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA durcit à 7:1 et 4,5:1. AAA est recommandé mais pas toujours atteignable.
›Qu'est-ce que le « grand texte » ?
WCAG le définit comme 18pt (24px) ou plus, ou 14pt (18,66px) et gras.
›Cet outil prend-il en charge la transparence ?
Pas encore. Choisis la couleur réelle que l'utilisateur voit (premier plan composité sur l'arrière-plan). La prise en charge de la transparence pourrait venir ultérieurement.
›Pourquoi ma marque ne passe-t-elle pas ?
Beaucoup de palettes de marque ont été choisies pour des raisons esthétiques, pas d'accessibilité. Corrections courantes : assombrir les couleurs d'accent utilisées comme texte, réserver les variantes claires pour les arrière-plans ou les éléments décoratifs.
›Le ratio est-il identique au « contraste perçu » ?
Non — WCAG 2.x utilise une formule simplifiée basée sur la luminance. WCAG 3 (en développement) utilise APCA, qui prédit mieux le contraste perçu mais n'est pas encore normalisé.
›Quel ratio pour les icônes ou les contrôles d'interface ?
WCAG 2.1 a ajouté un minimum de 3:1 pour le contraste non textuel (icônes, contrôles de formulaires, indicateurs de focus). Utilise le même vérificateur — atteins ou dépasse 3:1.
݂a fonctionne pour les graphiques ?
Le même seuil s'applique entre les couleurs adjacentes qui transmettent une signification. Pour la visualisation de données, 3:1 entre les couleurs adjacentes est le minimum WCAG 1.4.11.
›Les données sont-elles envoyées quelque part ?
Non. Le calcul s'effectue localement dans ton navigateur.
Outils similaires
Dernière mise à jour: