Un visuel soigné peut pourtant passer inaperçu, et la cause tient parfois à sa lisibilité plutôt qu’à sa créativité. Un design system accessible, c’est-à-dire un ensemble de règles sur les couleurs, les typographies, les gabarits et les hiérarchies, permet de préserver l’identité de la marque tout en garantissant que chaque publication se lit, se comprend et se retient. Voici les principaux repères.
Pourquoi la lisibilité sur mobile est-elle devenue un enjeu de marque ?
Selon Médiamétrie, le smartphone concentre 80 % du temps de navigation sur mobile, et les réseaux sociaux représentent 39 % du temps de navigation quotidien. Un visuel est donc vu sur un écran de quelques centimètres, pendant quelques secondes.
L’étude Homère recense 1,7 million de Français concernés par une déficience visuelle. À cela s’ajoute le daltonisme : en France, 8 % des hommes sont concernés. Ce public représente une part réelle de l’audience.
Pour mesurer la lisibilité, les recommandations internationales d’accessibilité (WCAG) fixent un rapport de contraste minimal de 4,5:1 pour un texte courant, et de 3:1 pour les grands textes, les pictogrammes et les éléments graphiques importants. Un outil de vérification de contraste donne la réponse en dix secondes.
Les visuels complexes posent le plus de difficultés, car un texte posé sur une photo change de contraste selon la zone de l’image. Plusieurs solutions sont proposées : ajouter un aplat semi-transparent sous le texte, appliquer un dégradé de la couleur de marque vers la zone de texte, réserver une zone calme de l’image au message ou choisir des photos avec un espace dégagé dès la prise de vue. Si la couleur de marque ne passe pas le test, elle peut rester un élément décoratif, pendant que le texte utilise une teinte plus foncée ou plus claire de la même famille.
Quelle typographie choisir pour une lecture confortable sur smartphone ?
Il faut penser mobile d’abord. Pour un visuel de 1 080 pixels de large, un corps de texte d’au moins 40 pixels est visé, et les titres peuvent monter à 70 ou 80 pixels. Les polices sans empattement aux formes ouvertes sont à privilégier, les polices script ou très décoratives étant réservées à un mot-clé isolé. Évitez les graisses fines, qui s’effacent au soleil.
L’interlignage conseillé est de 1,4 à 1,5 fois la taille du texte, avec un alignement à gauche, car le texte centré sur plusieurs lignes fatigue, surtout pour les personnes dyslexiques. Limitez les majuscules et les italiques à quelques mots, et ne dépassez pas trois ou quatre lignes par bloc.
Lorsque le pouce défile rapidement, le visuel dispose de trois secondes seulement. Il doit donc répondre dans l’ordre à quatre questions : de quoi il parle, quel est le message, pourquoi y croire et que faire ensuite. Pour les personnes qui ne voient pas l’image, un texte alternatif reprenant l’essentiel du message, ainsi qu’une information clé placée dans la légende, permet à un lecteur d’écran, logiciel qui lit le contenu à voix haute, de le restituer.
Votre design tient-il dans toutes les situations ?
Une règle écrite dans un document est vite oubliée, alors qu’un modèle prêt à l’emploi est utilisé par tous. Pour les carrousels, il est recommandé d’avoir un titre par slide, un fond uni, un numéro de page visible et un dernier écran dédié à l’appel à l’action. Pour les stories, les textes importants doivent rester à l’écart des zones du haut et du bas, souvent masquées par l’interface de l’application.
Quelques vérifications complètent cette démarche. Une information ne doit jamais passer par la couleur seule : un « en stock » en vert et un « épuisé » en rouge sont illisibles pour une personne daltonienne, et il faut ajouter une icône, une étiquette ou un motif. Il faut aussi tester le mode sombre, car un logo noir sur fond transparent disparaît sur fond noir. Enfin, le visuel doit être affiché à la taille d’une vignette de fil d’actualité, puis testé à la luminosité maximale comme minimale de l’écran.
Product offers are temporarily unavailable.
