Evitate di usare colori fluo se non siete in Cyberpunk

DEVSIGN TIPS - Piccoli consigli di design per gli sviluppatori

Se avete giocato con Cyberpunk 2077 o siete fan di questo stile, ne avrete visti in abbondanza ma utilizzare colori fluorescenti per un sito web non garantisce una buona accessibilità.

Più in generale, senza un contrasto minimo tra testo e sfondo, il nostro sito web non sarà di facile lettura per tutti gli utenti.

Ricordate che un buon design deve servire tutti gli utenti, rispondendo per quanto è possibile al principio di universalità sul quale si fonda lo stesso progetto del World Wide Web: chiunque deve poter accedere al servizio, al contenuto, anche se non necessariamente nello stesso identico modo. Allo stesso tempo dovrebbe fornire anche il servizio o l'esperienza più confortevole per ognuno di essi.

"Il potere del web risiede nella sua universalità. L'accesso da parte di ogni persona, indipendentemente dalle disabilità, ne è un aspetto essenziale.” Tim Berners-Lee

Il colore e la parte grafica sono una caratteristica importante che definiscono buona parte dell’aspetto di una pagina web.

In fase di progettazione bisogna tener conto di quelle persone che hanno difficoltà e ciò che sembrano semplici scelte grafiche dettate dall’estro del designer/sviluppatore potrebbero risultare sbagliate.

Per esempio, le persone che, per qualsiasi motivo, non godono di un’eccellente vista avranno problemi di lettura della pagina web quando non c’è abbastanza contrasto tra i testi e il colore di sfondo.

Questo può accadere se, ad esempio, abbiamo uno sfondo di uno sgargiante rosa fluo, ed il testo di un paragrafo con un simpatico colore arancione brillante: a parte lo strambo abbinamento di colori per il quale Johannes Itten si rivolterebbe nella tomba, il testo risulterebbe illeggibile o comunque davvero molto fastidioso per molti.

Secondo le linee guida della WCAG i due livelli di contrasto accettabili sono AA e AAA.

• nel livello AA il contrasto tra testo e sfondo ha un rapporto di almeno 4.5:1;
• nel AAA il rapporto deve essere di almeno 7:1.

Questo significa mettere un freno alla creatività?

No. Basta trovare un giusto compromesso.

Inoltre, implementare soluzioni Web accessibili migliora sicuramente la fruizione dei contenuti da parte di tutti, non solo delle persone con disabilità. È il cosiddetto effetto “Scivolo” (“Curbcut” effect), dal nome delle rampe di salita e discesa che si predispongono per persone costrette su sedie a rotelle. Tramite queste piccole discese o appunto scivoli, progettati prima espressamente per aiutare determinati individui, anche altre persone ne traggono beneficio, dalla mamma che spinge il passeggino, alla persona anziana, alla persona con un trolley.

L’accessibilità è un argomento davvero vasto. Anche solo sulla scelta dei colori ci sarebbe un’infinità di cose da dire ma questo è il nostro primo consiglio: a meno che non siate nella Los Angeles di Blade Runner, evitate di usare abbinamenti di colori fluorescenti.

Vuoi scoprire se i colori del tuo sito hanno un contrasto accessibile? -> Contrast checker

Vuoi approfondire il tema dell’accessibilità? -> W3C

E si, di Accessibilità ne abbiamo parlato anche noi nella live con Andrea Saltarello, Sauro Cesaretti e Stefano Ottaviani.