# Ombre de texte : quand elle aide, et les alternatives

[Canonical HTML page](https://gradiently.design/fr/guide/text-shadow-alternatives)

L’ombre portée est le remède le plus courant au texte illisible et l’un des moyens les plus rapides de dater une création. Voici quand l’ombre est le bon choix, et quoi utiliser le reste du temps.

## The short version

- Une ombre de texte fonctionne mieux comme style voulu, par exemple une ombre dure décalée sans flou, plutôt que comme remède à un mauvais contraste.
- Les lueurs douces et les halos flous derrière les lettres floutent leurs bords et tendent à donner à une création un air bon marché et daté.
- Une ombre fine et serrée est un choix raisonnable pour les sous-titres sur vidéo en mouvement, où l’on ne peut pas contrôler le fond.
- Pour rendre un texte lisible, le placement, un dégradé de lisibilité, un fond teinté et une graisse plus forte battent généralement toute ombre.
- En CSS, text-shadow prend un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur, et accepte plusieurs ombres séparées par des virgules.

Une **ombre de texte** aide dans deux situations : comme style voulu, généralement une ombre dure décalée de quelques pixels sans flou, et comme mince bord de sécurité sur des sous-titres sur vidéo en mouvement. Comme sauvetage de mots qui ne se lisent pas sur une photo ou un dégradé, elle nuit généralement : les ombres douces et les lueurs floutent justement les bords que l’œil utilise pour reconnaître les lettres, et elles datent une création instantanément. Pour la lisibilité, déplacez les mots vers une zone plus calme, ajoutez un dégradé de lisibilité, teintez le fond ou choisissez une graisse plus forte.

## Types d’effet d’ombre de texte

| Type | À quoi ça ressemble | Verdict |
| --- | --- | --- |
| Dure et décalée | Une copie pleine des lettres décalée vers le bas et la droite, sans flou | Un style fort : rétro, ludique, façon affiche |
| Ombre longue | De nombreuses copies décalées formant un bloc en diagonale | Un style, proche de l’extrusion 3D ; à réserver à quelques mots |
| Ombre portée subtile | Petit décalage, petit flou, faible opacité | À peine visible sur la plupart des écrans ; souvent inutile |
| Bord de sous-titre serré | Peu ou pas de décalage, flou court, sombre | Correcte pour les sous-titres sur une vidéo imprévisible |
| Lueur ou halo doux | Un large nuage flou de couleur autour de chaque lettre | À éviter : barbouille les lettres et fait bon marché |

Seules les deux premières sont des choix de design. Les deux du milieu sont des utilitaires. La dernière est une habitude à perdre.

## Quand une ombre de texte aide

### Comme style dur et décalé

Une ombre sans flou, décalée de quelques pour cent de la hauteur des lettres et dans une couleur contrastée de la palette, est un style typographique à la longue histoire sur les affiches, les emballages et les enseignes. Elle paraît assurée et un peu nostalgique. Traitez-la comme tout effet : un par création, quelques grands mots, une police grasse. [Les effets de texte](https://gradiently.design/fr/guide/text-effects) la compare aux autres traitements. [Les effets de texte rétro](https://gradiently.design/fr/guide/retro-text-effect) montre ses proches cousins, le double et la traînée.

### Derrière les sous-titres vidéo

Les sous-titres et légendes se posent sur des images qui changent à chaque plan, vous ne pouvez donc pas choisir une zone calme. Une ombre sombre et serrée ou un fin contour garde les sous-titres blancs lisibles quand une fenêtre lumineuse passe derrière. Gardez-la près des lettres : un flou court et peu ou pas de décalage. [Le design des sous-titres vidéo](https://gradiently.design/fr/guide/video-captions-design) couvre la taille et le placement.

## Quand une ombre de texte nuit

Le problème d’utiliser une ombre pour corriger le contraste, c’est qu’on traite le symptôme. Le fond reste chargé ; vous avez seulement ajouté une bavure autour des lettres. Les lueurs douces sont les pires, car elles étalent un nuage flou au-delà de chaque lettre et adoucissent le bord qui définit sa forme. Sur les publications sociales, elles se compressent aussi mal et se transforment en bandes tachetées.

### L’ombre comme béquille

- Lueur noire douce sur du texte blanc posé sur une photo
- Halo coloré autour d’un titre
- Ombre sur du petit texte courant
- Plusieurs ombres différentes dans une même création
- Ombre plus contour plus lueur sur un même mot

### Meilleur choix

- Déplacer les mots vers la zone la plus calme
- Un dégradé de lisibilité sur un bord de l’image
- Un texte plus grand et plus gras pour la petite ligne
- Un style constant sur tout l’ensemble
- Un seul traitement, choisi à dessein

## De meilleures alternatives à l’ombre de texte

1. **Déplacez les mots** Trouvez la zone la plus calme et la plus régulière du fond et placez-y le texte. Cela règle la plupart des problèmes avant qu’ils commencent.
2. **Ajoutez un dégradé de lisibilité** Un fondu doux de sombre à transparent le long d’un bord donne du contraste sans forme visible. [Le texte lisible sur photo](https://gradiently.design/fr/guide/readable-text-on-photos) donne des codes de dégradé.
3. **Calmez le fond** Teintez une photo en une ou deux couleurs, baissez ses hautes lumières ou choisissez un dégradé à la région plus calme.
4. **Renforcez le texte** Montez d’une graisse et d’une taille. Une sans grasse à une taille généreuse n’a besoin d’aucune aide sur la plupart des fonds.
5. **Changez l’encre** Parfois un texte foncé sur une zone claire bat un texte blanc avec ombre. Choisissez l’encre ligne par ligne plutôt que pour toute la création.

Une publication portrait Ouvert tard où le fond est irrégulier derrière les lettres

Des mots sur une portion chargée du fond : c’est le moment où l’on cherche une lueur.

La même publication avec des lettres nettes et sans ombre, posées sur une zone calme du dégradé

Les mêmes mots avec le fond calmé derrière. Aucune ombre nécessaire, et les lettres restent nettes.

Sur les dégradés en particulier, le fond s’éclaircit ou s’assombrit souvent d’un bout à l’autre du cadre, donc une seule couleur d’encre ne convient pas à chaque ligne. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) montre comment l’anticiper, et [le texte sur fonds chargés](https://gradiently.design/fr/guide/type-on-busy-backgrounds) couvre les motifs et les textures.

## L’ombre de texte en CSS

La propriété CSS `text-shadow` prend un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur. Séparez plusieurs ombres par des virgules ; la première listée se place dessus. Utilisez des unités `em` pour que l’ombre suive la taille de police. La référence complète est sur [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Deux ombres qui valent la peine, et le dégradé qui remplace le reste.

Les vérificateurs de contraste automatiques comparent la couleur du texte avec celle du fond et ignorent l’ombre. Si un outil signale votre texte comme peu contrasté, une ombre peut le rendre plus beau sur votre écran mais ne change pas la mesure. Corrigez plutôt le fond ou l’encre. [L’ombre de texte CSS](https://gradiently.design/fr/guide/css-text-shadow) propose d’autres recettes pour le web.

## Comment Gradiently gère la lisibilité

Gradiently est né de l’idée que les mots ne devraient pas avoir besoin d’être sauvés. Un Mark sait où sont les mots : sa région la plus calme et la plus contrastée se place derrière le texte, les couleurs près des lettres s’approfondissent ou s’éclaircissent, et les détails chargés s’apaisent. L’encre Auto choisit ensuite un texte clair ou foncé pour chaque ligne à partir de la palette du Mark. Ni encadrés, ni ombres, ni flou, et vous choisissez l’intensité de la réponse du Mark. Si vous voulez de la profondeur comme style, le traitement de Lettering Extrusion donne des lettres profondes aux couleurs du Mark et Double dessine des lettres ouvertes deux fois, nettes et sans flou.

## FAQ

### Faut-il utiliser une ombre de texte pour rendre un texte lisible ?

En général non. Le placement, un dégradé de lisibilité, un fond plus calme ou une graisse plus forte rendent le texte lisible sans flouter les lettres.

### Qu’est-ce qu’une ombre dure sur du texte ?

Une copie des lettres décalée vers le bas et d’un côté sans flou, généralement dans une couleur contrastée. C’est un style voulu que l’on voit sur les affiches et les emballages.

### Comment ajouter une ombre de texte en CSS ?

Utilisez `text-shadow: 0.06em 0.06em 0 #9a3412;` où les valeurs sont le décalage horizontal, le décalage vertical, le rayon de flou et la couleur.

### Une ombre de texte améliore-t-elle le contraste pour l’accessibilité ?

Les vérificateurs automatiques comparent la couleur du texte avec le fond et ignorent l’ombre, donc une ombre ne corrigera pas un rapport insuffisant. Corrigez le fond ou l’encre.

### Pourquoi les effets de texte lumineux font-ils bon marché ?

Une lueur étale un nuage flou autour de chaque lettre, adoucit ses bords et forme souvent des bandes quand l’image est compressée.