Tempo di Lettura: 3 min.

Oggi la rete è stracolma di articoli che parlano dell’utilizzo dei colori nel web design, ma in questo articolo vorrei affrontare un aspetto leggermente differente rispetto alla mera questione estetica, ovvero quanto siano efficaci i colori nel progettare siti web accessibili e, di conseguenza, efficaci.

Quando parliamo di accessibilità molti associano questo termine all’equazione Accessibilità = Disabilità, ma in realtà progettare siti web accessibili non ha soltanto a che fare con persone affette da disabilità. Il campo dell’accessibilità è molto vasto ed è utile capirne i principi perché ciò permette non solo di progettare siti web più efficaci, ma di renderli anche più appetibili ai motori di ricerca ad esempio. Un sito accessibile è un sito che presenta alcuni accorgimenti che dovrebbero entrare nel quotidiano di ogni sviluppatore, come pulizia del codice, tag semantici, giusti contrasti e molto altro.

Per parlare di accessibilità in generale occorrerebbero molti articoli, ma in questo intervento vorrei essenzialmente porre l’attenzione sui colori, ovvero su come i colori possono aiutarci, attraverso i principi di progettazione conosciuti, a sviluppare siti web accessibili.

Perché sono importanti i colori nel web design?

Progettare siti web accessibili significa dare la possibilità a tutte le persone, comprese quelle con disabilità visive, vocali, uditive, fisiche o cognitive, di fruire di un determinato sito web, in qualsiasi condizione e con qualsiasi supporto. Provate a pensare a come un non vedente usufruisce del vostro sito web: si conta che solo in Italia fossero presenti solo nel 2016 circa 116.000 ciechi invalidi. Quindi 116.000 persone, utenti e possibili clienti di siti web e e-commerce. Capite quindi che non stiamo parlando di poche centinaia di persone, ma di un numero considerevole che rischia di rimanere totalmente isolato.

Allo stesso modo quindi l’accessibilità ai colori consente alle persone con disabilità visive o di visione dei colori di interagire con i siti web in maniera del tutto normale.

Come si progettano i colori nel web design?

Per fare sì che i colori scelti nel nostro progetto di sviluppo web siano anche accessibili occorre fare un piccolo sforzo proprio in fase di progettazione, seguendo alcuni accorgimenti di design e, aggiungo io, di buon senso.

Vediamoli nel dettaglio:

1. 1. Contrasto

      Nella scelta dei colori è molto importante il contrasto, purtroppo molti designer si lasciano spesso sopraffare dai propri gusti personali o da rigide imposizioni del cliente; io per primo ad esempio amo molto i toni pastello, tuttavia questa scelta non sempre è vincente in termini di accessibilità.

      In linea generale, secondo i dati del W3C (il consorzio indipendente che sviluppa gli standard del web), un contrasto ottimale dei colori dovrebbe essere di 4,5:1. Questo tipo di contrasto quindi andrebbe applicato ad elementi importanti come pulsanti, CTA, menù, ecc.
      Potete misurare il contrasto dei colori utilizzati attraverso diversi strumenti, come la Console Sviluppatori di Chrome, oppure con WebAIM ad esempio.
      

       

   2. Indicazione

      Per quanto possa sembrare efficace è sempre meglio non fare affidamento solo sul colore, ma è utile associare ad esso la giusta indicazione soprattutto nei campi di input, come richieste informazioni, ecc. Ad esempio quando il valore inserito nel campo è errato e va corretto.

      

   3. Pattern

      Quando occorre utilizzare elementi colorati molto ravvicinati tra loro è bene fare uso di pattern o elementi grafici, questo aiuta i daltonici ad esempio a distinguere meglio i vari elementi senza troppo sforzo.
      

   4. Focus States

      I Focus States sono letteralmente indicatori di messa a fuoco, in genere vengono visualizzati sui campi di input o di azione in modo predefinito dai browser come Chrome e non sono altro che marcatori visivi che mostrano quale elemento di una pagina web è focalizzato. Questo aiuta le persone che non possono utilizzare il mouse a navigare un sito web con il solo utilizzo della tastiera.

Conclusioni

Siamo giunti quindi alla fine di questo argomento sui colori nel web design, in particolare nella progettazione di colori accessibili per il web design. Se volete approfondire l’argomento Accessibilità vi consiglio di leggere le specifiche del W3C che potete raggiungere a questo indirizzo, oppure potete partecipare ai numerosi gruppi di discussione sull’argomento.

Spero che questo sia un input per progettare siti web accessibili, fruibili e, quindi, migliori.