Fond pour du texte : ce qui rend les mots faciles à lire

Un bon fond pour du texte réunit trois choses dans la zone derrière les mots : un fort contraste avec les lettres, très peu de détails fins, et une plage de tons homogène plutôt que des taches claires et sombres. La couleur compte bien moins qu’on ne le pense. Un dégradé violet peut porter un texte magnifiquement et une photo grise peut le ruiner, selon ces trois propriétés. Ce guide montre comment juger n’importe quel fond, photo, dégradé ou texture, et quoi faire quand il échoue.

Le contraste : la première propriété

Le contraste est la différence de luminosité entre les lettres et ce qui se trouve juste derrière elles. Les règles pour l’accessibilité des contenus web (WCAG) fixent le seuil mesurable : un rapport d’au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le vérificateur de contraste de WebAIM le calcule pour n’importe quelle paire de couleurs.

Sur une couleur unie, une seule vérification suffit. Sur un dégradé ou une photo, le fond change sous chaque mot, alors vérifiez le point le plus clair derrière un texte clair et le point le plus sombre derrière un texte foncé. C’est là que le texte échoue en premier. Contraste des couleurs et accessibilité approfondit les normes.

Le détail : pourquoi les fonds chargés sont difficiles à lire

Le contraste est nécessaire mais pas suffisant. Un fond rempli de détails de la même taille que les lettres rend la lecture difficile même quand le rapport est valide, car l’œil n’arrive pas à séparer la forme des lettres des formes derrière elles. Feuilles, gravier, foules, fines rayures et petits motifs sont les pires coupables. Les grandes formes douces sont les meilleures : un ciel, un mur flou, un dégradé lisse.

Une texture ne pose pas de problème quand son grain est bien plus petit que les lettres, comme le grain d’une pellicule ou la texture d’un papier. Elle en pose quand ses éléments approchent la taille des traits de vos caractères. Si vous tenez à un motif, agrandissez-le jusqu’à ce que ses formes soient nettement plus grandes que les lettres, ou gardez-le loin des mots. Du texte sur des fonds chargés détaille les motifs, et du texte lisible sur des photos traite des images.

La plage de tons : zones claires et sombres sous une même ligne

La troisième propriété est celle qui piège le plus. Si une même ligne de texte traverse à la fois une zone claire et une zone sombre, aucune couleur de texte unique ne peut fonctionner : le blanc disparaît sur la partie claire et le noir sur la partie sombre. Un bon fond pour du texte garde une plage de tons étroite sous chaque ligne, toute claire ou toute sombre.

Comment tester n’importe quel fond pour du texte

1. 1

   Plissez les yeux

   Fermez les yeux à moitié. Les détails s’estompent et seuls les tons restent. Si les mots se fondent dans le fond, le contraste est trop faible.

2. 2

   Floutez-le

   Appliquez un flou important sur une copie du fond seul. Ce qui reste sous la zone de texte est le ton sur lequel reposent vraiment les lettres.

3. 3

   Regardez-le en niveaux de gris

   La couleur peut vous faire croire que le contraste suffit. Les niveaux de gris montrent la seule luminosité, dont dépend la lisibilité.

4. 4

   Vérifiez les extrêmes

   Mesurez le contraste aux points les plus clairs et les plus sombres derrière les mots, pas en moyenne.

5. 5

   Regardez-le sur un téléphone

   À bout de bras, en plein jour, à la taille à laquelle on le verra vraiment.

Corriger un fond qui combat le texte

La plupart des corrections ajoutent quelque chose : un encadré, une ombre, une bande sombre. Elles fonctionnent, mais chacune est un pansement qui donne à la création un air de sauvetage. Essayez les corrections dans cet ordre, de la moins visible à la plus visible.

Sur le web, un léger dégradé superposé d’un côté d’une image d’en-tête est une version honorable de la cinquième correction : il assombrit uniquement la zone sous les mots et laisse le reste de l’image intact.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently intègre les corrections les moins visibles dans le fond lui-même. Un Mark sait où sont vos mots : sa zone la plus calme et la mieux contrastée se place derrière le texte, les couleurs proches des lettres s’assombrissent ou s’éclaircissent, les détails chargés s’apaisent, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne dans la palette du Mark. Ni encadrés, ni ombres, ni flou, et vous choisissez l’intensité de la réaction. Comment fonctionne l’encre automatique en donne les détails, et du texte sur un dégradé présente la méthode manuelle pour n’importe quel dégradé.