Traiter le contraste comme une décision de produit

Une interface peut être soignée et rester difficile à lire. Le gris clair sur blanc, le texte posé sur une photo, le bouton dont seul le contour change au survol : ces choix se prennent souvent en fin de maquette, comme un goût. Ce sont des décisions de produit. Elles disent qui peut utiliser l'écran dans une pièce lumineuse, sur un portable moyen, sans plisser les yeux ni deviner où cliquer. Avant de débattre de l'élégance d'une teinte, mesurez. Le chiffre ne remplace pas le jugement, mais il empêche qu'un goût non dit devienne un obstacle que vous ne voyez plus, parce que vous connaissez déjà l'écran par cœur.

Vous pouvez faire ce travail cette semaine sans refondre l'identité. Prenez les écrans que les gens utilisent vraiment : la page d'accueil, le formulaire le plus fréquent, un message d'erreur, un état vide. Relevez les paires texte et fond, et les éléments qui montrent où agir. Comparez-les à un seuil public, notez les échecs, et corrigez d'abord ceux qui portent une information. Un contraste suffisant n'est pas une décoration ajoutée à la fin. C'est une condition pour que le reste de l'interface, le ton, la marque, la mise en page, ait une chance d'être lu.

Cas : un bouton gris que personne ne voit sur un écran de bureau

Le bouton « Envoyer » est gris clair sur fond blanc. Il passe sur l’écran de Leila, calibré et lumineux. Sur l’écran du bureau, plus ancien, il disparaît. Vous ne discutez pas du goût. Vous mesurez le couple de couleurs avec l’outil de contraste du navigateur. Le texte du bouton est à 2,4 pour 1. Le seuil que vous vous êtes fixé pour un composant est 3 pour 1, et 4,5 pour 1 pour le texte courant. Vous foncez le bouton jusqu’à dépasser 3 pour 1, vous vérifiez le survol, et vous notez les deux valeurs dans le fichier du composant. La décision est chiffrée. Elle ne dépend plus de l’écran de la personne qui a dessiné le bouton.

Modèle à copier : les trois seuils à noter

Ce sont les seuils publics des WCAG 2.2, pas une mesure faite chez nous. Vous les reportez sur vos propres couleurs, avec l’outil de contraste du navigateur.

• Texte courant : au moins 4,5 pour 1.
• Grand texte (à partir d’environ 24 pixels, ou 19 pixels en gras) : au moins 3 pour 1.
• Composant et contour : au moins 3 pour 1.
• À écrire dans le fichier du composant : la paire, les deux valeurs, la date.

Mesurer avant de discuter du goût

Le critère public le plus utile, ici, est celui du contraste minimum dans les WCAG, les règles d'accessibilité des contenus web publiées par le W3C. Dans la version 2.2, le critère 1.4.3 demande un rapport d'au moins 4,5 pour 1 entre le texte courant et son fond. Le grand texte, défini comme au moins 18 points, ou 14 points en gras, peut descendre à 3 pour 1. Le critère 1.4.11 demande aussi 3 pour 1 pour l'information visuelle qui permet d'identifier un composant d'interface ou un objet graphique essentiel, contre les couleurs adjacentes. Ce ne sont pas des slogans de produit. Ce sont des seuils de méthode, faits pour être calculés.

Mesurez la couleur réellement affichée, pas la pastille de la charte. Une teinte à 80 % d'opacité sur un fond coloré n'a plus la valeur du nuancier. Un dégradé change le rapport selon l'endroit où le texte se pose. Un mode sombre mal recopié depuis le mode clair inverse parfois les rôles sans refaire le calcul. Utilisez un outil de mesure du rapport de contraste, relevez le premier plan et l'arrière-plan au pixel, et notez le chiffre à côté de la paire. Si deux personnes de l'équipe ne trouvent pas le même résultat, vous n'avez pas mesuré le même pixel. Recommencez sur une capture de l'écran construit, pas sur le symbole de couleur dans l'outil de dessin.

• Texte courant : visez au moins 4,5 pour 1, seuil du critère WCAG 2.2 1.4.3.
• Grand texte, au moins 18 points ou 14 points en gras : le même critère permet 3 pour 1.
• Composants et objets graphiques porteurs de sens : critère 1.4.11, au moins 3 pour 1.
• Mesurez le pixel affiché, pas la pastille du nuancier ni une couleur avec opacité oubliée.

Séparer le texte courant, le grand texte et les composants

