Contraste des éléments non textuels

Ce que le critère demande

La règle de contraste du critère 1.4.3 couvre uniquement le texte ; le critère 1.4.11 étend une version plus souple (3:1 au lieu de 4,5:1) à deux catégories supplémentaires. D’abord, les indicateurs visuels des composants d’interface — ce qui signale qu’un bouton est un bouton, où se trouve l’anneau de focus, où se situe la limite d’un champ de formulaire — doivent atteindre 3:1 par rapport à la surface adjacente. Ensuite, les parties des graphiques porteurs de sens que l’utilisateur doit identifier — barres de graphique, icônes indiquant un état, points indicateurs — doivent également atteindre 3:1.

Comment le respecter

• Donner à chaque champ de formulaire une bordure visible atteignant au minimum 3:1 par rapport à l’arrière-plan de la page.
• Styliser les indicateurs de focus (contour :focus-visible) à 3:1 minimum par rapport au composant et à la page.
• Pour les boutons fantômes ou de type contour, la bordure elle-même doit atteindre 3:1 par rapport à l’arrière-plan de la page.
• Pour les commutateurs à bascule, le fond de piste et le curseur doivent présenter un contraste de 3:1 là où ils se touchent.
• Pour les icônes porteuses de sens (icône « info » i, triangle d’avertissement, coche), les traits de l’icône doivent atteindre 3:1 par rapport à leur arrière-plan.
• Pour les séries de graphiques, les couleurs distinguant les barres ou lignes doivent être à 3:1 les unes des autres, ou associées à des motifs ou textures.

Échecs courants

• Champs de formulaire sans bordure visible, ou une bordure #e5e5e5 sur #fff à 1,3:1 — invisible pour les utilisateurs malvoyants.
• Contour de focus par défaut du navigateur remplacé par outline: none sans substitut.
• Boutons fantômes avec texte blanc sur fond transparent et bordure grise de 1 px — le bouton est pratiquement invisible.
• Commutateurs à bascule avec un curseur à peine visible sur une piste presque identique à l’état « désactivé ».
• Icônes de statut dans le coin d’une carte (coche verte, croix rouge) dont la couleur contraste à peine avec l’arrière-plan de la carte.
• Graphique en secteurs avec des couleurs de tranches à 2:1 les unes par rapport aux autres — les utilisateurs voyants perçoivent encore les contours, mais à peine ; les malvoyants voient une seule masse.

Pourquoi c’est important

Le critère 1.4.11 a été ajouté dans WCAG 2.1 et prend souvent les équipes par surprise — la plupart des vérifications de contraste ne portent que sur le texte. Les bordures de champs, les anneaux de focus et les boutons fantômes sont les cas d’échec canoniques. Des outils comme axe et Stark vérifient désormais le contraste des éléments non textuels, mais les concepteurs le négligent encore à la conception car le modèle mental dominant reste « contraste = contraste du texte ». La correction implique généralement d’épaissir les bordures et d’assombrir les gris dans le système de design.