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 vient de la recherche sur la différence dont a besoin une personne à la vision modérément réduite pour lire confortablement. C'est le chiffre qu'utilisent 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 remarquera le changement côte à côte. Une personne qui lit sur un téléphone en plein air pourra lire ces légendes 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 se trouve dans l'éditeur du site, sous 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 ce n'est pas une refonte. Rien ne bouge et 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é

Les designers utilisent le gris clair pour mettre le texte secondaire en retrait. La taille et la graisse font le même travail sans gêner la lecture. Une légende de 14 pixels dans un gris qui passe reste en retrait à côté d'un texte courant de 17 pixels.

Tout mettre en noir pour corriger le contraste aplatit la page. Ajuster une valeur et laisser la taille porter la hiérarchie conserve le design.

Le texte indicatif à l'intérieur des champs de formulaire échoue aussi. Les navigateurs l'affichent clair par défaut, et il échoue presque partout. Si chaque champ a une étiquette visible au-dessus (la série sur les formulaires en parle), le texte indicatif devient inutile.

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.