Testo su sfondo con gradiente: come renderlo leggibile ogni volta

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.

Le soglie arrivano dalle linee guida WCAG sul contrasto: 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 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.

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?

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 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.

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

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 elenca caratteri robusti che si leggono sui telefoni.

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

1. 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. 2

   Guardalo in scala di grigi

   Desatura una copia del design. Senza la tinta, un contrasto di luminosità debole salta subito all’occhio.

3. 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. 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. 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.