Testo leggibile sopra le immagini: rapporto di contrasto e regole

Un testo sopra un’immagine è leggibile quando la differenza di luminosità tra il colore delle lettere e lo sfondo immediatamente dietro è abbastanza grande. Questa differenza si misura con il rapporto di contrasto. Le linee guida per l’accessibilità del web, WCAG, raccomandano almeno 4,5:1 per il testo normale e almeno 3:1 per il testo grande. La difficoltà, sopra un’immagine, è che lo sfondo non ha un unico colore, quindi il rapporto va valutato rispetto all’area più difficile sotto il testo.

Questo articolo spiega come si calcola il rapporto di contrasto, che cosa significano le soglie, come misurare su uno sfondo variegato, quali tecniche migliorano la leggibilità e quali errori sono frequenti. Nell’ultima sezione troverà come Design Studio su Yeşilçam Studios applica la stessa misura.

Che cos’è il rapporto di contrasto e come si calcola?

Il rapporto di contrasto WCAG si basa sulla luminanza relativa di due colori. La luminanza relativa esprime quanto appaiono luminose all’occhio le componenti rossa, verde e blu di un colore, da 0 (nero) a 1 (bianco). Poiché l’occhio è più sensibile al verde e meno sensibile al blu, le componenti non hanno lo stesso peso: il verde conta per circa il 72 percento, il rosso per il 21 percento e il blu per il 7 percento.

Il rapporto si calcola così: si aggiunge 0,05 alla luminanza del colore più chiaro, si aggiunge 0,05 alla luminanza del colore più scuro e si divide il primo valore per il secondo. Il risultato va da 1:1 (lo stesso colore) a 21:1 (bianco su nero). La sola tinta non crea contrasto: rosso e verde con la stessa luminanza possono sembrare vivaci affiancati, ma come testo sono difficili da leggere.

Che cosa significano le soglie 4,5:1 e 3:1?

Caso	Rapporto minimo (AA)	Livello più severo (AAA)
Testo normale	4,5:1	7:1
Testo grande (circa 18 punti e oltre, o 14 punti in grassetto)	3:1	4,5:1
Componenti dell’interfaccia e grafica significativa	3:1	Non definito

Le soglie sono state scritte per il web, ma la loro logica vale anche per la stampa e per le immagini dei social media. Il testo grande si legge con un rapporto più basso perché le forme delle lettere sono ampie. Testo corrente piccolo, date, indirizzi e note a piè di pagina richiedono un rapporto più alto. I manifesti si guardano da lontano e le immagini social sul piccolo schermo di un telefono, spesso alla luce del sole, quindi restare sopra le soglie fa una differenza concreta nelle condizioni reali.

Come si misura il contrasto su uno sfondo variegato?

Su uno sfondo a tinta unita la misura è un singolo numero. Su una foto o un’illustrazione, sotto il testo convivono zone chiare e scure. Guardare il colore medio è fuorviante: se l’80 percento di un titolo poggia su un cielo scuro e il 20 percento su una nuvola luminosa, la media sembra buona, ma le lettere sopra la nuvola scompaiono.

1. Individui l’area coperta dal testo e l’immediato intorno delle lettere; è lo sfondo che influisce sulla lettura.
2. Per ogni pixel di sfondo in quell’area, calcoli il rapporto di contrasto con il colore del testo.
3. Guardi la porzione più debole, non la media. Un metodo pratico consiste nel prendere il limite del 10 percento più basso dei rapporti.
4. Confronti quel valore con la soglia per il tipo di testo: 3:1 per titoli e testo grande, 4,5:1 per gli altri testi.
5. Se non basta, applichi una delle tecniche seguenti e misuri di nuovo.

Perché le condizioni di lettura cambiano tra manifesti, schermi e social media?

Lo stesso rapporto dà risultati diversi in condizioni di lettura diverse. Misurare il contrasto è un punto di partenza; bisogna anche considerare dove e come verrà visto il progetto.

• Manifesti e roll-up. Si vedono da lontano, spesso passando. Il titolo deve essere letto in pochi secondi, quindi un corpo grande, un peso marcato e uno sfondo tranquillo contano quanto il rapporto stesso.
• Schermi dei telefoni. Le immagini social compaiono come un piccolo quadrato nel feed, spesso con la luminosità abbassata o con lo schermo al sole. Un sottotitolo che si legge bene a schermo intero può scomparire nella piccola anteprima del feed.
• Materiale stampato. La carta non emette luce; riflette quella dell’ambiente. Sulla carta opaca i toni scuri si schiariscono un po’ e i colori si spengono; un rapporto che a schermo passa di poco può risultare insufficiente in stampa.

Un’abitudine pratica: controlli il progetto alla sua dimensione finale e nelle sue condizioni finali. Guardi un’immagine social rimpicciolita su un telefono, un manifesto ridotto a schermo come se lo vedesse da lontano e un lavoro di stampa con l’anteprima di stampa.

Quali tecniche migliorano la leggibilità?

