Tes visuels sont magnifiques : les couleurs sont harmonieuses, la photo d’arrière-plan est sublime, le texte est pertinent. Mais si ton message passe complètement inaperçu, ton visuel n’aura pas l’impact escompté. Dans la majorité des cas, ton message passe à la trappe simplement parce qu’il n’est pas lisible. La lisibilité du texte n’est pas une simple question d’esthétique ; c’est ce qui fait que ton message sera lu et compris. Dans cet article, je te dévoile des astuces concrètes pour que ton texte soit parfaitement lisible, peu importe le support visuel (post Instagram, présentation PowerPoint, etc.).
Pourquoi la lisibilité de ton texte est importante ?
Que ton visuel soit vu sur l’écran d’un smartphone, un ordinateur, ou même une SmartTV, le principe est le même : notre cerveau est un peu paresseux. S’il doit trop travailler pour déchiffrer du texte, il abandonne ! T’assurer que ton texte soit lisible est essentiel pour faciliter la vie de ton audience et t’assurer que ton message soit clair et donne envie d’en savoir plus.
Voici quelques exemples de visuels qui en demandent trop à notre cerveau et que beaucoup de personnes n’auront pas envie de déchiffrer. La lisibilité du texte n’est pas optimale, surtout pour les personnes malvoyantes.
Le contraste : un élément fondamental pour la lisibilité du texte
La première chose à comprendre est que pour que ton texte soit lisible, il doit contraster suffisamment avec l’arrière-plan de ton visuel. Tu peux utiliser toutes les astuces dont je parle dans cet article, mais si le contraste entre ton texte et l’arrière-plan n’est pas assez prononcé, ton texte ne sera pas lisible.
Si ton texte « se fond » dans l’image d’arrière-plan (et ne ressort pas suffisamment), alors ton contraste n’est pas assez prononcé.
Utiliser les couleurs pour créer du contraste
Le noir et blanc pour un contraste maximal
La façon la plus simple de faire ressortir ton texte est d’utiliser des couleurs radicalement opposées. Par exemple, pour un contraste maximal, utilise un texte blanc sur un arrière-plan noir, ou l’inverse.
Les couleurs complémentaires
Une autre technique est de choisir deux couleurs complémentaires (situées à l’opposé sur la roue des couleurs). C’est un excellent point de départ pour créer du contraste tout en maintenant l’harmonie visuelle. Dans l’exemple ci-dessous, j’ai utilisé du jaune pour contraster avec un fond violet.
Tu peux utiliser cet outil Canva pour trouver la couleur complémentaire de n’importe quel code de couleur. Il suffit de :
- D’entrer un code de couleur HEX de la couleur qui t’intéresse ou de sélectionner une couleur sur la roue.
- Choisir « Complémentary » dans la section suivante.
Voici un peu ce que ça donne en combinant ces deux couleurs.
Je te recommande d’éviter les couleurs trop flashy comme les fluos ou le rouge vif, qui sont désagréables pour les yeux.
Les couleurs de ta marque
Si tu veux créer des visuels contrastés avec les couleurs de ta marque, combine une version foncée d’une de tes couleurs avec une couleur neutre ou une variante plus claire d’une autre couleur de ta palette.
Par exemple, voici la palette de ma marque fictive Metropawl.
Si je veux créer un visuel avec un texte super lisible, je peux utiliser le bleu avec le beige clair.
Alternativement, je peux aussi utiliser une version foncée du orange combinée avec mon beige pour un contraste encore plus marqué.
Des outils comme Colorhexa ou Colorbook te permettent de trouver des versions plus claires ou plus foncées de tes couleurs. Par exemple, dans Colorbook, il suffit de saisir le code HEX d’une couleur et le site nous donne plus d’information sur cette couleur.
En prime, tu as les codes HEX de versions plus claires ou plus foncées.
Vérifier le contraste de tes couleurs
Avant de valider tes choix, je recommande toujours de vérifier le contraste avec des outils spécialisés. Personnellement, j’utilise Contrast Checker de Coolors ou celui de Webaim.
Le principe est simple :
- Ajoute les codes couleur de ton arrière-plan et de ton texte
- L’outil analyse le contraste
- Tu obtiens une note pour les petits textes et les grands textes
- Tu veux avoir une note au moins de AA (ou bon), sinon, le contraste n’est pas assez marqué.
Dans l’exemple qui suit, j’ai utilisé l’outil de Coolors pour valider le contraste entre le texte en orange et un arrière-plan blanc. Comme tu peux le voir, le contraste n’est vraiment pas bon.
Le plus de cet outil est que tu peux cliquer sur « click to fix » et lui demander soit d’ajuster la couleur du texte, de l’arrière-plan ou les deux pour qu’il modifie tes couleurs pour obtenir un meilleur contraste.
La seule option dans mon cas de figure est de modifier la couleur du texte. Et une fois que je valide cette option, Coolors me propose cette couleur de texte.
Tu remarqueras que la nouvelle couleur du texte reste dans les mêmes tons que ma couleur orange originale, sauf qu’elle est plus foncée.
Choisir des polices qui maximisent la lisibilité
Le deuxième élément crucial pour améliorer la lisibilité de ton texte est le choix de la police. Comme je l’ai déjà expliqué dans mon guide ultime sur le choix des polices de caractères, les polices les plus lisibles sont celles qui sont simples et épurées, comme les polices serif et sans-serif. Elles sont conçues pour être facilement déchiffrables, même en petite taille.
Voici des exemples sur lesquels tu vois que les polices Serif et Sans Serif sont nettement plus lisibles que les autres.
Je te recommande d’éviter les polices trop fantaisistes comme les polices manuscrites. Si tu dois absolument en utiliser une, réserve-la pour un ou deux mots maximum, jamais pour un paragraphe. Dans l’exemple suivant, j’ai utilisé une police manuscrite pour mettre l’accent sur un mot.
Comment la mise en forme facilite la lecture
La façon dont tu organises ton texte est aussi super importante. Par exemple, voici deux visuels avec exactement les mêmes couleurs et polices mais un texte est plus facile à lire que l’autre.
Voici quelques astuces pour rendre ton texte plus facile à lire.
Aligne ton texte à gauche
Premièrement, si ta langue se lit de gauche à droite, alors aligne ton texte vers la gauche. C’est plus naturel pour ton lecteur. Tu peux à la limite centrer ton texte sauf s’il s’agit d’un texte long car c’est plus fatiguant à lire du texte centré.
Aère ton texte avec un interligne adéquat
Un interligne trop serré (1) peut rendre ton texte illisible, surtout si les lettres se chevauchent. Un interligne trop grand peut aussi poser problème. En général, un interligne entre 1,5 et 1,8 est optimal. Mais je te recommande de toujours faire des tests avec la police de caractères que tu as choisie.
Attention à l’espacement des lettres
Enfin, je veux attirer ton attention sur l’espacement des lettres. Ça comprend essentiellement deux choses :
- L’espace entre deux lettres.
- La justification de ton texte qui impacte l’espace entre les mots (elle est souvent groupée avec l’alignement).
Dans Canva, voici où tu peux trouver ces deux éléments ::
- Évite de justifier ton texte (alignement gauche et droite) car cela crée des espaces inégaux.
- Garde un espacement raisonnable entre les lettres (0 est généralement optimal).
Comment optimiser le texte sur un arrière-plan avec image ?
Beaucoup d’entre nous utilisons des images comme arrière-plan. Cela peut être utile pour contextualiser ton texte, ajouter de l’émotion ou rendre ton visuel plus intéressant, mais cela peut aussi complexifier la lecture.
Lorsque tu utilises une image en arrière-plan, il est en concurrence avec ton texte et bien souvent, c’est l’arrière-plan qui prime et ton texte est moins lisible. Par ailleurs, l’image en arrière-plan peut distraire ton audience ou pire, diluer ton message.
Il faut simplifier ton image de fond au maximum pour guider le lecteur. Plus ton arrière-plan est simple, plus ton texte sera lisible.
Utilise les astuces suivantes pour simplifier autant tes images et vidéos en arrière-plan.
Utilise un fond uni
Je sais que cette section a pour but de t’aider à améliorer la lisibilité du texte positionné sur une image ou une vidéo. Cependant, je voulais que tu comprennes que ton texte sera presque toujours beaucoup plus lisible sur un fond uni que sur une image, surtout si la couleur d’arrière-plan et celle du texte contrastent bien.
Si ton message est très important, je te recommande de le mettre sur un fond uni. Les fonds unis permettent à ton audience de se concentrer uniquement sur le texte.
Les images avec des motifs subtils sont tes amis
L’inconvénient d’utiliser un fond uni est que ton visuel peut paraitre trop simple ou manquer de profondeur. Une solution que j’aime beaucoup c’est de choisir une image de fond avec des motifs subtils. Ça peut être par exemple :
- Un dégradé de couleurs
- Une image avec des éléments simples et harmonieux (nuages, sable, etc.)
- Un fond uni avec des éléments visuels transparents.
Cette technique ajoute de la personnalité à tes visuels sans compromettre la lisibilité du texte.
Réduis la transparence de l’image
Si tu veux absolument utiliser une image, augmente sa transparence pour qu’elle attire moins le regard.
Pour un rendu plus professionnel, je te recommande d’ajouter un premier calque avec la couleur dominante de l’image que tu veux utiliser. Ensuite, positionne ton image et augmente la transparence. Enfin, Tu ajoutes ton texte. Attention, il faut appliquer la transparence sur l’image seulement et non pas sur le texte. Voici à quoi ressemblerais le positionnement de tes éléments dans Canva.
Voici une image avec un calque de fond en blanc comparée à celle avec le calque beige (couleur dominante de l’image). Tu vois que celle avec le calque beige est plus agréable à regarder.
Utilise des filtres et effets sur l’image d’arrière-plan
Tu peux aussi simplifier ton image d’arrière-plan en y appliquant des filtres ou des effets. C’est un excellent moyen de réduire le nombre de couleurs, assombrir, éclaircir ou limiter les distractions sur ton image. Personnellement, j’utilise cette technique essentiellement pour :
- Convertir mon image en noir et blanc.
- Ajouter un effet duotone (Duochromie dans Canva).
- Flouter l’image d’arrière-plan.
Le principe est d’ajouter suffisamment d’effet pour faire ressortir le texte au maximum tout en permettant à ton audience de reconnaitre les éléments de l’image en arrière.
Tu vois sur les exemples suivants que le texte est beaucoup plus lisible quand j’ajoute un effet sur l’image. Bien entendu, n’oublie pas d’ajuster la couleur du texte pour un contraste maximum. Note aussi que mon texte est quand même pas mal sur l’image originale parce qu’elle est quand même sombre.
tipLa façon la plus rapide de convertir une image (ou vidéo) en noir et blanc c’est de réduire la saturation au maximum.
Ajoute un calque entre l’image et le texte
Un rectangle de couleur semi-transparent entre ton image et ton texte peut améliorer considérablement le contraste de ton visuel.
Il suffit d’ajouter un rectangle ou un carré de couleur sombre (ou claire) entre l’image d’arrière-plan et le texte. Le but est d’assombrir ou d’éclaircir l’arrière-plan sans forcément avoir à y ajouter des effets. Ajuste alors l’opacité du rectangle/carré pour que l’image en arrière reste visible.
Positionne ton texte sur la partie la plus épurée de l’image
La dernière astuce que je vais te donner si tu utilises une image en arrière-plan c’est de placer ton texte sur la partie la moins encombrée de ton image. Idéalement, cette partie se trouve dans la partie supérieure afin que ton audience lise le texte en premier comme sur l’exemple suivant. Bien entendu, n’oublie pas de vérifier que la couleur du texte et celle de l’arrière-plan contrastent bien.
Effets de textes pour améliorer la lisibilité
Dans cette partie, je vais me concentrer sur les effets que tu peux ajouter sur tes textes pour le détacher de l’arrière-plan.
Dans Canva, tu retrouveras la plupart de ces effets en sélectionnant du texte et ensuite en allant cliquer sur « Effets ».
L’effet d’ombre
La première façon de séparer ton texte de l’arrière-plan c’est en ajoutant un effet d’ombre. En général, tu obtiens de meilleurs résultats en utilisant une couleur sombre sur le texte de derrière. N’hésite pas aussi à jouer avec la distance, la transparence, l’angle et le flou pour arriver à l’effet souhaité.
Personnellement, au lieu de toujours utiliser le noir sur le texte en arrière, j’aime utiliser une teinte sombre de la couleur dominante de mon image d’arrière-plan. C’est une excellente façon d’obtenir des visuels plus harmonieux.
L’effet arrière-plan
Grâce à lui, on réalise un effet de surlignage en insérant une forme rectangulaire derrière le texte. Dans Canva, on peut même personnaliser l’opacité du rectangle, l’arrondissement des coins et l’espace entre le texte et le rectangle.
Insère une forme entre le texte et l’image
La dernière astuce sur le thème des effets de textes consiste à ajouter un élément (rectangle, cercle, triangle, etc.) entre l’image d’arrière-plan et le texte pour les dissocier visuellement. Cette technique peut aussi servir à accentuer le texte le plus important du visuel sans impacter le reste de l’image.
La structure du texte
La hiérarchie visuelle
Tes lecteurs scannent ton texte, ils ne le lisent pas. Tu dois les guider visuellement pour que ton message soit compris rapidement sinon, ton lecteur est perdu. La hiérarchie visuelle du texte c’est l’agencement stratégique des informations afin que les informations importantes soient mises en valeur par rapport au reste.
Pour hiérarchiser ton texte, tu vas jouer sur :
- Sa taille : Augmente la taille de la police pour mettre l’accent sur l’information importante. Plus la taille du texte est grande, plus l’information est importante.
- Son formatage: Utilise le gras, l’italique ou la couleur pour accentuer les mots importants.
- Son positionnement : Place les informations principales dans la partie supérieure du visuel pour qu’elles soient lues en premier.
- L’espacement : Groupe les éléments qui vont ensemble et augmente l’espace autour d’un texte pour le mettre en valeur.
Si on met ça en pratique, :
- Tu dois d’abord mettre en valeur le message le plus important pour qu’il soit bien lisible. Tu peux le faire en utilisant une police de caractères plus grande, en mettant ce texte en gras et en le positionnant dans la partie supérieure de ton visuel.
- Ensuite, pour le texte explicatif et les points clés, utilise une police plus petite.
- Enfin, tu peux mettre l’information secondaire en plus petit.
La concision
La quantité de texte que tu ajoutes sur tes visuels a aussi un impact sur leur lisibilité. Par conséquent, reste concise. Si ton message est trop long, le visuel sera surchargé et ça risque de décourager ton audience.
Résume le message à retenir sur le visuel et ajoute plus de précisions dans la légende ou le texte accompagnateur.
Tu peux aussi utiliser les listes à puces qui t’obligent à te concentrer sur les points essentiels et rendent ton contenu plus clair et digeste.
Enfin, n’oublie pas d’aérer ton texte avec des paragraphes et des titres introductifs plutôt que des gros blocs de texte. Les paragraphes trop denses rebutent la lecture. Tu peux aussi ajouter des titres clairs pour introduire chaque paragraphe.
Ce qu’il faut retenir
En conclusion, on a vu que la lisibilité de ton texte est cruciale pour communiquer ton message efficacement à ton audience dont la durée d’attention est très courte.
Essentiellement, j’ai partagé des astuces pour t’expliquer comment :
- Utiliser les couleurs pour créer un contraste maximal entre ton texte et ton arrière-plan.
- Le choix de la police peut impacter la lisibilité de ton texte.
- La mise en forme facilite la lecture.
- Altérer tes images et vidéos d’arrière-plan peut faire ressortir ton texte.
- Ajouter des effets pour détacher ton texte de l’arrière-plan.
- Structurer ton texte pour le rendre plus digeste.
Bien entendu, tu peux utiliser ces astuces sur n’importe quel support visuel : posts Instagram, présentations, contenu de ton site internet, newsletter, etc. Pour un maximum d’impact, je te recommande de combiner le maximum de ces astuces lors de la conception de tes visuels. Mais n’oublie pas de tester pour voir celles qui s’appliquent à tes différents cas de figure et t’offrent le meilleur résultat.
Voici un tuto qui te montre comment appliquer certaines de ces techniques en utilisant l’outil gratuit Canva.
