Inchiostro automatico: come Gradiently sceglie testo chiaro o scuro

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, e le soluzioni solite, riquadri dietro le parole e ombre, coprono proprio lo sfondo che avevi scelto.

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.

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.

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

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à spiega i rapporti, e il verificatore di contrasto di WebAIM permette di provare qualsiasi coppia.

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

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. L’inchiostro automatico sceglie poi l’inchiostro per quell’area assestata, così i due si rafforzano a vicenda.

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

Riquadri e ombre funzionano, ma si fanno notare e nascondono lo sfondo. Le alternative alle ombre del testo spiegano perché, e il testo su sfondi movimentati offre altri modi per mantenere le parole leggibili senza.

Ottenere il massimo dall’inchiostro automatico

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