Usabilità Sito: come scegliere il colore di testi e sfondi per la migliore leggibilità

Usabilità Sito: come scegliere il colore di testi e sfondi per la migliore leggibilità cover

In un recente contributo dell’AOA (American Optometric Association) viene indicato che il 58% degli americani adulti soffre di affaticamento agli occhi mentre lavora da PC, mentre il 26% dichiara lo stesso disturbo con i dispositivi mobile.

Nella fase di costruzione di un sito web, è fondamentale non sottovalutare il disagio e la percezione di affaticamento che deriva dalla lettura fisica di un testo su dispositivo digitale.

Cosa può provocare l’affaticamento oculare?

L’esposizione prolungata degli occhi su uno schermo videoterminale è già un fattore di notevole sforzo per lo sguardo, se poi lo studio dei colori e dei contrasti per l’impaginazione di un sito non viene fatto in modo accurato, il rischio è che l’utente abbandoni la pagina su cui è atterrato dopo pochi secondi.

Un errore che viene fatto frequentemente è quello di usare un testo nero puro abbinato a uno sfondo bianco. Il bianco ha il 100% di luminosità, mentre il nero puro ne ha lo 0%. È un contrasto decisamente troppo netto, che ostacola la leggibilità dell’utente sullo schermo e porta ad un notevole affaticamento degli occhi in poco tempo.

Un buon metodo per rendere il testo più gradevole alla lettura per esempio è applicare un testo di color grigio scuro (#444444) su sfondo bianco. La differenza sembra minima, ma con questo contrasto meno forte, l’occhio umano riesce ad adattare la luminosità in modo meno faticoso, diminuendo il fastidio fisico dell’utente e prolungando il tempo di permanenza sulla pagina.

differenza testo nero e grigio

La differenza tra un testo nero e un testo grigio scuro. Fonte: uxmovement.com

Lo stesso discorso può essere applicato anche invertendo i colori sfondo-testo (sfondo grigio scuro con testo bianco).

differenza sfondo nero e grigio

La differenza tra uno sfondo nero e uno sfondo grigio scuro. Fonte: uxmovement.com

Come assicurarsi di usare un contrasto bilanciato?

Un modo per capire il livello di contrasto idoneo tra i vari colori è attraverso l’utilizzo di uno strumento online, ad esempio “color contrast checker”. Questo tool permette di valutare se il contrasto tra due colori è troppo basso, ma abbiamo notato che non è in grado di indicare quando il contrasto è troppo alto.

Strumenti di questo tipo si basano sulle indicazioni dei parametri industriali WCAG 2.0.

Qualche consiglio per un contrasto ottimale

Per rendere una pagina efficace a livello di attenzione e leggibilità per l’utente, è senz’altro indispensabile creare buoni contenuti, ma è altresì utile assicurarsi che questi ultimi vengano presentati con impaginazione e colore adatti (sia per Desktop sia per Mobile).

Da qui, l’importanza di stabilire una palette di colori ottimale a seconda della pagina in cui si applica; testando e ottimizzando le variazioni di ogni tonalità, sia per quanto riguarda i blocchi di testo sia per i link e i bottoni.

Gradazioni di Colore Testo

Sfumature di grigio testate su sfondo bianco. Fonte: viget.com

La scelta dei colori può giocare un ruolo fondamentale nella User Experience di un sito – ed è ovviamente importante anche nella UX Mobile.

Concludendo: perché il Colore dei testi è determinante?

La conseguenza più interessante nell’ottimizzazione della leggibilità “fisica” di un testo sta nell’aumento della permanenza dell’utente nel sito.

Il visitatore che legge un contenuto web dai contrasti troppo forti tra testo e sfondo ha tendenzialmente gli occhi affaticati dopo pochi secondi, di conseguenza abbandona il sito prima.

L’ utente che invece atterra in una pagina dove i messaggi hanno contrasti equilibrati e tonalità ben bilanciate, ha la vista meno affaticata e si sofferma a leggere il contenuto per un tempo più elevato, proseguendo nella navigazione.

Francesca GarofolinArt Director

Fonte continua di creatività in Adviva Web Agency. I suoi ingredienti sono la tavoletta grafica, una buona dose di follia e tutte le suite di graphic design e prototipazione. Affianca il team di sviluppo nella ricerca costante di nuovi stimoli, trend e stili.

e-book «kit dell’e-commerce customer oriented»

Scopri i gesti necessari per il benessere del tuo progetto digitale.