Chapitre 7.1 — Le contraste du texte

⏱️ TL;DR — Le contraste est le rapport de luminosité entre une couleur de texte et sa couleur de fond. WCAG 2.2 (critère 1.4.3, niveau AA) exige au minimum 4,5:1 pour le texte normal et 3:1 pour le grand texte ; le niveau AAA (1.4.6) monte à 7:1. Ça se mesure en quelques secondes avec les DevTools ou un contrast checker. Les fautes classiques : le gris clair « design », le texte posé sur une image ou un dégradé, et le placeholder trop pâle.

🎯 Objectifs

• Comprendre ce qu’est un ratio de contraste et pourquoi il commence à 1:1.
• Connaître les seuils AA et AAA et ce qui compte comme « grand texte ».
• Mesurer un contraste avec les outils du navigateur.
• Repérer et corriger les trois pièges : gris clair, texte sur image, placeholder pâle.

C’est quoi, un ratio de contraste ?

Le contraste se calcule à partir de la luminance relative de deux couleurs (leur clarté perçue). Le résultat est un rapport qui va de 1:1 (deux couleurs identiques, texte invisible) à 21:1 (noir pur sur blanc pur). Plus le chiffre est haut, plus le texte se détache.

Retiens que c’est un rapport, pas un pourcentage, et qu’il dépend des deux couleurs — jamais d’une seule. Un même gris peut être parfait sur du blanc et illisible sur du bleu clair.

Les seuils à connaître

« Grand texte » a une définition précise : au moins 24px (environ 1.5rem), ou au moins 18,66px (environ 1.17rem) si le texte est en gras. En dessous, c’est du texte normal et le seuil de 4,5:1 s’applique.

La cible de ce cours reste AA. Vise 7:1 quand tu peux (c’est confortable pour tout le monde), mais l’obligation légale, c’est 4,5:1.

⚠️ Piège — Le texte « désactivé ». WCAG exempte les composants inactifs de l’exigence de contraste. Mais ne t’en sers pas comme échappatoire : un bouton disabled gris très pâle que personne ne peut lire reste une mauvaise UX. L’exemption est un fait juridique, pas un permis d’illisibilité.

Comment le mesurer

Tu n’as jamais à deviner un contraste. Trois manières de le vérifier :

• DevTools du navigateur : inspecte un élément de texte, ouvre le sélecteur de couleur dans le panneau Styles ; Chrome et Firefox affichent le ratio et une coche si AA/AAA sont atteints. Chrome propose même une ligne de niveau à ne pas franchir dans le sélecteur.
• Contrast checkers en ligne : des outils comme le WebAIM Contrast Checker prennent deux couleurs et renvoient le ratio + le verdict AA/AAA.
• Extensions d’audit : axe DevTools, WAVE ou le Lighthouse intégré à Chrome signalent automatiquement les textes sous le seuil sur une page entière (on les détaille en Partie 14).

💡 Réflexe — Vérifie le contraste au moment de choisir la couleur, dans le design, pas trois mois plus tard en audit. Une palette validée en amont t’évite de repeindre toute une interface après coup.

Piège n°1 : le gris clair « élégant »

C’est la faute la plus répandue du web moderne. Un texte secondaire en gris très clair sur fond blanc paraît « raffiné » sur l’écran Retina du designer, dans un bureau bien éclairé — et devient illisible pour une personne âgée, malvoyante, ou pour n’importe qui en plein soleil.

/* ❌ #999 sur #fff = 2,85:1 — sous le seuil, échoue à AA */
.legende {
  color: #999999;
  background: #ffffff;
}
 
/* ✅ #595959 sur #fff = 7,0:1 — passe AA et AAA */
.legende {
  color: #595959;
  background: #ffffff;
}

Le gris reste possible : il faut juste le choisir assez foncé. #595959 sur blanc est encore clairement gris, mais il est lisible.

Piège n°2 : le texte sur image ou dégradé

Un titre blanc posé sur une photo peut être parfait en haut de l’image (zone sombre) et disparaître en bas (zone claire). Le ratio change pixel par pixel, et l’outil ne peut vérifier qu’une couleur de fond unie.

Solutions : ajoute un calque semi-opaque entre l’image et le texte, ou une ombre portée franche, ou un dégradé de protection. L’idée est de garantir un fond suffisamment contrasté sous tout le texte.

/* ✅ Voile sombre sous le texte : le contraste devient prévisible */
.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("/hero.jpg");
  color: #ffffff;
}

Piège n°3 : le placeholder trop pâle

Le texte d’exemple d’un champ (placeholder) est presque toujours rendu en gris très clair par défaut. Deux problèmes : il est souvent sous le seuil, et il ne doit jamais servir de seule étiquette (on y revient en Partie 9). Contraste-le comme n’importe quel texte informatif.

/* ❌ placeholder par défaut, souvent ~2:1 */
input::placeholder { color: #cccccc; }
 
/* ✅ assez foncé pour être lu, tout en restant distinct de la saisie */
input::placeholder { color: #6b6b6b; }

Et APCA / WCAG 3 ?

Tu croiseras le sigle APCA (Advanced Perceptual Contrast Algorithm). C’est le futur algorithme de contraste envisagé pour WCAG 3.0, pensé pour mieux coller à la perception réelle (il tient compte du sens texte clair/foncé, de la taille, de la graisse). Sur le papier, il est plus juste que le calcul actuel.

Mais WCAG 3 est un brouillon de travail, sans date de publication ferme. Ne construis pas dessus : ta conformité légale se mesure aujourd’hui avec les ratios de WCAG 2.2 (4,5:1 / 3:1 / 7:1). Connais APCA pour ne pas être surpris, applique WCAG 2.2 pour être conforme.

🧭 Sur A11yLearn — Dans le premier design d’A11yLearn, les descriptions de cours étaient en #9aa0a6 sur blanc (2,9:1) et les liens « En savoir plus » en bleu clair #7ab8ff (2,1:1). Un simple passage au contrast checker a tout révélé. On a foncé le texte secondaire à #5f6368 (5,9:1) et les liens à #1a56c4 (6,4:1) : zéro changement de maquette perçu par l’équipe design, mais le contenu est devenu lisible pour tout le monde. Coût : une demi-journée. Impact : des dizaines d’erreurs d’audit en moins.

♿ Côté utilisateur — Une personne atteinte de DMLA (dégénérescence maculaire) ou de cataracte perçoit les faibles contrastes comme un texte « délavé », voire absent. Elle ne va pas régler la luminosité de son écran pour ton site : elle va simplement abandonner. Un bon contraste, c’est la différence entre « je peux lire ce cours » et « je passe au concurrent ».

✏️ Exercices

Exercice 1 — Corrige la palette. Un designer te livre : texte de paragraphe #8a8a8a sur fond #ffffff, et un bouton avec libellé blanc #ffffff sur fond #f4a259. Que testes-tu, et que corriges-tu probablement ?

Exercice 2 — Le titre sur photo. On te demande un titre blanc en gros par-dessus une photo de campus aux tons variés (ciel clair, bâtiment sombre). Le texte est lisible en haut, illisible sur le ciel. Comment garantis-tu le contraste sans changer la photo ?

🧠 Quiz de révision

Chapitre suivant : Ne pas se fier à la couleur — pourquoi une info portée par la seule couleur exclut, et comment ajouter un second signal.