L’argomento che tratteremo in questo secondo capitolo della rubrica riguarda l’uso dei colori e come l’accostamento di questi può creare contrasto per agevolare l’utilizzo di un sito web. In particolare, ci riferiremo durante l’articolo al contrasto testuale, quindi tra il colore del testo e il colore dello sfondo, e il contrasto di colore tra diversi elementi grafici nel sito web.
Per chi sono importanti colori e contrasto?
Colore e contrasto sono elementi fondamentali per l’accessibilità di un sito web per tutti gli utenti in generale, in quanto l’uso di questi elementi è importante per dare il giusto peso alle informazioni presentate nella pagina web e renderle facilmente fruibili.
Esistono alcune condizioni che non permettono di avere condizioni di luminosità ottimale, come ad esempio in spiaggia al mare: il contrasto di colore diventa particolarmente importante in questi tipo di contesti.
Ecco alcuni esempi di persone che possono beneficiare di siti web con elevato contrasto:
- Utenti ipovedenti, hanno spesso una visione limitata del colore;
- Utenti più anziani, spesso non distinguono bene i colori;
- Utenti daltonici, beneficiano in particolare modo quando le informazioni non sono veicolate e differenziate solo tramite il colore;
- Utenti che usano screen reader spesso non beneficiano delle informazioni differenziate solo per colore;
Spesso però chi progetta un sito non tiene in considerazione quella parte di utenti che soffre di disturbi visivi come possono essere le persone ipovedenti con dislessia e le persone daltoniche.
Abbiamo parlato di ipovisione e dislessia in altri articoli, per questo qui approfondiremo un disturbo particolare della vista come il daltonismo.
Ci limitiamo solo a ricordare che:
- Gli ipovedenti spesso non hanno un’accurata percezione del colore e necessitano quindi di un contrasto elevato per poter leggere;
- Le persone con dislessia hanno difficoltà a decodificare il testo scritto. Anche per queste persone, quindi, il contrasto elevato è di grande aiuto.
Il daltonismo è una condizione in cui si ha un’alterata percezione dei colori. Esistono diversi tipi di daltonismo, più precisamente quattro tipologie:
- Acromatopsia: visione monocromatica, ovvero in bianco e nero;
- Protanopia: insensibilità al rosso, e la sua versione più lieve, la protanomalia, ovvero l’insufficiente sensibilità al rosso;
- Deuteranopia: insensibilità al verde, e deuteranomalia/teranomalia ovvero scarsa sensibilità al verde;
- Tritanopia: insensibilità al blu, al violetto e al giallo, e tritanomalia, l’insufficiente sensibilità a questi colori.
L’immagine seguente illustra come una persona daltonica vede a seconda della tipologia di daltonismo:
Ora che abbiamo capito a quali utenti il colore può creare problemi di accessibilità vediamo come si definisce il colore.
Prima di analizzare come può essere usato il colore in modo accessibile, capiamo come il colore stesso viene definito e utilizzato nei siti web.
Il colore può essere indicato con tre diverse notazioni:
- RGB (Red, Green, Blue): è la quantità di rosso, verde e blu che forma ogni colore. Ognuna delle tre componenti è definita da un numero tra 0 e 255.
- Esadecimale: è un formato molto comune tra i siti web e definisce il colore tramite un codice composto da una combinazione di sei tra lettere e numeri.
- HSL (Hue, Saturation, Lightness): questa notazione definisce in modo più vicino a come il nostro occhio percepisce i colori. I colori sono definiti da un valore per il contrasto, una percentuale per la saturazione e una percentuale per la luminosità.
In aggiunta a queste tre notazioni esiste il valore Alpha che definisce l’opacità o la trasparenza di un colore. Il valore Alpha influisce in modo considerevole al contrasto di un colore con il suo sfondo.
Colore e contrasto del testo: quando sono accessibili?
Normalmente ci si riferisce al contrasto quando si parla di testo, quindi a come i colori del testo interagiscono con i colori di sfondo.
Per capire se il nostro sito web ha un contrasto considerato accessibile, esistono delle linee guida da seguire racchiuse nelle Web Accessibily Guidelines (WCAG). Queste linee guida sono definite dal Web Accessibility Initiative (WAI) che a sua volta fa parte del World Wide Web Consortium (W3C).
Nelle WCAG il contrasto è la misura della differenza percepita nella “luminosità” tra due colori. Questa differenza di luminosità è definita da una proporzione.
L’associazione non-profit WEBAIM (Web Accessibility In Mind) mette e disposizione sul proprio sito uno strumento per calcolare questa proporzione: Color Contrast Checker
Grazie a questo strumento si possono inserire i colori utilizzati nel proprio sito web e calcolare la proporzione di contrasto tra i due. Le WCAG hanno due livelli di contrasto accettabili: AA e AAA. Il livello AA definisce una proporzione di 4.5:1 come accessibilità minima del contrasto; mentre il livello AAA è un po’ più stringente e richiede una proporzione di 7:1.
Eccezioni
Esistono delle eccezioni previste dalle WCAG, per le quali non è necessario rispettare il contrasto minimo indicato qui sopra. Di seguito ne elenchiamo alcune:
- Inattivi: gli elementi inattivi sono identificati spesso da un basso contrasto.
- Decorativi: testi che non sono importanti per il contenuto ma sono nati per essere di contorno o appunto decorativi.
- Non visibili da nessuno: testi che non devono essere visti fin a quando non diventano attivi.
- Parte di un’immagine non significativa per il contenuto: testi che non sono parti informative di un’immagine.
Altri elementi dove il colore e il contrasto sono fondamentali
Oltre agli elementi testuali, esistono altri elementi in un sito web dove colore e contrasto diventano centrali in un’ottica di accessibilità. Questi elementi possono essere componenti della User Interface (UI, interfaccia utente) oppure dei semplici elementi grafici come dei bottoni per delle call to action.
Per le componenti della UI è difficile definire un contrasto accettabile in quanto ogni stato dell’elemento deve presentare una proporzione di contrasto adeguata. Cosa significa? Prendiamo come esempio le icone dei social network:
Queste icone avranno diversi stati che cambiano a seconda dell’interazione con l’utente. Solitamente esistono tre stati: uno di partenza, come quello nell’immagine; un secondo quando l’utente passa sopra il mouse; un terzo quando l’icona viene cliccata. Ognuno di questi stati deve presentare una proporzione di contrasto adeguata al livello di accessibilità ricercato.
La necessità di un contrasto accessibile per gli elementi grafici dipende se questi ultimi sono fondamentali per la comprensione del contenuto. Prendiamo come esempio le icone dei social network riportate nell’immagine sopra. Se l’icona è presentata con un’etichetta testuale e il testo ha una proporzione di contrasto considera accettabile, allora l’icona può avere una proporzione più bassa in quanto non necessaria per comprendere il contenuto.
Conclusioni
Le WCAG non proibiscono nessun colore in particolare né nessuna combinazione di colori, ma i criteri di valutazione di accessibilità proibiscono il solo utilizzo del colore per presentare informazioni importanti sul sito web. Questo perché il colore può non essere percepibile da tutti gli utenti. Esse inoltre raccomandano il rispetto di un contrasto minimo, ossia l’utilizzo dei colori a differente luminosità in modo tale da rendere facile la lettura per tutti gli utenti.
Speriamo che questo approfondimento sul colore che abbiamo condiviso con te oggi ti sia piaciuto.
Ti aspettiamo con la prossima uscita della rubrica! Continua a seguirci 😉
Leggi anche gli altri articoli della rubrica Web e Accessibilità: Perchè scrivere testi alternativi per le immagini
Il tuo sito web è accessibile a tutti? Scoprilo con l’accessibility check-up di Yeah! (inserire link)