Che grigio usare per testo e fondo?

Immagine copertina ironica sul libro 50 sfumature di grigio

Nel mondo del web design il grigio è uno dei colori più utilizzati, ma quali tonalità di grigio è più leggibile?

 

Grigio chiaro e i problemi di lettura

Se il grigio è troppo chiaro può causare una forte difficoltà nella lettura. Può essere difficile distinguerlo del colore – tendenzialmente chiaro – del backgruond. Rendendo il riconoscimento delle lettere una procedura complicata, si causa un grande sforzo oculare.

Così è difficile da leggere!!

Se questo colore viene utilizzato nel menu, gli utenti sono più propensi a cliccare il tasto sbagliato sopratutto se si presentano varie opzioni.

Inoltre causa grossi problemi di accessibilità, il basso contrasto va a colpire soprattutto: utenti anziani, ipovedenti, chi ha una risoluzione bassa nello schermo o dispositivi mobile con poca luminosità.

46% Luminosità

Conoscendo quindi i limiti e le difficoltà del colore grigio. E’ importante che il designer non usi tonalità troppo chiare,

Gli standard 3WC (World Wide Web Consortium), hanno dichiarato hanno dichiarato che:

il testo deve avere almeno un indice pari al 4.5:1 di contrasto con lo sfondo

 

Se vuoi approfondire ti rimando a questo link: WCAG 2.0.  contrast ratio of at least 4.5:1.

 

Il grigio è l’unico colore che non possiede saturazione o tonalità ma solamente la luminosità generalmente calibrata su una scala percentuale.

gray-text-46-brightness

Applicando il testo color grigio su sfondo bianco non dovrebbe mai eccedere del 46% di luminosità (colore grigio: #767676). Questa accortezza garantisce il giusto contrasto tra grigio/bianco.

58% di luminosità per grandezza di 18 o maggiore.

Per i font grandi più di 18 points, si può utilizzare anche un grigio leggermenete più chiaro, perchè testo grande è più semplice da leggere. Usando un 58% di luminosità, non si vengono a creare grossi problemi di leggibilità.

gray-text-58-brightness

 

Per controllare il constrasto di colore tra sfondo e testo consiglio questo sito:  http://snook.ca/technical/colour_contrast/colour.html

Articolo tratto dal blog UxMovement.

 

 

Condividere è sexy:

Leave a Reply

eliapoliblog