Le seuil de contraste des couleurs qu'impose le WCAG
Est-ce que votre logo reste lisible si quelqu'un le regarde sur un écran allumé à moitié, ou imprimé sous une lumière blafarde au fond d'une salle ? Cette question d'accessibilité visuelle, je ne me la posais jamais avant de m'intéresser sérieusement au design de logo : je choisissais mes teintes à l'instinct, sans vérifier le contraste des couleurs, convaincue qu'une bonne théorie des couleurs suffisait à garantir la lisibilité.
La réponse tient en deux chiffres, ceux du niveau AA des critères WCAG (Web Content Accessibility Guidelines) : un ratio de contraste d'au moins 4.5:1 pour un texte de taille normale, et 3:1 pour les éléments graphiques comme les formes ou les icônes d'un logo. Le contraste se mesure sur une échelle de 1:1, blanc sur blanc, à 21:1, noir pur sur blanc pur. En dessous de 3:1, une forme se noie dans son fond ; en dessous de 4.5:1, un nom de marque écrit en petit devient un exercice de devinette.
J'ai découvert ces chiffres après une déconvenue avec un vert sauge et un rose poudré que je trouvais magnifiques à l'écran, mais qui disparaissaient complètement sur une affiche imprimée en test à la bibliothèque Villon, à Rouen, sous l'éclairage blafard des tables de lecture. En trois ans à bricoler des logos pour mes projets et pour des gens autour de moi, je n'avais jamais pris le temps de vérifier ce genre de détail sérieusement avant cet épisode.
Depuis, j'ouvre systématiquement l'ancien et le nouveau fichier côte à côte avant d'envoyer quoi que ce soit à quelqu'un, et je n'ai plus cette gêne au moment de montrer la version finale.
Pourquoi mon vérificateur de contraste a tout recalé
Un vérificateur de contraste en ligne ne fait aucune concession : j'ai passé mes logos récents dedans et j'ai vu une série de mentions « Fail » s'afficher en rouge, alors que je pensais avoir l'œil. Mon mélange de bleu ciel et de gris clair ? Échec total. Un orange vif sur fond blanc ? Limite pour du texte, mais acceptable pour une forme.
Passer un logo en noir et blanc reste le test le plus brutal : si les couleurs se transforment en une masse grise uniforme, illisible, c'est que rien ne repose sur un vrai écart de luminosité, seulement sur une différence de teinte. Ça compte, parce qu'environ 8% des hommes vivent avec une forme de daltonisme, soit à peu près un homme sur douze qui ne verra jamais les nuances qu'on a mis des heures à choisir.
Corriger ça demande rarement de tout recommencer : foncer un bleu de quelques pourcents ou éclaircir un fond suffit souvent à faire basculer un logo de l'échec à un résultat qui tient debout. C'est une étape que j'ai fini par intégrer à mes étapes pour refaire son logo de boutique sans tout gâcher, parce que le contraste est ce qui fait tenir une identité visuelle dans le temps, bien plus qu'un choix de teinte à la mode.
Luce Pérard, ma voisine qui fabrique des confitures artisanales, a longtemps traité mes remarques sur ses étiquettes roses trop pâles comme de simples suggestions, avant d'adopter toutes les corrections d'un coup, le jour où elle a vu ses pots se fondre dans l'étagère d'une épicerie mal éclairée.
Faut-il viser le contraste maximal de 21:1 ?
Non, pas systématiquement, et c'est plutôt contre-intuitif. Un contraste de 21:1, noir pur sur blanc pur, semble être l'objectif ultime, mais sur un écran rétroéclairé très lumineux, ce maximum peut provoquer une fatigue visuelle ou un effet de halo, cette irradiation lumineuse autour des lettres qui gêne particulièrement les personnes astigmates ou dyslexiques.
Beaucoup de personnes qui font du design préfèrent donc un gris très foncé, un #1A1A1A par exemple, plutôt qu'un noir pur #000000 sur fond blanc. La nuance semble minime sur le papier, mais elle change la façon dont un logo se comporte à l'usage, sur un écran de smartphone en plein soleil comme dans une pièce sombre.
Le vrai travail consiste à jongler entre deux contraintes : assez de contraste pour rester lisible, pas assez pour devenir agressif à l'œil. Une comparaison qui revient souvent dans mes carnets : c'est un peu comme doser le sel dans un plat, il en faut, mais le plat devient immangeable si on en met trop.
Ma routine pour tester un logo sans y passer la nuit
Une routine courte suffit, et je m'y tiens à chaque projet. Le passage en noir et blanc vient en premier : si les formes ne se détachent plus, je retouche la luminosité avant de toucher à autre chose. Ensuite, je copie les codes hexadécimaux du fond et du logo dans un vérificateur WCAG, pour avoir un chiffre plutôt qu'une impression.
Le test du flou vient juste après : je floute légèrement le logo à l'écran, et si la forme générale ou le nom disparaissent, le contraste est trop faible pour tenir la route. Ce test, je le fais souvent tard, une tasse de café refroidi depuis la veille oubliée à côté du clavier, et curieusement, c'est dans cet état de fatigue que les défauts de contraste sautent le plus aux yeux.
En tout petit format, comme sur une icône de favori dans un navigateur, deux ou trois pixels de différence suffisent à transformer un logo net en tache floue. Ça vaut le coup d'aller vérifier si votre logo est lisible en petite taille sur mobile avant de considérer un fichier comme terminé.
Quelles sont les autres questions qu'on me pose le plus souvent ?
On me demande souvent si le choix de la police compte autant que la couleur pour la lisibilité. Clairement oui, mais c'est un sujet à part entière, et j'en ai fait les frais le jour où j'ai mélangé cinq polices différentes sur un même logo en pensant que ça ferait plus original : le résultat était un fouillis que j'ai dû reprendre de zéro. Construire une palette de couleurs qui tient debout est une autre question complète, tout comme savoir dans quel format vectoriel garder son fichier final pour ne pas perdre en netteté au moment d'imprimer ou d'agrandir.
D'autres questions reviennent sur les proportions entre les éléments d'un logo, sur ce qui pousse à revoir une version après plusieurs essais, ou sur la manière de cadrer un projet avec un brief créatif avant même d'ouvrir un logiciel, sans parler du logiciel gratuit à choisir quand on débute, qui mérite sa propre réponse.
Le vocabulaire du design de logo, avec des termes comme « ratio de contraste » ou « grille de construction », peut vite devenir un mur pour quelqu'un qui débute, et j'y reviendrai un jour en détail. Travailler en noir et blanc avant d'ajouter la couleur est une habitude qui mériterait son propre carnet, tout comme l'usage d'une grille de construction pour équilibrer les proportions, ou la nécessité de décliner un logo pour chaque support sans perdre en lisibilité au passage. Jouer avec l'espace négatif pour cacher une seconde forme dans le fond relève d'une autre technique, tout comme choisir une forme pour ce qu'elle évoque plutôt que pour son seul rendu esthétique. Une fois les bonnes couleurs validées, les noter dans une charte graphique simplifiée évite de refaire ces vérifications à chaque nouveau support.
Lisette Arnoux, qui tient la librairie où j'ai fait mon tout premier vrai projet de logo, ne donne jamais son avis définitif le soir même : elle regarde toujours une maquette une seconde fois le lendemain matin, à la lumière du jour, avant de se prononcer, et c'est sans doute le réflexe le plus simple à copier. Si un logo doit encore convaincre à un autre moment de la journée, sous un autre éclairage, en noir et blanc et en tout petit format, alors le contraste est réglé ; sinon, il reste du travail avant de l'envoyer où que ce soit.