Tout ne se juge pas au même seuil, et c'est précisément pour cela qu'il faut nommer le rôle avant la couleur. Un titre très grand n'a pas la même exigence qu'une mention légale en douze pixels. Un bouton dont le texte est lisible peut quand même échouer si son contour, seul indice de la zone cliquable, disparaît sur le fond. Classez ce que vous voyez en trois piles : texte courant, grand texte, composants. Pour chaque pile, appliquez le seuil qui lui correspond, puis écrivez le résultat. « Ça passe à peu près » n'est pas un résultat. « Corps de texte, 4,2 pour 1, en dessous de 4,5 » en est un, et il indique le geste suivant.

Attention aux exceptions, pour ne pas les élargir. Les WCAG laissent de côté, dans le critère 1.4.3, le texte purement décoratif, le texte qui fait partie d'une image sans rôle informatif, et les logotypes. Un slogan devenu image, une légende de graphique, un prix, une erreur de formulaire n'entrent pas dans ces exceptions. Si l'utilisateur doit lire le mot pour agir ou pour comprendre, traitez-le comme du texte. De même, un logo peut rester tel quel, mais le nom du produit réécrit à côté, en petit et en gris, non. L'exception est étroite. Quand vous hésitez, mesurez. L'hésitation veut dire que quelqu'un devra lire. En cas de doute sur un prix, une date ou une erreur, classez le texte avec le texte courant et visez 4,5 pour 1.

Contrôler les états, pas seulement la page au repos

La page au repos est le cas le plus flatteur. Le travail réel est dans les états. Le survol qui éclaircit un texte déjà limite, le contour clavier qui se contente d'un halo trop pâle, le champ désactivé qui devient illisible, l'indication grisée qui sert de mode d'emploi, l'erreur écrite en rouge clair sur blanc. Chacun de ces états est une interface à part. Parcourez un formulaire de bout en bout au clavier. Relevez la couleur du contour clavier. S'il n'est visible que parce que vous savez où regarder, il ne compte pas. Le critère 1.4.11 sert ici : l'indice qui montre qu'un composant est là, ou qu'il est au clavier, a besoin de 3 pour 1 contre l'adjacent, sauf cas particuliers prévus par le critère.

Ne compensez pas un contraste faible par une information portée seulement par la couleur. Un champ en erreur qui devient rouge, sans icône, sans texte, sans bordure renforcée, échoue deux fois : pour qui perçoit mal cette teinte, et souvent au soleil. Ajoutez une phrase. Le rouge peut rester, comme renfort, pas comme seul canal. Faites le même test pour les graphiques simples : une courbe et une autre ne peuvent pas se distinguer uniquement par deux teintes proches. Un motif, une étiquette directe ou une différence de luminance règle le problème sans ajouter une légende que personne ne relie aux lignes. Notez les états dans la même liste que les couleurs de base. Un système qui ne documente que le repos documente une démo.

1. Relevez repos, survol, clavier, erreur et désactivé pour chaque composant fréquent.
2. Vérifiez le contour au clavier, pas seulement à la souris.
3. Refusez l'indication grisée comme seule consigne : elle disparaît et elle est souvent trop claire.
4. Ajoutez un texte ou une icône quand la couleur est le seul signe d'un état.

Choisir des paires que vous pourrez tenir

Un rapport mesuré une fois sur une maquette ne survit pas si chaque écran invente sa nuance de gris. Choisissez un petit nombre de paires autorisées : encre sur fond, encre atténuée qui passe encore 4,5 pour 1, couleur d'action sur fond, couleur d'action avec son texte. Écrivez les valeurs et le rapport à côté. Interdisez, par une phrase simple, les gris « un cran plus clairs » sortis au feeling. Si une paire ne passe pas, ne la gardez pas « pour les légendes ». Les légendes se lisent. Soit vous foncez l'encre, soit vous foncez le fond, soit vous augmentez la taille et le poids jusqu'au régime du grand texte, et vous l'assumez. Trois options, pas une discussion infinie.

Tenez compte du thème. Si vous proposez un mode sombre, les paires se redéfinissent. Un blanc pur sur un noir pur peut respecter le chiffre et vibrer à la lecture. Vous pouvez reculer légèrement l'un des deux, puis remesurer, plutôt que de copier les codes du mode clair en les inversant. Vérifiez aussi les liens dans un paragraphe : la couleur du lien doit rester distincte du texte autour, et le lien doit avoir un autre indice que la couleur, en général un soulignement, surtout dans un texte courant. Un lien seulement plus clair, au milieu d'une phrase, est une devinette. Mettez ces paires dans le fichier que vous ouvrez vraiment quand vous dessinez, pas dans une planche que personne ne consulte.

