# Encre automatique : un texte clair ou foncé pour chaque ligne

[Canonical HTML page](https://gradiently.design/fr/guide/auto-ink-legibility)

Un dégradé est clair à un endroit et sombre à un autre, donc aucune couleur de texte unique ne lui convient partout. L’encre automatique décide ligne par ligne, et le Mark aide par derrière.

## The short version

- L’encre automatique est un réglage de Gradiently qui choisit un texte clair ou foncé pour chaque ligne, selon ce qui se lit le mieux sur la partie du Mark juste derrière.
- Les deux encres viennent de la palette du Mark, donc le texte appartient toujours au fond au lieu de retomber sur un blanc ou un noir purs.
- Le texte peut aussi être fixé sur l’encre claire ou l’encre foncée quand vous voulez une seule couleur, quel que soit le fond.
- L’encre automatique fonctionne avec la réaction du Mark, qui apaise le matériau derrière les mots, de Désactivé à Marqué en passant par Invisible, Discret et Net.
- Ni l’une ni l’autre n’utilisent de cadres, d’ombres ou de flou, et vous choisissez à quel point le Mark réagit.

L’**encre automatique** est la façon dont Gradiently choisit la couleur de votre texte. Pour chaque ligne réglée sur Auto, elle regarde la partie du Mark juste derrière et choisit l’encre claire ou l’encre foncée, celle qui se lit le mieux à cet endroit. Les deux encres viennent de la palette du Mark : un titre posé sur un coin pâle devient profond, une légende sur une bande sombre devient claire, et tous deux ont toujours l’air de la même marque.

## Pourquoi une seule couleur de texte échoue sur un dégradé

Sur un fond uni, on choisit la couleur du texte une fois. Un dégradé change en chemin : le haut d’une story peut être presque blanc et le bas presque noir. Un texte blanc parfaitement lisible en bas disparaît en haut, et un long titre peut traverser les deux. C’est le cœur du problème du [texte sur un fond dégradé](https://gradiently.design/fr/guide/text-on-gradient), et les solutions habituelles, cadres derrière les mots et ombres portées, masquent justement le fond que vous avez choisi.

Une story verticale annonçant une vente d’atelier, où la couleur du texte peine sur les zones plus claires et plus sombres du dégradé

Une couleur fixe sur un fond qui change : certaines parties du texte luttent contre le matériau.

La même story de vente d’atelier avec chaque ligne dans l’encre claire ou foncée la plus lisible, et un matériau plus calme derrière les mots

L’encre automatique avec un Mark qui réagit : chaque ligne prend l’encre qui se lit, et le matériau s’apaise derrière.

## Comment l’encre automatique choisit clair ou foncé

Chaque Mark porte une encre claire et une encre foncée tirées de sa palette : un ton pâle et un ton profond qui vont avec ses couleurs. Quand une ligne est réglée sur Auto, Gradiently mesure le matériau dans la zone que couvre cette ligne et lui donne l’encre qui ressort le plus. Déplacez le texte, et le choix suit. Déclinez la création en story ou en bannière, où la lumière tombe ailleurs, et chaque ligne est choisie de nouveau.

- Encre claire: #fbf3ea
- Pêche clair: #e9a27c
- Rose médian: #9c4f6b
- Ombre prune: #3b1f3f
- Encre foncée: #1a0f1f

Un exemple de palette de Mark avec ses deux encres aux extrémités. Les encres sont teintées de la chaleur du Mark, pas d’un blanc ou d’un noir purs.

L’idée repose sur la même mesure de contraste que celle des règles d’accessibilité du web : comparer la luminosité du texte à celle du fond. Voici le principe en quelques lignes de code, pour qui veut construire quelque chose de semblable sur le web.

```js
// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink
```

Le principe seulement, pas le code de Gradiently. Un vrai fond varie sous une ligne, donc il faut mesurer toute la zone derrière, pas un seul pixel.

Côté chiffres, les WCAG demandent un rapport de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) explique ces rapports, et le [vérificateur de contraste de WebAIM](https://webaim.org/resources/contrastchecker/) permet de tester n’importe quelle paire.

## Auto, claire ou foncée : les trois modes d’encre

| Mode | Ce qu’il fait | À utiliser quand |
| --- | --- | --- |
| Auto | Choisit l’encre claire ou foncée par ligne selon ce qu’il y a derrière | Presque toujours : titres, détails, légendes sur un fond qui change |
| Claire | Utilise toujours l’encre claire du Mark | Un Mark sombre où toutes les lignes doivent s’accorder, comme une carte citation |
| Foncée | Utilise toujours l’encre foncée du Mark | Un Mark pâle, façon papier, ou l’impression quand vous voulez une seule encre |

Le texte démarre sur Auto. Passer une ligne sur une encre fixe se fait en un choix dans les réglages de couleur du texte, et Revenir à l’encre automatique annule ce choix.

Vous pouvez toujours colorer le texte avec n’importe quelle couleur de votre kit de marque ou de la palette du Mark. L’encre automatique est le réglage par défaut parce que c’est celui qui continue de fonctionner quand la création passe à un autre format.

## Comment le Mark aide par derrière

Choisir la bonne encre, c’est la moitié du travail. L’autre moitié, c’est le fond lui-même. Un Mark sait où sont les mots : sa zone la plus calme et la plus contrastée se place derrière le texte, les couleurs proches des lettres s’approfondissent ou s’éclaircissent, et les détails chargés s’apaisent. Le mécanisme complet est décrit dans [un fond qui s’adapte au texte](https://gradiently.design/fr/guide/text-reacts-to-background). L’encre automatique choisit ensuite l’encre pour cette zone apaisée, et les deux se renforcent.

| Réaction | Ce qui se passe derrière vos mots |
| --- | --- |
| Désactivé | Le matériau ignore vos mots |
| Invisible | Seulement où c’est nécessaire ; personne ne le remarquera |
| Discret | Équilibré : le style reste, les mots se lisent |
| Net | Les mots l’emportent toujours |
| Marqué | Le contraste maximal, apaisé sur une zone plus large |

Les niveaux de réaction que vous pouvez choisir pour une création, du matériau qui ignore les mots au contraste le plus fort possible.

Au-delà des préréglages, quatre curseurs permettent d’affiner : **Ton**, à quel point le matériau se calme derrière les mots pour le contraste ; **Calme**, à quel point sa distorsion et son agitation se détendent ; **Courbure**, une légère courbure du motif au bord des mots ; et **Portée**, jusqu’où autour des mots il réagit. Vous choisissez l’intensité, pour qu’une affiche reste sauvage pendant qu’un menu reste paisible.

## Ce que l’encre automatique évite volontairement

### À éviter

- Un cadre plein derrière chaque ligne
- Des ombres portées qui bavent sur les bords des lettres
- Un flou sur le fond derrière le texte
- Un texte blanc pur sur un coin pâle

### À faire

- Laisser chaque ligne prendre l’encre qui se lit
- Laisser le Mark apaiser une zone derrière les mots
- Garder les encres dans la palette du Mark
- Augmenter le niveau de réaction pour un texte petit ou long

Les cadres et les ombres fonctionnent, mais ils se font remarquer et cachent le fond. Les [alternatives aux ombres de texte](https://gradiently.design/fr/guide/text-shadow-alternatives) expliquent pourquoi, et le [texte sur fond chargé](https://gradiently.design/fr/guide/type-on-busy-backgrounds) propose d’autres façons de garder les mots lisibles sans eux.

## Tirer le meilleur de l’encre automatique

1. **Laissez le texte sur Auto** Ne fixez une ligne en clair ou en foncé que pour une raison précise, comme s’accorder à une série imprimée.
2. **Choisissez la réaction selon l’usage** Discret convient à la plupart des posts sociaux. Choisissez Net ou Marqué pour un petit texte, de longs détails ou tout ce qui se lit de loin.
3. **Vérifiez chaque format** Après une déclinaison, regardez chaque format. L’encre est choisie de nouveau pour chacun, ce qui est généralement ce que vous voulez.
4. **Gardez des titres courts** Une ligne qui va de la partie la plus claire à la plus sombre d’un Mark est difficile pour n’importe quelle encre. Coupez-la en deux lignes.

## FAQ

### Qu’est-ce que l’encre automatique dans Gradiently ?

Un réglage de couleur du texte qui choisit l’encre claire ou foncée du Mark pour chaque ligne, selon celle qui se lit le mieux sur la partie du fond située derrière.

### Peut-on désactiver l’encre automatique ?

Oui. Réglez une ligne pour qu’elle utilise toujours l’encre claire ou l’encre foncée, ou donnez-lui la couleur de votre choix. Revenir à l’encre automatique annule ce choix.

### L’encre automatique ajoute-t-elle des ombres ou des cadres derrière le texte ?

Non. Elle ne change que la couleur du texte. C’est le Mark lui-même qui apaise une zone derrière les mots, sans cadres, ombres ni flou.

### Quel rapport de contraste pour un texte sur un fond ?

Les WCAG demandent au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte.

### Pourquoi mon texte a-t-il changé de couleur après une déclinaison de format ?

Dans un nouveau format, la lumière tombe ailleurs, donc l’encre automatique choisit de nouveau l’encre de chaque ligne pour la garder lisible.