La réponse courte

Le contraste des couleurs est la différence de luminosité entre un texte et son arrière-plan. Le niveau AA des WCAG demande un ratio d'au moins 4,5:1 pour le texte normal et de 3:1 pour le grand texte (24 px, ou environ 19 px en gras) ainsi que pour les boutons, icônes et bordures de formulaire. Testez chaque paire avec un vérificateur de contraste, puis foncez le texte ou éclaircissez le fond jusqu'à ce qu'elle passe.

À retenir

  • Le texte normal exige 4,5:1. Le grand texte exige 3:1.
  • Les boutons, icônes et bordures de champs exigent 3:1 par rapport à ce qui les entoure.
  • Le texte gris pâle sur blanc est le pire coupable.
  • Vérifiez aussi le texte sur les photos sur mobile, où les voiles disparaissent souvent.
  • Corrigez-le une fois dans votre système de design et c'est corrigé partout.

Le rapport WebAIM Million 2026 a trouvé du texte peu contrasté sur 83,9 % du million de pages d’accueil les plus visitées. Il nuit aux personnes malvoyantes, daltoniennes ou dont la vue vieillit, et à quiconque lit son téléphone au soleil. La bonne nouvelle : la correction tient souvent en quelques lignes de CSS.

Les règles en une minute

  • 4,5:1 pour le texte normal (WCAG 1.4.3, niveau AA).
  • 3:1 pour le grand texte : 24 px et plus, ou environ 19 px et plus en gras.
  • 3:1 pour les éléments non textuels qu’il faut voir pour utiliser la page : contours de boutons, bordures de champs, icônes et indicateurs de focus (WCAG 1.4.11).
  • Les logos et le texte purement décoratif sont exemptés.

Le ratio va de 1:1 (blanc sur blanc) à 21:1 (noir sur blanc). Le noir pur sur blanc n’est pas obligatoire; un gris foncé comme #333333 sur blanc donne environ 12,6:1, ce qui est très lisible.

Comment tester, étape par étape

  1. Listez vos paires de couleurs

    Notez votre texte courant, vos titres, liens, boutons, textes d’exemple, texte du pied de page et tout texte sur fond coloré ou photo, avec le fond de chacun.

  2. Testez chaque paire

    Utilisez un vérificateur gratuit comme le WebAIM Contrast Checker, ou la pipette des outils de développement de Chrome ou Firefox, qui affiche le ratio et un résultat réussi ou échoué.

  3. Corrigez les échecs dans vos styles

    Foncez le texte gris (par exemple de #999999 à #595959 sur blanc) ou utilisez une teinte plus profonde de votre couleur de marque pour le texte. Changez-la dans votre thème ou vos jetons de design pour qu’elle se mette à jour partout.

  4. Vérifiez le texte sur les images

    Ajoutez un voile sombre ou un dégradé derrière le texte sur les photos, et testez la partie la plus claire de l’image. Vérifiez sur un téléphone, où le recadrage change.

  5. Vérifiez les états

    Testez les états survol, focus, désactivé et visité, ainsi que le contour du focus lui-même, qui doit aussi atteindre 3:1.

  6. Analysez pour attraper le reste

    Lancez une analyse avec vérifications en direct dans le navigateur pour trouver le faible contraste qui provient des vrais styles calculés sur chaque page.

Des corrections qui gardent votre image de marque

Vous n’avez pas à renoncer à vos couleurs. La plupart des marques gardent une couleur vive pour les grandes formes et les fonds, et ajoutent une teinte plus foncée de la même couleur pour le texte et les petites icônes. Si le bleu de votre marque échoue comme texte sur blanc, essayez une teinte deux ou trois crans plus foncée. Votre designer le remarquera à peine; vos lecteurs, oui.

N’utilisez pas la couleur seule pour transmettre un sens. Une bordure rouge sur un champ en erreur a aussi besoin d’une icône ou d’un message, car environ 1 homme sur 12 a une forme de déficience de la vision des couleurs.

Pourquoi un analyseur en voit plus que vous

Le contraste peut changer sur chaque page : un bouton blanc sur une bannière claire, du texte gris dans une bannière de témoins, un widget de clavardage tiers. Accessible Nord vérifie le contraste de deux façons : dans le code de la page, et dans le navigateur de vrais visiteurs une fois vos styles chargés, pour attraper les problèmes qu’une simple vérification du code manquerait.

Ensuite, assurez-vous que les gens voient où ils sont quand ils naviguent au clavier : lisez comment tester votre site au clavier.

Sources

La plupart des sources sont des documents officiels en anglais.

  1. The WebAIM Million, 2026 report
  2. Understanding WCAG 2.2: Contrast (Minimum) (1.4.3)
  3. Understanding WCAG 2.2: Non-text Contrast (1.4.11)
  4. WebAIM Contrast Checker

Dernière révision le .

Questions fréquentes

Qu'est-ce qu'un bon ratio de contraste?

Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte afin de respecter le niveau AA des WCAG. Pour une lecture prolongée, visez plus haut, autour de 7:1, soit le niveau AAA.

Le texte d'exemple des champs doit-il respecter le contraste?

Oui, s'il transmet de l'information. Mieux encore, utilisez une étiquette visible au-dessus du champ et gardez le texte d'exemple comme simple indice facultatif.

Le noir pur sur blanc est-il idéal?

Il passe facilement, mais certaines personnes dyslexiques trouvent un très fort contraste fatigant. Un gris très foncé sur blanc ou blanc cassé offre un bon équilibre.

Ce guide est de l'information générale, pas un avis juridique. Pour vos obligations précises, consultez un avocat ou votre organisme de réglementation.