Chapitre 7.3 — Contraste non textuel

⏱️ TL;DR — Le contraste ne concerne pas que le texte. Le critère 1.4.11 (niveau AA) impose un ratio d’au moins 3:1 aux éléments non textuels porteurs de sens : les composants d’interface (bordures de champs, boutons, cases à cocher), leurs états (dont l’indicateur de focus), et les objets graphiques essentiels (icônes signifiantes, segments de graphique). Le décoratif, lui, est exempté — encore faut-il savoir distinguer les deux.

🎯 Objectifs

• Savoir que le seuil 3:1 (1.4.11) s’applique au-delà du texte.
• Distinguer un élément essentiel (soumis au seuil) d’un élément décoratif (exempté).
• Appliquer la règle aux bordures de champs, icônes, boutons et segments de graphique.
• Relier ce critère à l’indicateur de focus vu en Partie 4.

Pourquoi un seuil pour le non-texte ?

Un champ de formulaire dont la bordure est un gris très pâle sur fond blanc : où commence-t-il, où finit-il ? Une case à cocher au contour presque invisible : est-elle cochée ? Un bouton sans fond ni bordure lisible : est-ce cliquable ? Ces éléments portent de l’information par leur forme, exactement comme le texte porte de l’information par ses lettres. S’ils n’ont pas assez de contraste, cette information disparaît.

D’où 1.4.11 : tout ce qui est nécessaire pour identifier un composant ou comprendre un graphique doit atteindre 3:1 contre les couleurs adjacentes.

Ce qui est couvert (et ce qui ne l’est pas)

Le critère vise trois familles :

• Les composants d’interface : la limite visuelle qui te permet de repérer un champ, un bouton, une case, un curseur. C’est le bord ou la zone qui identifie le contrôle, pas son texte (le texte, lui, relève de 1.4.3).
• Les états : focus, checked, selected, error… quand un changement d’état est signalé visuellement, l’indice doit être perceptible (≥ 3:1).
• Les objets graphiques essentiels : une icône « poubelle » qui est le seul libellé d’un bouton, la ligne d’un graphique, la part d’un camembert — bref, tout visuel nécessaire à la compréhension.

Est exempté : le purement décoratif (un aplat de fond, une illustration d’ambiance, une ombre esthétique) et ce qui est redondant (une icône posée à côté d’un texte qui dit déjà la même chose n’a pas à atteindre 3:1, puisque le texte porte l’info).

💡 Réflexe — Pose-toi une seule question devant un élément graphique : « si je le rends invisible, l’utilisateur perd-il de l’information ou la capacité d’agir ? » Si oui, il est essentiel → seuil 3:1. Si non, il est décoratif → exempté. Ce test tranche presque tous les cas.

Cas n°1 : les bordures de champs

Le champ « moderne » sans presque aucune bordure est joli et illisible.

/* ❌ Bordure #eee sur fond blanc ≈ 1,2:1 : le champ est invisible */
.input {
  border: 1px solid #eeeeee;
  background: #ffffff;
}
 
/* ✅ #767676 sur blanc ≈ 4,5:1 : le contour du champ est clair (>= 3:1) */
.input {
  border: 1px solid #767676;
  background: #ffffff;
}

Attention : si l’identification du champ ne repose que sur un fond légèrement grisé (sans bordure), c’est ce fond vs le reste de la page qui doit atteindre 3:1.

Cas n°2 : les icônes porteuses de sens

Une icône qui est le contrôle (un bouton loupe sans texte, une croix de fermeture, une poubelle de suppression) doit se détacher à 3:1 de son fond. Si l’icône n’est là que pour décorer un libellé texte déjà présent, elle est redondante et exemptée — mais garde-la lisible quand même par confort.

/* ✅ L'icône seule d'un bouton "fermer" : assez foncée pour atteindre 3:1 */
.btn-fermer svg {
  fill: #595959; /* sur fond blanc */
}

Cas n°3 : l’indicateur de focus

C’est le point de jonction avec la Partie 4 — Clavier & focus. L’anneau de focus est un état (focus) signalé visuellement : il tombe donc sous 1.4.11 et doit atteindre 3:1 contre ce qui l’entoure. Un focus bleu pâle sur fond clair échoue.

/* ❌ Focus quasi invisible : trop peu contrasté avec le fond clair */
:focus-visible {
  outline: 2px solid #bcd4ff;
}
 
/* ✅ Focus franc, >= 3:1 sur fond clair, avec un léger décalage */
:focus-visible {
  outline: 3px solid #0b3d91;
  outline-offset: 2px;
}

Ne supprime jamais l’outline sans le remplacer par un indicateur au moins aussi contrasté. Un outline: none nu est l’une des régressions d’accessibilité les plus courantes — et une violation directe.

Cas n°4 : les segments de graphique

Les barres, parts et lignes d’un graphique sont des objets graphiques essentiels. Deux barres adjacentes doivent se distinguer l’une de l’autre à 3:1 (ou être séparées par un trait de contour contrasté). C’est le prolongement du chapitre précédent : là on doublait la couleur pour les daltoniens, ici on garantit que les formes elles-mêmes se détachent assez.

⚠️ Piège — Confondre « joli » et « perceptible ». Les tendances de design plébiscitent les interfaces épurées : bordures fantômes, boutons « ghost », gris sur gris. Esthétiquement séduisant, mais nombre de ces choix tombent sous 3:1 et rendent les contrôles indevinables. Un composant qu’on ne peut pas localiser n’est pas utilisable, aussi élégant soit-il.

🧭 Sur A11yLearn — Les cartes de cours d’A11yLearn utilisaient une bordure #f0f0f0 (≈ 1,1:1) et des cases à cocher « Marquer comme suivi » au contour #ddd. Résultat : impossible de voir les limites d’une carte ou l’état d’une case en malvoyance. On a remonté les contours à #767676 (≈ 4,5:1) et renforcé l’anneau de focus des cases à #0b3d91. Aucune carte n’a « changé de style » aux yeux de l’équipe, mais les composants sont enfin repérables — bords, états et focus compris.

✏️ Exercices

Exercice 1 — Essentiel ou décoratif ? Pour chacun, dis s’il est soumis au seuil 3:1 : (a) une icône « corbeille » qui est le seul contenu d’un bouton de suppression, (b) une icône « corbeille » posée à gauche du mot « Supprimer », (c) un dégradé de fond décoratif en haut de page, (d) l’anneau de focus d’un bouton.

Exercice 2 — Répare le focus. Un dev a écrit button:focus { outline: none; } « parce que le halo bleu du navigateur était moche ». Explique le problème et propose un remplacement conforme.

🧠 Quiz de révision

Chapitre suivant : Taille, zoom & reflow — comment ton contenu survit à l’agrandissement et au zoom sans casser.