# Inchiostro automatico: come Gradiently sceglie testo chiaro o scuro

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

Un gradiente è chiaro in un punto e scuro in un altro, quindi nessun colore di testo va bene per tutto. L’inchiostro automatico decide riga per riga, e il Mark aiuta da dietro.

## The short version

- L’inchiostro automatico è un’impostazione di Gradiently che sceglie testo chiaro o scuro per ogni riga, quello che si legge meglio sulla parte del Mark proprio dietro di essa.
- Entrambi gli inchiostri vengono dalla palette del Mark, quindi il testo appartiene sempre allo sfondo invece di ripiegare su bianco o nero puro.
- Il testo si può anche fissare sull’inchiostro chiaro o su quello scuro quando vuoi un solo colore a prescindere dallo sfondo.
- L’inchiostro automatico lavora insieme alla reazione del Mark, che fa depositare il materiale dietro le parole, da Disattivo a Invisibile, Sottile, Chiaro e Deciso.
- Nessuno dei due usa riquadri, ombre o sfocature, e scegli tu quanto forte risponde il Mark.

L’**inchiostro automatico** è il modo in cui Gradiently sceglie il colore del tuo testo. Per ogni riga impostata su Auto, guarda la parte del Mark che ha direttamente dietro e sceglie l’inchiostro chiaro o quello scuro, quello che lì si legge meglio. Entrambi gli inchiostri vengono dalla palette del Mark, quindi un titolo su un angolo pallido diventa scuro mentre una didascalia su una fascia scura diventa chiara, e tutti e due sembrano ancora dello stesso brand.

## Perché un solo colore di testo non basta su un gradiente

