L'accessibilité que personne ne teste : quand votre belle couleur échoue

Il y a une phrase qu'on entend, ou qu'on se dit à soi-même, sur à peu près tous les projets web : « la palette est accessible, les contrastes sont bons ». On la note quelque part, on coche la case, et on passe à la suite. Le problème, c'est que cette phrase ne veut rien dire. Une couleur n'est pas accessible ou inaccessible. Le contraste n'est pas une propriété d'une couleur, c'est une relation entre deux couleurs. Et tant qu'on raisonne couleur par couleur au lieu de paire par paire, on valide tranquillement des choses qui échouent une fois en ligne.

C'est un point de détail en apparence, mais c'est exactement le genre d'endroit où l'accessibilité se perd : pas dans les gros oublis spectaculaires, dans les petites validations faites trop tôt et au mauvais niveau.

Ce qu'un outil de contraste mesure réellement

Quand on dit « cette couleur passe l'accessibilité », on imagine souvent qu'on a soumis un code hexadécimal à un outil et qu'il a répondu vert. C'est à moitié vrai. Un outil de contraste ne note jamais une couleur seule. Il note toujours un couple : une couleur de texte sur une couleur de fond. Le chiffre qu'il renvoie, le fameux ratio, mesure l'écart de luminance entre les deux.

