# Testo su sfondo con gradiente: come renderlo leggibile ogni volta

[Canonical HTML page](https://gradiently.design/it/guide/text-on-gradient)

Un gradiente cambia sotto ogni lettera, quindi un colore che si legge a un’estremità può sparire all’altra. Ecco il metodo che mantiene leggibili le parole lungo tutta la sfumatura.

## The short version

- Il testo su un gradiente è difficile da gestire perché la luminosità dello sfondo cambia sotto le parole, quindi un solo colore può avere un contrasto forte a un’estremità e debole all’altra.
- Il posto migliore per il testo su un gradiente è la sua zona calma, il tratto in cui il colore cambia più lentamente.
- Scegli il colore del testo in base alla luminosità del colore dietro, non alla tinta: bianco o quasi bianco sui punti scuri, quasi nero su quelli chiari.
- I colori di luminosità media in un gradiente sono una trappola, perché né il testo bianco né quello nero hanno molto contrasto di margine.
- Controlla il contrasto nel punto peggiore dietro il testo, e guarda il design a dimensione di telefono e in scala di grigi prima di pubblicarlo.

Per mettere un **testo su sfondo con gradiente** e renderlo sempre leggibile, posiziona le parole sul tratto più calmo del gradiente, scegli un colore chiaro o scuro in base alla luminosità del colore subito dietro, tieni il testo piccolo lontano dai toni medi e verifica il contrasto nel punto peggiore, non nella media. Dimensione e peso fanno il resto: un carattere grande e robusto sopravvive a uno sfondo che cambia, dove uno sottile e piccolo non ce la fa.

## Perché il testo su un gradiente è più difficile di quanto sembri

Su un colore piatto, il contrasto tra testo e sfondo è un solo numero. Su un gradiente, cambia lungo la sfumatura. Un testo bianco può essere nitido sull’estremità scura e quasi invisibile su quella chiara, a volte all’interno di una sola parola. Il gradiente qui sotto mostra quanto velocemente succede.

Dal blu indaco notte al rosa cipria: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 35%, #c026d3 55%, #ec4899 75%, #fbcfe8 100%)`

Un gradiente, cinque sfondi molto diversi per il testo. Il bianco si legge a sinistra, il quasi nero a destra, e il magenta al centro non si adatta particolarmente bene a nessuno dei due.

| Colore dietro il testo | Bianco (#ffffff) | Quasi nero (#0b0b14) | Usa |
| --- | --- | --- | --- |
| Indaco notte `#1e1b4b` | 16,0:1 | 1,2:1 | Bianco |
| Viola `#7c3aed` | 5,7:1 | 3,4:1 | Bianco |
| Magenta `#c026d3` | 4,7:1 | 4,2:1 | Nessuno dei due ha molto margine |
| Rosa `#ec4899` | 3,5:1 | 5,5:1 | Quasi nero |
| Rosa cipria `#fbcfe8` | 1,4:1 | 14,2:1 | Quasi nero |

Rapporti di contrasto per ogni punto del gradiente qui sopra, calcolati con la formula WCAG. Il testo normale richiede almeno 4,5:1; il testo grande richiede 3:1.

Le soglie arrivano dalle [linee guida WCAG sul contrasto](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html): **4,5:1** per il testo normale e **3:1** per il testo grande, cioè circa 24 pixel e oltre, o circa 19 pixel in grassetto. [Il contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) spiega le regole in parole semplici.

## Passo 1: trova la zona calma

Ogni gradiente ha tratti in cui il colore cambia lentamente e tratti in cui cambia in fretta. Il testo va nella parte lenta, perché il contrasto sotto di esso resta quasi costante. In un gradiente lineare di solito è un’estremità; in un gradiente radiale è il centro o il bordo esterno; in un gradiente mesh o aurora è la macchia di colore più grande e uniforme.

- Calmo a sinistra: il testo va qui: `linear-gradient(90deg, #0f172a 0%, #0f172a 40%, #6d28d9 75%, #f472b6 100%)`
- Calmo al centro: il testo va qui: `radial-gradient(ellipse at 50% 45%, #fdf2f8 0%, #fbcfe8 30%, #db2777 75%, #500724 100%)`

Due gradienti costruiti apposta con una zona calma. Il primo mantiene un solo colore scuro per il 40 per cento a sinistra; il secondo tiene al centro un’ampia macchia chiara per un testo scuro.

Se controlli tu il gradiente, costruisci la zona calma: mantieni un colore più a lungo ripetendo un punto, come fa il primo esempio. Se il gradiente ti viene dato, sposta il testo invece di combatterlo.

## Passo 2: scegli il colore del testo per luminosità, non per tinta

Il contrasto riguarda la luminosità. Un viola acceso e un arancione acceso possono sembrare ugualmente forti, eppure il bianco si legge bene sul viola e male sull’arancione, perché l’arancione è molto più chiaro. Quando scegli il colore del testo, ignora la tinta e chiediti: il colore dietro questa riga è scuro o chiaro?

### Da evitare

- Scegliere il colore del testo in base alla tinta, come testo rosa su un gradiente rosa
- Un unico titolo bianco steso su estremità scure e chiare
- Giudicare il contrasto a occhio su un monitor luminoso
- Testo colorato su uno sfondo saturo

### Da fare

- Testo chiaro sui punti scuri, testo scuro su quelli chiari
- Righe posizionate in modo che ognuna stia su una sola luminosità
- Misurare il rapporto nel punto peggiore
- Un quasi bianco o un quasi nero presi dalla famiglia di colori del gradiente

I colori leggermente tinti sembrano più studiati del bianco e del nero puri. Prendi una tinta molto chiara del colore più chiaro del gradiente e una sfumatura molto profonda del più scuro; portano la palette nel testo e di solito hanno contrasto a sufficienza. [I gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) spiega perché le sfumature intermedie perdono contrasto di luminosità.

## Passo 3: stai fuori dalla trappola dei toni medi

Guarda la riga del magenta nella tabella: 4,7:1 con il bianco e 4,2:1 con il quasi nero. Nessuno dei due colori ha molto margine. I colori di luminosità media stanno al centro della maggior parte dei gradienti, che è proprio dove le persone tendono a centrare il testo. Lì un testo piccolo sarà al limite qualunque colore tu scelga.

- **Sposta il testo** verso l’estremità più scura o più chiara.
- **Sposta il gradiente** così il punto dietro il testo è più scuro o più chiaro.
- **Rendi il testo grande e in grassetto**, così vale la soglia più bassa di 3:1 per il testo grande.
- **Riserva i toni medi** alla decorazione, alle forme e allo spazio, non alle parole.

```css
.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);
}
```

Costruire la zona calma in un gradiente CSS: il titolo è limitato al 40 per cento a sinistra, che sta interamente sul punto scuro.

## Passo 4: usa dimensione e peso

Le lettere più pesanti e più grandi hanno più superficie e vengono lette come forme, quindi tollerano meglio uno sfondo che cambia. I pesi sottilissimi e leggeri si spezzano quando il colore dietro cambia. Su un gradiente, componi il testo in regular, medium o bold invece che nei pesi leggeri, e tieni i titoli generosi. [I font per i social](https://gradiently.design/it/guide/fonts-for-social-media) elenca caratteri robusti che si leggono sui telefoni.

Un post verticale con un titolo in grassetto sulla zona più calma di uno sfondo con gradiente

Un testo grande e robusto posizionato sulla parte più calma del gradiente, con il colore scelto in base a ciò che ha dietro.

## Passo 5: prova a dimensione di telefono e in scala di grigi

1. **Misura il punto peggiore** Preleva il colore più chiaro dietro un testo chiaro, o il più scuro dietro un testo scuro, e controlla il rapporto.
2. **Guardalo in scala di grigi** Desatura una copia del design. Senza la tinta, un contrasto di luminosità debole salta subito all’occhio.
3. **Guardalo su un telefono** A distanza di braccio, alla luce del giorno se puoi. Il testo piccolo sui gradienti fallisce lì per primo.
4. **Strizza gli occhi** Socchiudi gli occhi. Il testo dovrebbe comunque staccarsi dallo sfondo come una forma.

Per sfondi più carichi di un gradiente, come foto e texture, vedi [il testo su sfondi carichi](https://gradiently.design/it/guide/type-on-busy-backgrounds). In Gradiently, i Mark spostano la loro zona più calma dietro le parole, e **Inchiostro automatico** sceglie un testo chiaro o scuro per ogni riga dalla palette del Mark stesso, così il metodo qui sopra avviene mentre scrivi.

## FAQ

### Quale colore del testo funziona su uno sfondo con gradiente?

Dipende dalla luminosità dietro il testo: bianco o una tinta chiara sui punti scuri, quasi nero o una sfumatura profonda sui punti chiari. La tinta conta molto meno della luminosità.

### Come controllo il contrasto su un gradiente?

Misura il rapporto nel punto peggiore dietro il testo, non nella media. Il testo normale richiede almeno 4,5:1 e il testo grande almeno 3:1.

### Dove va messo il testo su un gradiente?

Sulla sua zona calma, dove il colore cambia più lentamente, di solito un’estremità di un gradiente lineare o il centro di uno radiale.

### Perché il testo si legge male al centro del mio gradiente?

I colori di luminosità media danno un contrasto debole sia con il testo bianco sia con quello nero. Sposta il testo verso un’estremità, sposta il gradiente o rendi il testo grande e in grassetto.