Texte sur un fond dégradé : comment le rendre lisible à chaque fois

Pour qu’un texte sur fond dégradé se lise toujours, placez les mots sur la portion la plus calme du dégradé, choisissez une encre claire ou foncée selon la luminosité de la couleur juste derrière, éloignez le petit texte des tons moyens et testez le contraste au pire endroit, pas en moyenne. La taille et la graisse font le reste : une typographie grande et robuste résiste à un fond changeant là où une typographie petite et fine n’y arrive pas.

Pourquoi le texte sur un dégradé est plus difficile qu’il n’y paraît

Sur une couleur unie, le contraste entre le texte et le fond est un seul chiffre. Sur un dégradé, il varie le long du fondu. Un texte blanc peut être net contre l’extrémité sombre et presque invisible contre l’extrémité claire, parfois dans un seul mot. Le dégradé ci-dessous montre à quelle vitesse cela arrive.

Ces seuils viennent des recommandations WCAG sur le contraste : 4,5:1 pour le texte normal et 3:1 pour le grand texte, soit environ 24 pixels et plus, ou environ 19 pixels en gras. Le contraste des couleurs explique ces règles avec des mots simples.

Étape 1 : trouver la zone calme

Chaque dégradé a des portions où la couleur change lentement et d’autres où elle change vite. Le texte a sa place dans la partie lente, parce que le contraste sous lui reste presque constant. Sur un dégradé linéaire, c’est en général une extrémité ; sur un dégradé radial, le centre ou le bord extérieur ; sur un dégradé maillé ou une aurore, la plus grande et la plus uniforme des nappes de couleur.

Si vous maîtrisez le dégradé, intégrez-y la zone calme : prolongez une couleur en répétant un arrêt, comme dans le premier exemple. Si le dégradé vous est imposé, déplacez le texte plutôt que de lutter contre lui.

Étape 2 : choisir l’encre selon la luminosité, pas la teinte

Le contraste est une affaire de luminosité. Un violet vif et un orange vif peuvent paraître aussi intenses l’un que l’autre, pourtant le blanc se lit bien sur le violet et mal sur l’orange, parce que l’orange est beaucoup plus clair. Pour choisir l’encre, oubliez la teinte et demandez-vous : la couleur derrière cette ligne est-elle sombre ou claire ?

Les encres teintées paraissent plus réfléchies que le blanc et le noir purs. Prenez une teinte très pâle de la couleur la plus claire du dégradé et une nuance très profonde de sa plus sombre : elles prolongent la palette dans la typographie et offrent en général assez de contraste. Les dégradés boueux explique pourquoi les zones de mélange perdent d’abord du contraste de luminosité.

Étape 3 : éviter le piège des tons moyens

Regardez la ligne magenta du tableau : 4,7:1 avec le blanc et 4,2:1 avec le presque noir. Aucune encre n’a beaucoup de marge. Les couleurs de luminosité moyenne se trouvent au milieu de la plupart des dégradés, précisément là où l’on a tendance à centrer le texte. Un petit texte y sera limite, quelle que soit l’encre choisie.

• Déplacez le texte vers l’extrémité la plus sombre ou la plus claire.
• Décalez le dégradé pour que l’arrêt derrière le texte soit plus sombre ou plus clair.
• Mettez le texte en grand et en gras, pour que le seuil plus bas de 3:1 du grand texte s’applique.
• Réservez les tons moyens à la décoration, aux formes et à l’espace, pas aux mots.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Étape 4 : jouer sur la taille et la graisse

Des lettres plus grasses et plus grandes ont plus de surface et se lisent comme des formes : elles tolèrent mieux un fond changeant. Les graisses très fines et légères se désagrègent quand la couleur derrière elles varie. Sur un dégradé, composez le texte courant en regular, medium ou bold plutôt qu’en light, et gardez des titres généreux. Les polices pour les réseaux sociaux liste des caractères robustes qui se lisent sur téléphone.

Étape 5 : tester à la taille d’un téléphone et en niveaux de gris

1. 1

   Mesurez le pire endroit

   Prélevez la couleur la plus claire derrière un texte clair, ou la plus sombre derrière un texte foncé, et vérifiez le rapport.

2. 2

   Regardez en niveaux de gris

   Désaturez une copie de la création. Sans la teinte, un contraste de luminosité faible saute aux yeux.

3. 3

   Regardez sur un téléphone

   À bout de bras, à la lumière du jour si possible. C’est là que le petit texte sur dégradé échoue en premier.

4. 4

   Plissez les yeux

   Fermez les yeux à moitié. Le texte doit toujours se détacher du fond comme une forme.

Pour les fonds plus chargés qu’un dégradé, comme les photos et les textures, voir le texte sur un fond chargé. Dans Gradiently, les Marks placent leur zone la plus calme derrière les mots, et l’Encre automatique choisit un texte clair ou foncé pour chaque ligne dans la palette du Mark : la méthode ci-dessus s’applique pendant que vous tapez.