Contraste (minimum)

Ce que le critère demande

Le texte et les images de texte doivent présenter un rapport de contraste d’au moins 4,5:1 par rapport à leur arrière-plan. Le texte de grande taille — défini comme 18 pt (24 px) en graisse normale ou 14 pt (18,66 px) en gras — n’exige que 3:1. Le rapport est calculé à partir de la luminance relative du premier plan et de l’arrière-plan. Les logos, noms de marque et textes purement décoratifs sont exemptés. Les contrôles inactifs le sont également, mais attention : cette exemption est plus étroite que ce que les concepteurs pensent généralement.

Comment le respecter

• Vérifier chaque combinaison texte sur fond à l’aide d’un outil de vérification du contraste (axe DevTools, WebAIM, Stark, plug-ins Figma). Atteindre au minimum 4,5:1.
• Pour le texte d’espace réservé gris clair dans les champs de formulaire, le porter à au moins 4,5:1 par rapport au fond du champ — le texte de substitution est du texte.
• Auditer les sections héros avec texte sur image. La couleur d’arrière-plan varie par pixel ; vérifier la zone la moins favorable ou ajouter une surimpression sombre.
• Pour le mode sombre, recalculer chaque rapport — les jetons de couleur qui passent sur blanc échouent souvent sur du presque-noir.
• Pour les couleurs de marque qui échouent sur blanc, assombrir la couleur uniquement pour le texte ; conserver l’originale pour les graphiques.
• Pour les boutons, c’est le contraste étiquette-fond du bouton qui compte, non le contraste bouton-page.

Échecs courants

• Texte d’aide gris clair (#999 sur #fff = 2,85:1) dans les champs de formulaire — échec sévère.
• Texte blanc sur un bouton de couleur de marque lorsque cette couleur est de saturation moyenne (orange, vert-jaune, turquoise).
• Titres héros placés sur des photographies sans surimpression — le contraste varie selon l’image, tombant souvent en dessous de 3:1.
• Texte de substitution utilisant la même couleur que l’étiquette mais avec une graisse inférieure, en faisant l’élément au plus faible contraste de la page.
• Boutons « inactifs » ou « désactivés » stylisés à 2:1, ce qui est acceptable s’ils sont vraiment non interactifs — mais ils sont souvent encore accessibles via la touche Tab, invalidant l’exemption.
• Jetons de mode sombre miroir du mode clair sans recalcul des rapports — #bbb sur #222 est proche de la conformité mais pas tout à fait.

Pourquoi c’est important

Le critère 1.4.3 est l’échec le plus cité dans les audits WCAG, sans exception. Lighthouse, axe, Stark et tous les outils automatisés le signalent de manière fiable, ce qui en fait aussi le moins coûteux à détecter. La correction consiste généralement en un changement de jeton de design qui se propage dans tout le système — le faire une fois, le tester une fois, le livrer. Ne pas le corriger est presque toujours un compromis marque-accessibilité qui finit par une plainte.