Texte lisible sur une image : rapport de contraste et règles

Un texte posé sur une image est lisible lorsque la différence de luminosité entre la couleur de ses lettres et le fond situé juste derrière est suffisante. Cette différence se mesure par le rapport de contraste. Les règles d’accessibilité du web, les WCAG, recommandent au moins 4,5:1 pour le texte normal et au moins 3:1 pour le grand texte. La difficulté sur une image, c’est que le fond n’est pas d’une seule couleur : le rapport doit donc être évalué sur la zone la plus défavorable sous le texte.

Cet article explique comment se calcule le rapport de contraste, ce que signifient les seuils, comment mesurer sur un fond varié, quelles techniques améliorent la lisibilité et quelles erreurs sont fréquentes. Dans la dernière partie, vous verrez comment Design Studio chez Yeşilçam Studios applique la même mesure.

Qu’est-ce que le rapport de contraste et comment se calcule-t-il ?

Le rapport de contraste WCAG repose sur la luminance relative de deux couleurs. La luminance relative exprime la clarté perçue par l’œil des composantes rouge, verte et bleue d’une couleur, de 0 (noir) à 1 (blanc). Comme l’œil est le plus sensible au vert et le moins sensible au bleu, les composantes ne pèsent pas de la même façon : le vert compte pour environ 72 %, le rouge pour 21 % et le bleu pour 7 %.

Le rapport se calcule ainsi : ajoutez 0,05 à la luminance de la couleur la plus claire, ajoutez 0,05 à la luminance de la couleur la plus foncée, puis divisez le premier résultat par le second. On obtient une valeur de 1:1 (la même couleur) à 21:1 (blanc sur noir). La teinte seule ne crée pas de contraste ; un rouge et un vert de même luminance peuvent sembler vifs côte à côte mais restent difficiles à lire en texte.

Que signifient les seuils de 4,5:1 et de 3:1 ?

Cas	Rapport minimal (AA)	Niveau renforcé (AAA)
Texte normal	4,5:1	7:1
Grand texte (environ 18 points et plus, ou 14 points en gras)	3:1	4,5:1
Composants d’interface et graphiques porteurs de sens	3:1	Non défini

Les seuils ont été écrits pour le web, mais leur logique vaut aussi pour l’impression et les visuels des réseaux sociaux. Le grand texte se lit avec un rapport plus faible parce que les formes des lettres sont larges. Le petit texte courant, les dates, les adresses et les notes de bas de page demandent un rapport plus élevé. Les affiches se voient de loin et les visuels sociaux sur le petit écran d’un téléphone, souvent en plein soleil : rester au-dessus des seuils fait donc une vraie différence en conditions réelles.

Comment mesurer le contraste sur un fond varié ?

Sur un fond uni, la mesure se résume à un seul chiffre. Sur une photo ou une illustration, des zones claires et sombres se côtoient sous le texte. Se fier à la couleur moyenne est trompeur : si 80 % d’un titre se trouve sur un ciel sombre et 20 % sur un nuage clair, la moyenne semble correcte, mais les lettres posées sur le nuage disparaissent.

1. Délimitez la zone couverte par le texte et les abords immédiats des lettres ; c’est le fond qui influe sur la lecture.
2. Pour chaque pixel de fond de cette zone, calculez le rapport de contraste avec la couleur du texte.
3. Regardez la portion la plus faible, pas la moyenne. Une méthode pratique consiste à prendre la limite des 10 % de rapports les plus bas.
4. Comparez cette valeur au seuil correspondant au type de texte : 3:1 pour les titres et le grand texte, 4,5:1 pour les autres textes.
5. Si elle est insuffisante, appliquez l’une des techniques ci-dessous et mesurez à nouveau.

Pourquoi les conditions de lecture diffèrent-elles entre affiches, écrans et réseaux sociaux ?

Un même rapport donne des résultats différents selon les conditions de lecture. Mesurer le contraste est un point de départ ; il faut aussi tenir compte de l’endroit et de la manière dont la création sera vue.

• Affiches et roll-ups. Vus de loin, souvent en passant. Le titre doit se lire en quelques secondes : une grande taille, une graisse forte et un fond calme comptent autant que le rapport lui-même.
• Écrans de téléphone. Les visuels sociaux apparaissent comme un petit carré dans un fil, souvent avec la luminosité baissée ou l’écran en plein soleil. Un sous-titre lisible en plein écran peut disparaître dans la petite vignette du fil.
• Supports imprimés. Le papier n’émet pas de lumière ; il réfléchit la lumière ambiante. Sur papier mat, les tons sombres s’éclaircissent un peu et les couleurs se ternissent ; un rapport tout juste suffisant à l’écran peut ne plus l’être à l’impression.

Une habitude pratique : vérifiez la création à sa taille finale et dans ses conditions finales. Regardez un visuel social réduit sur un téléphone, une affiche réduite à l’écran comme si vous la voyiez de loin, et un travail d’impression avec l’aperçu d’impression.

Quelles techniques améliorent la lisibilité ?