Le standard de référence, WCAG, fixe les seuils du niveau AA, celui que vise la plupart des projets sérieux : au moins 4,5:1 pour du texte courant, 3:1 pour du grand texte (gros et gras, à partir d'environ 24px, ou 18,5px en gras). Ce ratio s'étend de 1:1 (deux couleurs identiques, contraste nul) à 21:1 (noir pur sur blanc pur).

Un détail qui a son importance : ces seuils sont stricts, sans arrondi. Le W3C le précise noir sur blanc, un ratio calculé de 4,499:1 ne satisfait pas le seuil de 4,5:1. Autrement dit, un texte à 4,45:1 échoue, même s'il n'en est qu'à un cheveu. C'est exactement le genre de cas qu'on laisse passer en se disant « c'est presque bon ».

Tout est dans le mot « sur ». Changez le fond, et le même texte change de ratio. Une couleur n'a donc pas un score d'accessibilité. Elle a autant de scores qu'elle a de fonds possibles. Valider une couleur dans l'absolu revient à dire qu'une clé « ouvre les portes » : elle ouvre une porte.

Un exemple concret

Prenons une couleur qu'on retrouve dans beaucoup de palettes : un gris clair, discret, parfait pour les informations secondaires (dates, légendes, mentions). Disons #A8A29E.

Sur un fond sombre, presque noir, ce gris fonctionne très bien. Le ratio dépasse 6:1, très au-dessus du seuil AA. Lisible sans peser, c'est le rôle qu'on attend d'un texte d'appoint qui ne doit pas voler la vedette au contenu principal.

Le réflexe naturel, ensuite, c'est de le réutiliser pour les mêmes informations secondaires sur des pages au fond clair, un crème par exemple (#F5F0E8). Même rôle, même intention, même couleur. Sauf que sur ce fond, le ratio de ce gris tombe à 2,2:1. En dessous du minimum AA pour du texte courant. La date de l'article est là, jolie, parfaitement cohérente avec le reste, et difficile à lire pour une partie des visiteurs (vision faible, écran en plein soleil, daltonisme qui réduit la perception des écarts).

Voici les deux couples côte à côte. Le ratio affiché sous chaque échantillon n'est pas écrit à la main : il est recalculé à partir des deux couleurs, exactement comme le ferait un outil d'audit.

La couleur n'a pas changé. Le rôle non plus. Seul le fond a changé, et ça a suffi à faire basculer la lisibilité du bon côté au mauvais. Sur le fond clair, il faut un gris plus soutenu, par exemple #6B6560, qui retrouve un ratio confortable. Il n'y a là ni couleur bonne ni couleur mauvaise, juste des couples dont certains tiennent la route et d'autres non.

Le deuxième exemple est instructif : l'ocre est une couleur de marque, choisie pour son caractère, et elle ne passe pas en texte courant sur crème. Il y a une nuance à connaître ici : WCAG exempte bien le logo et le nom de marque eux-mêmes de toute exigence de contraste. Mais cette exemption s'arrête là. Dès que la couleur de marque sert à du texte courant, un intertitre, une légende, un lien, elle redevient soumise au seuil comme n'importe quelle autre couleur. Être « la couleur de la marque » n'est un passe-droit que pour le logo, pas pour le reste de la page.

Pourquoi l'erreur est si facile à commettre

Cette confusion vient en grande partie de la façon dont on pense, et dont on nomme, les couleurs, selon qu'on est plutôt côté création ou côté intégration.

Côté design, on pense une couleur par son apparence et son intention. « Le gris discret pour les infos secondaires. » C'est une pensée d'objet : la couleur existe, elle a un caractère, on la pose là où ce caractère convient. Dans cette logique, « est-ce qu'elle est accessible ? » appelle une réponse simple, oui ou non, qu'on classe une fois pour toutes.

Côté intégration, la couleur n'existe jamais seule. Elle est toujours posée sur quelque chose. On voit le couple avant de revoir la couleur. C'est là, en assemblant les pages, qu'on s'aperçoit que le même rôle de texte atterrit sur trois fonds différents, et que l'un des trois ne passe pas.

Aucune des deux approches n'a tort. Elles regardent le même objet à deux moments différents : la décision, puis la relation concrète à l'écran. Le ratio de contraste, lui, n'existe qu'au second moment. C'est pour ça qu'un contrôle fait uniquement sur la palette, hors contexte, rate systématiquement une partie des problèmes : il valide des décisions, pas des relations. Que le design et l'intégration soient faits par deux personnes ou par la même ne change rien à l'affaire ; c'est le moment de la vérification qui compte, pas le nombre de mains.

La bonne pratique : documenter des paires, pas des couleurs

La solution n'est pas de devenir expert en luminance relative, ni de remettre en cause sa palette à chaque page. Elle est de déplacer ce qu'on documente : on arrête de documenter des couleurs isolées, on documente des paires autorisées.

Quelques principes simples, qui tiennent en quelques minutes :

• Attacher le contexte à la couleur. Au lieu de « gris secondaire : #A8A29E », écrire « gris secondaire : autorisé sur fonds sombres, interdit sur crème ». Le token porte sa propre limite, et la règle survit à celui qui l'a posée.
• Lister les fonds réels du projet. Un site n'a presque jamais trente fonds. Il en a trois ou quatre : un sombre, un clair, peut-être une couleur d'accent. Vérifier chaque couleur de texte contre chacun de ces fonds fait apparaître tous les couples interdits d'un coup.
• Vérifier dès la maquette, quand corriger une couleur ne coûte encore rien. Découvert à la recette, le même problème oblige à retoucher une palette déjà déployée partout.
• Se méfier des couleurs « de marque ». Une couleur de marque, de section ou de saison ne garantit aucun contraste par défaut. Être « la couleur de la marque » ne donne aucun passe-droit sur la lisibilité ; chaque usage sur du texte se revérifie.

Il faut aussi accepter une chose un peu frustrante : parfois, la paire la plus jolie ne passe pas. Un gris clair sur crème est visuellement plus délicat, plus aéré, qu'un gris soutenu. Mais il exclut une partie des lecteurs. À ce moment-là, l'accessibilité cesse d'être une contrainte technique qu'on coche pour devenir un arbitrage de design, qu'on tranche en connaissance de cause.

Une limite à connaître : le seuil n'est pas parfait

Soyons honnête sur l'outil lui-même. Le calcul de contraste de WCAG 2 est ancien, et il a un défaut de fond : il mesure un écart mathématique brut entre deux luminances, sans modéliser la façon dont l'œil perçoit réellement la lumière. Résultat, il se trompe dans les deux sens. Du texte blanc sur un orange vif, parfaitement lisible, peut échouer au test ; à l'inverse, certains textes clairs sur fond sombre sont jugés conformes alors qu'ils sont fatigants à lire.

C'est pour ça qu'un nouvel algorithme, APCA (Accessible Perceptual Contrast Algorithm), est en préparation pour WCAG 3. Il ne raisonne plus en ratio mais en « légèreté perçue » (un score Lc), et prend en compte la graisse et la taille de la police, ce que le ratio ignore complètement.

Ce qu'il faut retenir

« Conforme AA » n'est pas un label qu'on colle à une couleur. C'est le résultat d'un calcul entre deux couleurs, qui n'existe que dans un contexte précis. Une couleur validée sur un fond peut échouer sur un autre sans que personne ne s'en aperçoive, parce que la case avait été cochée trop tôt et au mauvais niveau.

Vérifier, et pour aller plus loin

Pour mesurer un couple, le vérificateur de contraste de WebAIM est l'outil de référence : on lui donne deux couleurs, il renvoie le ratio et le verdict AA/AAA. C'est lui qui sert d'étalon (et qui m'a servi à vérifier les chiffres de cet article).

Côté norme, deux points d'entrée :

• WCAG 2.2, la recommandation du W3C, et surtout sa page Understanding 1.4.3 : Contrast (Minimum), qui explique le seuil, les exceptions et la règle du non-arrondi.
• En France, le RGAA, le référentiel légal, dont le critère 3.2 reprend ce seuil de contraste. C'est lui qui fait foi pour la conformité d'un site public.

Le reste, c'est de la discipline : vérifier tôt, vérifier des paires, et résister à l'envie d'arrondir.