Su uno sfondo piatto scegli il colore del testo una volta sola. Un gradiente cambia mentre procede: la parte alta di una storia può essere quasi bianca e quella bassa quasi nera. Un testo bianco che si legge benissimo in basso sparisce in alto, e un titolo lungo può attraversare entrambe le zone. È il problema centrale del [testo su sfondo sfumato](https://gradiently.design/it/guide/text-on-gradient), e le soluzioni solite, riquadri dietro le parole e ombre, coprono proprio lo sfondo che avevi scelto.

Una storia verticale che annuncia i saldi di uno studio, dove il colore del testo fa fatica con le zone più chiare e più scure del gradiente

Un solo colore fisso su uno sfondo che cambia: parti del testo lottano con il materiale.

La stessa storia dei saldi dello studio con ogni riga nell’inchiostro chiaro o scuro che si legge meglio e un materiale più calmo dietro le parole

Inchiostro automatico con il Mark che reagisce: ogni riga prende l’inchiostro che si legge e il materiale si deposita dietro.

## Come l’inchiostro automatico sceglie chiaro o scuro

Ogni Mark porta un inchiostro chiaro e uno scuro presi dalla sua palette: un tono pallido e uno profondo che stanno bene con i suoi colori. Quando una riga è impostata su Auto, Gradiently misura il materiale nell’area che quella riga copre e le dà l’inchiostro che risalta di più. Sposta il testo e la scelta lo segue. Ridimensiona il design in una storia o in un banner, dove la luce cade altrove, e ogni riga viene scelta di nuovo.

- Inchiostro chiaro: #fbf3ea
- Luce pesca: #e9a27c
- Rosa intermedio: #9c4f6b
- Ombra prugna: #3b1f3f
- Inchiostro scuro: #1a0f1f

Una palette di esempio di un Mark con i suoi due inchiostri alle estremità. Gli inchiostri sono tinti con il calore del Mark, non bianco e nero puri.

L’idea alla base è la stessa misura di contrasto usata dalle linee guida di accessibilità del web: confrontare quanto è chiaro il testo con quanto è chiaro lo sfondo. Ecco il principio in poche righe di codice, per chi costruisce qualcosa di simile sul 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
```

Solo il principio, non il codice di Gradiently. Uno sfondo reale varia sotto una riga, quindi va misurata l’area dietro di essa, non un singolo pixel.

Quanto ai numeri, le WCAG chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) spiega i rapporti, e il [verificatore di contrasto di WebAIM](https://webaim.org/resources/contrastchecker/) permette di provare qualsiasi coppia.

## Auto, chiaro o scuro: le tre modalità dell’inchiostro

| Modalità | Cosa fa | Quando usarla |
| --- | --- | --- |
| Auto | Sceglie l’inchiostro chiaro o scuro per riga in base a ciò che c’è dietro | Quasi sempre: titoli, dettagli, didascalie su uno sfondo che cambia |
| Chiaro | Usa sempre l’inchiostro chiaro del Mark | Un Mark scuro in cui vuoi che ogni riga sia uguale, come una citazione |
| Scuro | Usa sempre l’inchiostro scuro del Mark | Un Mark pallido, cartaceo, o una stampa in cui vuoi un solo inchiostro coerente |

Il testo parte su Auto. Passare una riga a un inchiostro fisso è una scelta nelle impostazioni del colore del testo, e «Torna a inchiostro Auto» la riporta indietro.

Puoi comunque colorare il testo con qualsiasi colore del tuo brand kit o della palette del Mark. L’inchiostro automatico è l’impostazione predefinita perché è la scelta che continua a funzionare quando il design passa a un’altra misura.

## Come il Mark aiuta da dietro

Scegliere l’inchiostro giusto è metà del lavoro. L’altra metà è lo sfondo stesso. Un Mark sa dove sono le parole: la sua regione più calma e con il miglior contrasto si sposta dietro il testo, i colori vicino alle lettere si approfondiscono o si schiariscono, e i dettagli più movimentati si distendono. Il meccanismo completo è in [uno sfondo che si adatta al testo](https://gradiently.design/it/guide/text-reacts-to-background). L’inchiostro automatico sceglie poi l’inchiostro per quell’area assestata, così i due si rafforzano a vicenda.

| Reazione | Cosa succede dietro le tue parole |
| --- | --- |
| Disattivo | Il materiale ignora le tue parole |
| Invisibile | Solo dove serve; nessuno se ne accorge |
| Sottile | Equilibrato: il look resta, le parole si leggono |
| Chiaro | Le parole vincono sempre |
| Deciso | Il massimo contrasto possibile, calmo un po’ più largo |

I livelli di reazione che puoi scegliere per un design, dal materiale che ignora le parole a quello che dà il massimo contrasto possibile.

Oltre ai preset, quattro regolatori permettono di affinare: **Tono**, quanto il materiale si deposita dietro le parole per il contrasto; **Calma**, quanto si rilassano distorsione e movimento; **Piega**, una leggera piega del motivo ai bordi delle parole; e **Raggio**, quanto intorno alle parole risponde. Scegli tu quanto forte agisce, così un manifesto può restare scatenato mentre un menu resta quieto.

## Cosa l’inchiostro automatico evita di proposito

### Da evitare

- Un riquadro pieno dietro ogni riga
- Ombre che sporcano i bordi delle lettere
- Sfocare lo sfondo dietro il testo
- Testo bianco puro su un angolo pallido

### Da fare

- Lasciare che ogni riga prenda l’inchiostro che si legge
- Lasciare che il Mark depositi un’area più calma dietro le parole
- Tenere gli inchiostri nella palette del Mark
- Alzare il livello di reazione per testi piccoli o lunghi

Riquadri e ombre funzionano, ma si fanno notare e nascondono lo sfondo. Le [alternative alle ombre del testo](https://gradiently.design/it/guide/text-shadow-alternatives) spiegano perché, e il [testo su sfondi movimentati](https://gradiently.design/it/guide/type-on-busy-backgrounds) offre altri modi per mantenere le parole leggibili senza.

## Ottenere il massimo dall’inchiostro automatico

1. **Lascia il testo su Auto** Fissa una riga su chiaro o scuro solo quando hai un motivo preciso, come far combaciare un set stampato.
2. **Scegli una reazione per il lavoro** Sottile va bene per la maggior parte dei post social. Scegli Chiaro o Deciso per testi piccoli, dettagli lunghi o tutto ciò che si legge da lontano.
3. **Controlla ogni misura** Dopo il ridimensionamento, guarda ogni formato. L’inchiostro viene scelto di nuovo per ciascuno, ed è di solito ciò che vuoi.
4. **Tieni i titoli brevi** Una riga che attraversa dalla parte più chiara a quella più scura di un Mark è più difficile per qualsiasi inchiostro. Spezzala in due righe.

## FAQ

### Cos’è l’inchiostro automatico in Gradiently?

Un’impostazione del colore del testo che sceglie l’inchiostro chiaro o scuro del Mark per ogni riga, a seconda di quale si legge meglio sulla parte di sfondo che ha dietro.

### Posso disattivare l’inchiostro automatico?

Sì. Imposta una riga per usare sempre l’inchiostro chiaro o quello scuro, oppure dalle il colore che preferisci. «Torna a inchiostro Auto» la riporta indietro.

### L’inchiostro automatico aggiunge ombre o riquadri dietro il testo?

No. Cambia solo il colore del testo. Il Mark stesso deposita un’area più calma dietro le parole, senza riquadri, ombre o sfocature.

### Che rapporto di contrasto deve avere il testo su uno sfondo?

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

### Perché il mio testo ha cambiato colore dopo il ridimensionamento?

In una nuova misura la luce cade in un punto diverso, quindi l’inchiostro automatico sceglie di nuovo l’inchiostro per ogni riga per mantenerla leggibile.