• Choix de la couleur. La première chose à essayer est de changer la couleur du texte : une version très claire ou très foncée de la même teinte, une autre couleur de votre palette, du blanc ou un quasi-noir. C’est la voie qui modifie le moins le caractère de la création.
• Déplacement vers une zone calme. Une partie unie et peu détaillée de l’image (ciel, mur, sol) est un emplacement naturel pour le texte. Réserver cet espace dès la construction de la composition donne le résultat le plus propre.
• Bandeau ou encadré de fond. Placer un bandeau plein ou semi-transparent derrière le texte rend le rapport indépendant du fond. Il paraît naturel dans les styles graphiques en aplats comme le design suisse.
• Contour (stroke). Un fin contour d’une couleur contrastée autour des lettres détache le texte d’un fond chargé. Dans des styles comme le pop art et la bande dessinée, il fait partie de l’esthétique.
• Ombre et voile. Une ombre douce, ou un dégradé qui assombrit l’image vers la zone de texte (un voile, ou scrim), augmente le contraste. Comme il implique de la transparence à l’impression, il peut influer sur le choix de la norme PDF.
• Police et taille. Une graisse plus forte et une taille plus grande se lisent mieux à rapport égal. Les polices fines sont les premières à disparaître sur les images.

Quelles sont les erreurs les plus fréquentes ?

• Décider d’après la couleur moyenne. La partie la plus claire ou la plus sombre du fond rend une partie du texte invisible.
• Laisser le texte passer sur le produit ou le logo. Ni le produit ni le texte ne se lisent. Texte, produit et logo doivent occuper des zones distinctes.
• Oublier la perte de couleur à l’impression. Un rapport tout juste suffisant à l’écran peut passer sous le seuil quand les couleurs se ternissent en CMJN ; détails dans l’article sur le CMJN et le RVB.
• Compter sur la seule teinte. Du vert sur du rouge ou du violet sur du bleu, à luminance proche, est illisible pour les lecteurs ayant un trouble de la vision des couleurs.
• Appliquer la même correction à tous les textes. Une ombre suffisante pour un grand titre ne sauvera pas une petite ligne d’adresse.

Comment la lisibilité est-elle mesurée et corrigée chez Yeşilçam Studios ?

Design Studio ne peint pas les textes dans l’image ; chaque texte est un calque distinct et modifiable. Il est ainsi possible de mesurer le fond réel sous le texte. La mesure est celle décrite dans cet article : elle prend les 10 % de rapports de contraste les plus bas parmi les pixels situés sous le texte et dans un anneau autour de ses lettres. Le seuil est de 3:1 pour les titres et les textes grands par rapport à la hauteur du format, et de 4,5:1 pour les autres textes.

Quand Sam prépare un design, les textes sont vérifiés sur le fond réel avec cette mesure ; un texte insuffisant est déplacé, recoloré, ou reçoit un contour ou un bandeau adapté au style. Le passage d’un texte sur un produit ou un logo est également contrôlé. Lorsque vous sélectionnez un calque de texte dans l’éditeur, l’indicateur « Lisibilité » affiche le rapport mesuré : « Bonne lisibilité » s’il suffit, sinon « Contraste faible » avec le rapport minimal requis. Le bouton « Rendre lisible » apparaît alors ; il cherche d’abord la couleur la plus proche de la couleur actuelle qui franchit le seuil (une version plus claire ou plus foncée de la même teinte, les couleurs du design et de la palette de marque, le blanc, un quasi-noir) ; si aucune ne suffit, il ajoute au texte un contour contrasté. Vous pouvez aussi régler le contour vous-même avec les champs « Contour du texte » et « Épaisseur du contour ».

À l’export, la fenêtre vous avertit, avec leur nombre, si des calques de texte ne se détachent pas assez du fond ; l’avertissement ne bloque pas le téléchargement. L’indicateur de lisibilité et « Rendre lisible » dans l’éditeur ne coûtent aucun jeton supplémentaire. Pour un parcours écran par écran, consultez le guide de l’éditeur et de la lisibilité ; pour votre premier design, voyez le guide de prise en main de Design Studio.

Questions fréquentes

Les WCAG ne concernent-elles pas seulement le web ? Les règles ont été écrites pour les contenus web, mais le rapport de contraste est une méthode générale pour mesurer la différence de luminance entre deux couleurs. C’est une bonne référence, selon la même logique, pour les affiches, les menus et les visuels sociaux.

Un rapport de 3:1 suffit-il pour un titre ? Pour les titres grands et gras, 3:1 est le niveau minimal des WCAG. Pour une affiche lue de loin ou un écran vu en plein soleil, un rapport plus élevé est plus sûr.

Pourquoi mesurer les 10 % les plus bas plutôt que la moyenne ? Le lecteur bute sur la partie la plus faible du texte. La moyenne masque les lettres perdues sur un nuage clair ou dans une ombre sombre ; la tranche la plus basse capte ce risque.

« Rendre lisible » va-t-il abîmer les couleurs de mon design ? Il choisit d’abord la couleur la plus proche de la couleur actuelle qui franchit le seuil, pour que le changement soit le plus faible possible. Si le résultat ne vous plaît pas, annulez-le et réglez la couleur ou le contour à la main.

Un contour pose-t-il problème à l’impression ? Non. Le contour est dessiné en vectoriel avec le texte et reste net dans les sorties PDF/X-4, SVG et EPS.