Texte d’invite, légende et texte secondaire : le piège du gris
Un ticket de support qui revient dans l’historique de presque tous les produits : un utilisateur remplit un formulaire, l’envoie, reçoit une erreur et n’arrive pas à déterminer quel champ posait problème — parce que le texte d’aide sous le champ, le texte d’invite à l’intérieur et la note explicative à côté sont tous d’un gris clair à la mode qu’il n’arrive tout simplement pas à lire. Sur l’écran calibré du designer, dans un studio en pénombre, le gris paraissait élégant. Sur l’ordinateur portable de l’utilisateur, dans une pièce bien éclairée, il avait disparu. L’information était là depuis le début ; le contraste, non.
Le piège du gris, c’est ce qui arrive quand les designers signalent « moins
important » en éclaircissant le texte — car le mécanisme qui crée
l’atténuation est le même que celui qui détruit la lisibilité. Poussez le gris
assez loin et l’atténuation devient discrètement de l’exclusion. La solution
est un plancher : le texte secondaire doit toujours dépasser 4,5:1 (taille
normale) sur son fond. Le classique #999 sur blanc ne mesure que ≈2,8:1 et
échoue ; #767676 est le gris le plus clair qui passe à ≈4,5:1 — le fameux
« gris accessible ». Les planchers eux-mêmes sont traités dans notre guide
du contraste ; cet article porte sur le texte qui passe à
travers le plus souvent.
Pourquoi le gris clair est-il un piège si courant ?
Parce que ça marche — jusqu’au moment où ça ne marche plus. La hiérarchie réclame un moyen de dire « ceci compte moins », et éclaircir le texte est le levier le plus simple qui soit : un seul changement de valeur et la légende s’efface. Le problème, c’est que l’effacement et l’illisibilité sont le même processus physique vu à deux distances. Un peu plus clair se lit comme plus discret ; encore un peu plus, comme plus pâle ; au-delà d’un certain point, comme absent — et il n’y a aucune alarme visuelle à la frontière, si bien que le curseur la franchit sans qu’on s’en aperçoive.
La formule qui vous garde du bon côté : la hiérarchie doit chuchoter, pas disparaître. Un chuchotement est plus discret que la parole et reste parfaitement intelligible. Un texte gris qui a franchi le plancher ne chuchote pas — il a quitté la pièce.
Quels textes y tombent ?
Les victimes de tous les jours, toutes du vrai texte porteur de vraie information :
- Textes d’invite — le texte d’exemple à l’intérieur d’un champ vide.
- Légendes et textes d’aide — la note sous un champ, la légende sous une image.
- Horodatages et métadonnées — « il y a 2 heures », les signatures d’auteur, les tailles de fichier.
- Indices d’état vide — « Aucun résultat pour l’instant. Essayez une autre recherche. »
Chacun de ces éléments est un contenu que l’utilisateur a besoin de lire. Les rendre illisibles ne les rend pas sans importance ; ça en fait un obstacle.
Texte d’invite ou élément désactivé : la paire la plus confondue dans WCAG
Cette distinction fait passer plus de designs d’apparence accessible sous le plancher que n’importe quelle autre, alors énonçons-la sans détour :
- Le texte désactivé est exempté du contraste minimum. WCAG exclut explicitement les composants d’interface inactifs et désactivés — un bouton grisé se lit comme « vous ne pouvez pas vous en servir maintenant », et son faible contraste fait partie de ce message.
- Le texte d’invite, lui, n’est pas exempté. Un texte d’invite se trouve dans un champ actif, et c’est du vrai texte porteur d’information réelle — un exemple de format, une consigne, parfois la seule étiquette du champ. Il doit dépasser le plancher standard de 4,5:1 comme tout autre texte courant.
Les designers emploient le même gris pâle pour les deux parce qu’ils se ressemblent — du texte peu appuyé dans un formulaire. Mais l’un est un contrôle désactivé et l’autre du contenu actif. Le document Understanding Contrast (Minimum) détaille l’exemption et ses limites ; en résumé, « ça a l’air inactif » n’est pas la même chose que « c’est inactif ».
Quels sont les chiffres réels ?
Prenez une ligne de métadonnées — « Mis à jour il y a 3 jours par Sam » — sur
un fond blanc #ffffff, et descendez l’échelle des gris pour trouver la
frontière :
| Gris | Ratio sur blanc | Verdict |
|---|---|---|
#aaaaaa | ≈2,3:1 | Échoue — la zone « joli à l’œil, illisible » |
#999999 | ≈2,8:1 | Échoue — la valeur de texte secondaire la plus répandue sur le web |
#808080 | ≈4,0:1 | Échoue — même le vrai gris à 50 % rate le plancher |
#767676 | ≈4,5:1 | Passe (de justesse) — le gris le plus clair qui satisfait AA pour le texte normal |
La frontière est nette, et elle se situe plus loin que l’intuition ne le
suggère : un gris moyen comme #808080 échoue encore, et #999 — qui donne
l’impression d’une couleur « secondaire » raisonnable — est loin de passer.
Tout ce que vous voulez placer sous #767676 sur blanc doit mériter son
atténuation autrement.
C’est exactement la logique qu’encode le rôle légende de Scale Composer. Plutôt que de choisir un gris qui a l’air agréable en croisant les doigts, il sélectionne le pas le plus subtil qui passe encore — une atténuation poussée jusqu’au plancher et arrêtée là, jamais au-delà. La légende est aussi discrète que les règles le permettent, et pas davantage.
Ouvrez une palette et examinez le choix noté du rôle légende — la dérivation place la légende sur le pas le plus pâle qui passe, avec son ratio WCAG et sa valeur APCA affichés pour que vous la voyiez juste au-dessus de la ligne plutôt qu’en dessous.
Comment atténuer sans devenir illisible ?
La luminosité est un outil de hiérarchie parmi d’autres — pas le seul, et pas le meilleur une fois le plancher franchi. Le reste de la boîte à outils ne coûte rien en lisibilité :
- Taille — une légende plus petite se lit comme secondaire à plein contraste.
- Graisse — du regular face au semibold du corps de texte ; plus léger, pas plus pâle.
- Espacement — une ligne de métadonnées isolée par du blanc s’efface d’elle-même.
- Position — sous le contenu principal ou à côté, là où l’œil la range comme secondaire.
Combinez-en deux et vous obtenez une hiérarchie claire tandis que le texte reste à un contraste confortable. Le gris est une garniture par-dessus, dépensée seulement jusqu’au plancher — pas le plat entier.
Une ligne pour le mode sombre, car le piège s’inverse au lieu de
disparaître : sur une surface sombre, le
texte secondaire devient trop foncé au lieu de trop clair. Un gris comme
#767676 qui passe sur blanc ne donne que ≈4,1:1 sur un fond #121212 et
échoue — sur fond sombre, le texte secondaire doit être éclairci, autour de
#888 ou plus, pour franchir le même plancher.
Comment auditer vos propres gris ?
Alignez-les. Chargez votre palette et faites descendre une ligne de métadonnées le long de l’échelle des gris — regardez le ratio de contraste passer sous 4,5:1 et trouvez le pas exact où « élégamment subtil » devient « impossible à lire ». Repérez cette frontière une seule fois dans vos propres couleurs et chaque futur « rendons-le un peu plus clair » aura une butée qu’il ne pourra pas franchir discrètement.