Refuser les compensations qui ne tiennent pas

Certaines astuces donnent bonne conscience et ne règlent pas le rapport. Baisser l'opacité du texte pour « l'intégrer » au fond diminue le contraste, même si la teinte de départ était correcte. Poser une ombre portée floue sous des lettres fines améliore parfois la photo et échoue souvent à la mesure, parce que l'ombre n'est pas un fond. Réduire la graisse pour faire plus élégant peut faire passer un titre du régime grand texte à celui du texte courant, donc de 3 pour 1 à 4,5 pour 1, sans que vous ayez changé la couleur. Le seuil a bougé parce que le rôle a bougé. Remesurez après chaque changement de taille, de poids ou d'opacité.

Méfiez-vous aussi du texte en image. Une fois rastérisé, il ne se redimensionne plus avec les réglages de l'utilisateur, et vous ne pouvez plus le sélectionner. Si vous devez vraiment l'incruster, vérifiez le rapport sur l'image finale exportée, à la taille d'affichage, pas dans le fichier source agrandi. Mieux : gardez le texte en vrai texte, par-dessus. Vous pourrez corriger une coquille sans réexporter, et le contraste restera celui de la paire que vous avez autorisée. Une ombre ou un aplat semi-transparent derrière les lettres peut aider sur une photo, à condition de mesurer le pire endroit, là où le fond de la photo est le plus proche de la couleur du texte. Le meilleur endroit de l'image n'est pas la mesure.

Vérifier les photos, les dégradés et les fonds colorés

Le texte sur une photographie est le cas qui casse les chartes les plus propres. La photo change, le texte reste, et le rapport s'effondre sur un ciel clair ou sur une joue. Si le message compte, donnez-lui un fond stable : une bande pleine, une zone réservée dans le cadrage, ou un recadrage qui laisse le sujet d'un côté et le texte de l'autre. Un voile noir uniforme à faible opacité rassure dans la maquette et rate souvent le seuil une fois le texte posé en petit. Augmentez le voile jusqu'à la mesure, ou abandonnez le texte incrusté. Dire « on gardera une zone calme dans les photos » est une règle de production, pas une option artistique. La personne qui choisit l'image doit la connaître.

Les dégradés demandent la même honnêteté. Mesurez les deux extrémités et le point où le texte est le plus long. Si une seule extrémité passe, le dégradé ne passe pas. Les bandes de couleur de marque, très saturées, aiment les textes blancs qui ne tiennent pas, surtout en orange, en jaune et en vert clair. Dans ce cas, le texte sombre sur la bande claire est souvent la voie simple, ou une bande plus foncée réservée au texte. N'éclaircissez pas le texte « pour que ce soit doux ». La douceur qui empêche de lire le prix, la date ou le bouton principal est une perte de produit. Faites l'essai dehors, ou près d'une fenêtre, sur l'appareil le plus moyen que vous ayez. Le rendu de votre écran calibré n'est pas celui du lecteur.

Inscrire la décision dans le produit

Une correction locale sera recouverte à la prochaine maquette si elle n'est écrite nulle part. Ajoutez les paires autorisées là où les couleurs se prennent : variables, styles de texte, composants. Nommez-les par leur rôle, pas par leur teinte. Encre, encre douce, fond, action. À côté, le rapport mesuré et la date. Quand quelqu'un propose une nouvelle teinte, la question n'est pas « est-ce plus fin ? ». C'est « quelle paire remplace-t-elle, et le seuil tient-il encore pour le texte courant et pour le composant ? ». Une teinte qui ne sert à aucun rôle n'entre pas. Vous évitez ainsi la dérive des gris, un par écran, que plus personne ne sait comparer.

Prévoyez une revue courte quand le produit change de fond, de typographie ou de thème. Le jour où vous changez de police, remesurez : un dessin plus fin peut rester au-dessus du chiffre et devenir plus dur à lire, et l'inverse existe aussi. Le chiffre est un plancher de méthode, pas une preuve que tout le monde lira confortablement, ni un certificat. Les WCAG prévoient d'ailleurs un niveau plus exigeant, le critère 1.4.6, à 7 pour 1 pour le texte courant, si vous choisissez de viser plus haut sur quelques écrans critiques. Vous pouvez le réserver au texte long, sans l'imposer à chaque légende. Écrivez ce choix. Une décision tue vaut mieux qu'une conformité supposée.

Cette semaine, mesurez trois écrans réels et corrigez la paire qui échoue sur le texte courant. Écrivez le chiffre à côté de la couleur. La prochaine discussion de goût aura enfin un sol.