Vérificateur de contraste (niveaux WCAG AA / AAA)

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.