Une seule valeur de couleur : corriger le contraste sans refonte

Le chiffre que demande la norme

Le contraste se mesure comme un ratio entre la luminosité du texte et celle de ce qui se trouve derrière. Noir sur blanc fait 21 pour 1. La norme d'accessibilité demande au moins 4,5 pour 1 pour du texte ordinaire et 3 pour 1 pour du texte grand, c'est-à-dire à partir d'environ 24 pixels, ou 19 pixels en gras.

Le ratio n'est pas une question de goût. Il vient de la recherche sur la différence dont a besoin une personne à la vision modérément réduite pour lire confortablement, et c'est le seuil auquel se réfèrent chaque vérificateur automatique, chaque examinateur de marché public et chaque lettre de réclamation.

Les gris qui passent et ceux qui échouent

Sur un fond blanc, la limite tombe dans une bande étroite. Quelques valeurs, avec leurs ratios :

#999999   2.85 to 1   fails
#949494   2.99 to 1   fails
#8a8a8a   3.45 to 1   passes only as large text
#767676   4.54 to 1   passes
#666666   5.74 to 1   passes
#595959   7.00 to 1   passes the stricter AAA level

Remarquez à quel point les valeurs qui échouent sont proches de celles qui passent. Un thème qui a choisi #999 pour les légendes était à une nuance de la conformité. Personne ne verra la différence côte à côte, et une personne qui lit sur un téléphone en plein air verra le texte pour la première fois.

Pourquoi c'est une seule valeur

Les thèmes et les constructeurs de pages définissent une palette, et le gris clair y figure une fois. Chaque légende, indication de formulaire, ligne de pied de page, date et étiquette secondaire pointe vers cette unique entrée. Changez-la et tout le site change. Sur un thème de blocs, la palette vit dans l'éditeur du site, sous les styles ; sur des thèmes plus anciens, elle est dans le personnalisateur ou dans une feuille de style qu'un développeur maintient.

C'est aussi pourquoi le correctif n'est pas une refonte. Rien ne bouge. Aucune police ne change. Le site a le même aspect pour tout le monde, sauf pour les personnes qui ne pouvaient pas en lire une partie auparavant.

Les couleurs de marque sont l'autre cas

Le bleu ou le vert d'une organisation a généralement été choisi pour un logo, pas pour du texte. Les couleurs de marque claires et vives passent souvent en fond derrière du texte blanc et échouent en texte sur blanc. Notre propre bleu, #1849B8, fait 7,8 pour 1 sur blanc dans les deux sens, ce qui tient autant de la chance que du choix. Vérifiez le vôtre dans les deux sens avant de l'utiliser pour des liens.

Quand une couleur de marque échoue en texte, gardez-la pour les fonds, les boutons et les grands titres, et choisissez un parent plus sombre pour les liens et le texte de taille courante. Deux nuances d'une même teinte se lisent comme une seule marque.

Gardez la hiérarchie, perdez la clarté

Si les designers vont chercher du gris clair, c'est pour faire reculer le texte secondaire. La taille et la graisse font le même travail sans le coût. Une légende à 14 pixels dans un gris qui passe recule largement à côté d'un texte courant de 17 pixels. Corriger le contraste en mettant tout en noir aplatit la page ; le corriger en ajustant une valeur et en faisant confiance à la taille conserve le design.

Le texte indicatif à l'intérieur des champs de formulaire mérite sa propre mention. Les navigateurs l'affichent clair par défaut, et il échoue presque partout. Une étiquette visible au-dessus du champ, que traite la série sur les formulaires, rend le texte indicatif facultatif dès le départ.

Ce que vérifie l'audit gratuit

L'audit gratuit exécute la règle automatique de contraste sur toute la page d'accueil et signale chaque élément en échec avec son ratio mesuré et les couleurs concernées. Une page d'accueil avec trente échecs a généralement une seule cause. Trouvez la valeur partagée, changez-la et relancez le contrôle.