# Sfondo per il testo: che cosa rende le parole facili da leggere

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

Alcuni sfondi portano le parole senza fatica e altri combattono ogni lettera. La differenza dipende da tre proprietà che puoi controllare in un minuto.

## The short version

- Un buon sfondo per il testo ha tre proprietà dove stanno le parole: contrasto sufficiente, pochi dettagli fini e una gamma ristretta di toni.
- Le WCAG chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande.
- I dettagli grandi più o meno quanto le lettere, come fogliame, folle o pattern affollati, danneggiano la lettura più del colore.
- Socchiudere gli occhi, sfocare il design o guardarlo in scala di grigi mostra subito se l’area del testo è abbastanza calma.
- Spostare le parole in una parte più calma dello sfondo di solito è meglio che aggiungere dietro un riquadro o un’ombra.

Un buon **sfondo per il testo** ha tre cose nell’area dietro le parole: forte contrasto con le lettere, pochissimi dettagli fini e una gamma uniforme di toni invece di macchie chiare e scure. Il colore conta molto meno di quanto si pensi. Un gradiente viola può portare il testo splendidamente e una foto grigia può rovinarlo, a seconda di quelle tre proprietà. Questa guida mostra come valutare qualsiasi sfondo, foto, gradiente o texture, e che cosa fare quando fallisce.

## Contrasto: la prima proprietà