• Scelta del colore. La prima cosa da provare è cambiare il colore del testo: una versione molto chiara o molto scura della stessa tinta, un altro colore della Sua palette, il bianco o un quasi nero. È la strada che cambia meno il carattere del progetto.
• Spostarsi in un’area tranquilla. Una parte dell’immagine uniforme e povera di dettagli (cielo, muro, pavimento) è un posto naturale per il testo. Lasciare libero quello spazio quando si costruisce la composizione dà il risultato più pulito.
• Fascia o box di sfondo. Mettere una fascia piena o semitrasparente dietro il testo rende il rapporto indipendente dallo sfondo. Appare naturale negli stili grafici piatti come il design svizzero.
• Contorno (traccia). Un sottile contorno di colore contrastante intorno alle lettere separa il testo da uno sfondo movimentato. In stili come la pop art e il fumetto fa parte dell’estetica.
• Ombra e velatura. Un’ombra morbida, o una sfumatura che scurisce l’immagine verso l’area del testo (una velatura, in inglese scrim), aumenta il contrasto. Poiché in stampa comporta trasparenza, può influire sulla scelta dello standard PDF.
• Carattere e corpo. Un peso più marcato e un corpo più grande si leggono meglio a parità di rapporto. I caratteri sottili sono i primi a scomparire sopra le immagini.

Quali sono gli errori più comuni?

• Decidere in base al colore medio. La parte più chiara o più scura dello sfondo rende invisibile una parte del testo.
• Far passare il testo sopra il prodotto o il logo. Né il prodotto né il testo si leggono. Testo, prodotto e logo dovrebbero stare in aree separate.
• Dimenticare la perdita di colore in stampa. Un rapporto che a schermo passa di poco può scendere sotto la soglia quando i colori si spengono in CMYK; i dettagli sono nell’articolo su CMYK e RGB.
• Affidarsi alla sola tinta. Verde su rosso o viola su blu, con luminanza simile, sono illeggibili per chi ha una discromatopsia.
• Applicare la stessa correzione a ogni testo. Un’ombra sufficiente per un titolo grande non salverà una piccola riga d’indirizzo.

Come si misura e si corregge la leggibilità su Yeşilçam Studios?

Design Studio non dipinge i testi nell’immagine; ogni testo è un livello separato e modificabile. Questo permette di misurare lo sfondo reale sotto il testo. La misura è la stessa descritta in questo articolo: prende il 10 percento più basso dei rapporti di contrasto dei pixel sotto il testo e di un anello intorno alle sue lettere. La soglia è 3:1 per i titoli e i testi grandi rispetto all’altezza della tela, e 4,5:1 per gli altri testi.

Quando Sam prepara un progetto, i testi vengono verificati con questa misura rispetto allo sfondo reale; un testo insufficiente viene spostato, ricolorato oppure riceve un contorno o una fascia adatti allo stile. Viene controllato anche il testo che passa sopra un prodotto o un logo. Quando seleziona un livello di testo nell’editor, l’indicatore «Leggibilità» mostra il rapporto misurato: «Si legge bene» se è sufficiente, altrimenti «Contrasto basso» con il rapporto minimo necessario. In quel caso compare il pulsante «Rendi leggibile»; cerca prima il colore più vicino a quello attuale che supera la soglia (una versione più chiara o più scura della stessa tinta, colori delle palette del progetto e del marchio, il bianco, un quasi nero); se nessuno basta, aggiunge al testo un contorno contrastante. Può anche impostare il contorno da sé con i campi «Contorno del testo» e «Spessore del contorno».

All’esportazione, la finestra La avvisa, indicandone il numero, se qualche livello di testo non si stacca abbastanza dallo sfondo; l’avviso non blocca il download. L’indicatore di leggibilità e «Rendi leggibile» nell’editor non costano token aggiuntivi. Per una guida schermata per schermata, consulti la guida all’editor e alla leggibilità; per il Suo primo progetto, la guida per iniziare con Design Studio.

Domande frequenti

Le WCAG non valgono solo per il web? Le linee guida sono state scritte per i contenuti web, ma il rapporto di contrasto è un metodo generale per misurare la differenza di luminanza tra i colori. Con la stessa logica è un buon riferimento per manifesti, menu e immagini social.

Un rapporto di 3:1 basta per un titolo? Per titoli grandi e in grassetto, 3:1 è il livello minimo delle WCAG. Per un manifesto letto a distanza o uno schermo guardato al sole, un rapporto più alto è più sicuro.

Perché misurare il 10 percento più basso e non la media? Chi legge inciampa nella parte più debole del testo. La media nasconde le lettere perse sopra una nuvola luminosa o un’ombra scura; la fascia più bassa coglie questo rischio.

«Rendi leggibile» rovinerà i colori del progetto? Sceglie prima il colore più vicino a quello attuale che supera la soglia, quindi la modifica è la più piccola possibile. Se il risultato non Le piace, lo annulli e regoli a mano il colore o il contorno.

Il contorno crea problemi in stampa? No. Il contorno viene disegnato in vettoriale insieme al testo e resta nitido negli output PDF/X-4, SVG ed EPS.