Vérificateur de
Contraste WCAG

Qu'est-ce que le ratio de contraste WCAG ?

Le ratio de contraste mesure la différence de luminance perçue entre une couleur de texte et son fond. Il est calculé selon la formule officielle du W3C : (L1 + 0.05) / (L2 + 0.05), où L1 et L2 sont les luminances relatives des deux couleurs. Un ratio de 1:1 signifie que les deux couleurs sont identiques (contraste nul). Le ratio maximum possible est 21:1 (noir sur blanc).

Les niveaux WCAG 2.1 expliqués

• AA — Texte normal (≥ 4.5:1) : standard minimum légalement requis dans de nombreux pays pour les sites publics. Texte de moins de 18px ou moins de 14px en gras.
• AA — Grand texte (≥ 3:1) : pour les textes ≥ 18px normal ou ≥ 14px en gras (titres).
• AAA — Texte normal (≥ 7:1) : niveau d'excellence, recommandé pour les contenus critiques (médical, légal).
• AAA — Grand texte (≥ 4.5:1) : excellence pour les titres et gros textes.

Pourquoi c'est si souvent ignoré

Le contraste insuffisant touche principalement les textes gris sur fond blanc (très courant dans les designs minimalistes), les boutons aux couleurs de marque sur fond coloré, et les placeholders de formulaires. Les designers testent rarement sur des moniteurs calibrés et dans des conditions de lumière ambiante forte (soleil, éblouissement). Sur mobile en extérieur, un ratio de 3:1 devient quasi illisible.

Impact sur le SEO et les conversions

Google intègre les signaux d'accessibilité dans ses scores de qualité. Un mauvais contraste fait baisser votre score Lighthouse Accessibility, qui impacte indirectement votre classement. Côté conversions, les CTA avec un contraste insuffisant sont cliqués en moyenne 30 % moins souvent qu'un bouton bien contrasté.