Il contrasto è la differenza di luminosità tra le lettere e ciò che sta direttamente dietro. Le Web Content Accessibility Guidelines fissano la soglia misurabile: un rapporto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il [verificatore di contrasto di WebAIM](https://webaim.org/resources/contrastchecker/) lo calcola per due colori qualsiasi.

| Testo | Sfondo | Rapporto di contrasto | Verdetto |
| --- | --- | --- | --- |
| Bianco `#ffffff` | Indaco profondo `#1e1b4b` | 16:1 | Ottimo a qualsiasi dimensione |
| Bianco `#ffffff` | Viola `#7c3aed` | 5,7:1 | Passa per il testo corrente |
| Bianco `#ffffff` | Ardesia `#64748b` | 4,8:1 | Passa per un soffio |
| Bianco `#ffffff` | Rosa `#f472b6` | 2,6:1 | Non passa, nemmeno per il testo grande |
| Quasi nero `#1a1a1a` | Rosa `#f472b6` | 6,6:1 | Passa: stesso rosa, inchiostro più scuro |
| Bianco `#ffffff` | Arancione `#fb923c` | 2,3:1 | Non passa |

Rapporti reali per abbinamenti comuni. Rosa, arancioni, gialli e verdi acqua chiari richiedono testo scuro, per quanto il bianco sembri giusto su di loro.

Su un colore piatto basta un solo controllo. Su un gradiente o una foto lo sfondo cambia sotto ogni parola, quindi controlla il punto più chiaro dietro il testo chiaro e il punto più scuro dietro il testo scuro. È lì che il testo cede per primo. [Contrasto del colore e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) approfondisce gli standard.

## Dettaglio: perché gli sfondi affollati sono difficili da leggere

Il contrasto è necessario ma non basta. Uno sfondo pieno di dettagli grandi quanto le lettere rende difficile la lettura anche quando il rapporto passa, perché l’occhio non riesce a separare le forme delle lettere da quelle dietro. Foglie, ghiaia, folle, righe sottili e piccoli pattern sono i peggiori. Le forme grandi e morbide sono le migliori: un cielo, un muro sfocato, un gradiente liscio.

- Liscio: porta bene il testo: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Una luce morbida, parole in basso: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Righe sottili: combattono ogni lettera: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Piccoli anelli: illeggibile: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Gli stessi due colori in quattro modi. La coppia in alto porta le parole con facilità; quella in basso ha dettagli alla scala delle lettere e rende faticoso qualsiasi testo.

La texture va bene quando la sua grana è molto più piccola delle lettere, come la grana della pellicola o la grana della carta. Diventa un problema quando le sue caratteristiche si avvicinano alla dimensione dei tratti del tuo carattere. Se ami un pattern, ingrandiscilo finché le sue forme sono nettamente più grandi delle lettere, oppure tienilo lontano dalle parole. [Testo su sfondi affollati](https://gradiently.design/it/guide/type-on-busy-backgrounds) tratta i pattern più nel dettaglio, e [testo leggibile sulle foto](https://gradiently.design/it/guide/readable-text-on-photos) tratta le immagini.

## Gamma di toni: macchie chiare e scure sotto una riga

La terza proprietà è quella che coglie di sorpresa. Se una singola riga di testo attraversa sia una macchia chiara sia una scura, nessun colore del testo può funzionare: il bianco sparisce sulla parte chiara e il nero su quella scura. Un buon sfondo per il testo mantiene una gamma ristretta di toni sotto ogni riga, tutti chiari o tutti scuri.

Un post verticale in cui il titolo corre su aree chiare e scure di un gradiente e in parte è difficile da leggere

Il titolo attraversa parti chiare e scure dello sfondo, così alcune lettere svaniscono qualunque sia il colore dell’inchiostro.

Lo stesso post con un’area calma e dal tono uniforme del gradiente dietro il titolo, così ogni lettera si legge

Lo stesso sfondo con una regione uniforme e più profonda dietro le parole. Ora un solo colore di inchiostro funziona per ogni lettera.

## Come provare qualsiasi sfondo per il testo

1. **Socchiudi gli occhi** Chiudi a metà gli occhi. I dettagli sfumano e resta solo il tono. Se le parole si dissolvono nello sfondo, il contrasto è troppo basso.
2. **Sfocalo** Applica una forte sfocatura a una copia del solo sfondo. Ciò che resta sotto l’area del testo è il tono su cui le lettere stanno davvero.
3. **Guardalo in scala di grigi** Il colore può farti credere che il contrasto vada bene. La scala di grigi mostra solo la luminosità, da cui dipende la leggibilità.
4. **Controlla gli estremi** Misura il contrasto nei punti più chiari e più scuri dietro le parole, non la media.
5. **Guardalo su un telefono** A distanza di braccio, alla luce del giorno, alla dimensione in cui le persone lo vedranno davvero.

## Correggere uno sfondo che combatte il testo

La maggior parte delle correzioni aggiunge qualcosa: un riquadro, un’ombra, una fascia scura. Funzionano, ma ognuna è una toppa che fa sembrare il design salvato in extremis. Prova le correzioni in quest’ordine, dalla meno visibile alla più visibile.

### Prova prima

- Sposta le parole nella parte più calma dello sfondo
- Ritaglia o riposiziona lo sfondo così un’area calma sta dietro le parole
- Cambia inchiostro: testo scuro sulle regioni chiare, chiaro su quelle scure
- Ingrandisci e ispessisci il carattere
- Approfondisci o alza lo sfondo solo attorno alle parole

### Usa con parsimonia

- Riquadri pieni o fasce dietro il testo
- Ombre portate sulle lettere
- Contorni attorno alle lettere
- Forte sfocatura su tutta l’immagine
- Una sovrapposizione scura su tutto lo sfondo

Sul web, una morbida sovrapposizione a gradiente su un lato di un’immagine hero è una versione rispettabile della quinta correzione: approfondisce solo l’area sotto le parole e lascia in pace il resto della foto.

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

Approfondisce il lato sinistro, dove sta il titolo, e sfuma fino a niente al 70 per cento. Controlla il contrasto nel punto più chiaro dietro il testo.

Gradiently inserisce le correzioni meno visibili nello sfondo stesso. Un Mark sa dove sono le tue parole: la sua regione più calma e a miglior contrasto si sposta dietro il testo, i colori vicini alle lettere si approfondiscono o si alzano, i dettagli affollati si rilassano e l’Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark. Niente riquadri, ombre o sfocature, e sei tu a scegliere quanto forte risponde. [Come funziona l’Inchiostro automatico](https://gradiently.design/it/guide/auto-ink-legibility) spiega i dettagli, e [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) dà il metodo manuale per qualsiasi gradiente.

## FAQ

### Qual è il miglior colore di sfondo per il testo?

Qualsiasi colore che contrasti fortemente con il testo, almeno 4,5:1 per il testo normale. Gli sfondi molto chiari o molto scuri sono i più facili; i toni medi accesi come rosa, arancione e giallo richiedono testo scuro.

### Che rapporto di contrasto serve al testo?

Le WCAG chiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande.

### Perché il mio testo è difficile da leggere anche se il contrasto passa?

Probabilmente lo sfondo ha dettagli vicini alla dimensione delle lettere, oppure macchie chiare e scure sotto la stessa riga. Sposta le parole in un’area più calma e uniforme.

### Come rendo leggibile il testo su uno sfondo affollato?

Prima sposta le parole nell’area più calma o reinquadra l’immagine. Se non è possibile, approfondisci o alza solo l’area dietro il testo, e usa riquadri o ombre come ultima risorsa.

### Il testo bianco o nero si legge meglio sul colore?

Dipende dalla luminosità del colore. I colori scuri richiedono testo bianco; i colori chiari e accesi di solito si leggono meglio con un quasi nero.