3 - Uso accessibile del colore

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "3 - Uso accessibile del colore"

Ottaviana Carlucci
7 anni fa
Visualizzazioni

1 3 - Uso accessibile del colore di Michele Diodati michele@diodati.org

2 La linea guida 2 delle WCAG di 14 Dice molto sinteticamente: Don't rely on color alone, ovvero Non basatevi esclusivamente sul colore. Come chiarimento aggiunge: Assicuratevi che testi e grafica siano comprensibili se visti senza colore.

3 I due punti di controllo dipendenti dalla linea guida 2 delle WCAG di Assicuratevi che tutte le informazioni veicolate per mezzo del colore siano disponibili anche senza colore, per esempio attraverso il contesto o la marcatura. [Priorità 1] Assicuratevi che le combinazioni di colore di primo piano e di sfondo forniscano un contrasto sufficiente quando viste da qualcuno affetto da deficit percettivi dei colori o quando viste su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo].

4 Esaltare il contrasto tra testo e sfondo 4 di 14 Un testo sufficientemente contrastato rispetto allo sfondo è un requisito fondamentale per un sito ad elevata accessibilità. Prima di applicare definitivamente una data combinazione di colori, è buona norma organizzare delle prove di leggibilità dei testi, effettuate sia con utenti affetti da ipovisione sia con utenti affetti da forme di cecità ai colori.

5 Forme di cecità ai colori 5 di 14 Protanopia - una cecità più accentuata per il colore rosso, che porta a confondere il rosso con il verde e anche col blu. Colpisce una percentuale non trascurabile della popolazione maschile (la cecità ai colori è meno diffusa tra le donne). Deuteranopia - una cecità più accentuata per il colore verde, che porta a confondere tra loro il rosso e il verde. Tritanopia - chi ne soffre confonde il giallo con il blu Acromatopsia - chi ne è colpito soffre di un estrema sensibilità alla luce, di completa (o incompleta) cecità ai colori e di bassissima acuità visiva

6 Visione alterata da cecità ai colori 6 di 14 Protanopia Deuteranopia Tritanopia Acromatopsia Visione normale

7 Tabella delle trasformazioni 7 di 14 Alla pagina more.btexact.com/ people/rigdence/colours/ colours2.htm è presente una tabella che mostra come appare ciascuno dei 216 colori della tavolozza web-safe a chi è affetto da protanopia, deuteranopia e tritanopia. Ogni campione di colore è accompagnato dai relativi valori esadecimali.

8 Il contrasto accessibile dipende da differenze di luminosità 8 di 14 Tra il rosso e il verde del campione di sinistra c è solo una differenza di tonalità. Eliminate le componenti cromatiche, i due colori diventano una medesima tonalità di grigio. Tra il marrone e il verde del campione di destra c è invece anche una differenza di luminosità, che, una volta eliminate le componenti cromatiche, rende visibile la differenza tra i due grigi che si ricavano. Le differenze di luminosità sono percepibili anche da chi soffre di cecità ai colori (sia pure con delle variazioni sensibili rispetto ai tricromati), mentre le sole differenze di tonalità possono risultare, in certi casi, del tutto invisibili.

9 Accoppiamenti di colore per ipovedenti 9 di 14 Questa tabella, sviluppata da Franco Frascolla, segnala i migliori accoppiamenti di colore dal punto di vista dell ipovisione. Per gli ipovedenti è importante che i colori utilizzati non siano eccessivamente luminosi e saturi, altrimenti possono andare incontro a fastidiosi fenomeni di abbagliamento.

10 Attenzione agli sfondi grafici! 10 di 14 Una importante raccomandazione, per garantire una buona leggibilità dei testi agli utenti affetti da ipovisione e cecità ai colori, è quella di evitare assolutamente di inserire sfondi grafici compositi sotto i testi. La leggibilità peggiora ulteriormente, quando si blocca la posizione dell immagine di sfondo: il movimento disaccoppiato del testo rispetto allo sfondo rende ancora più penoso lo sforzo di chi tenta di leggere i contenuti.

11 Fornite alternative testuali alle informazioni veicolate dal colore 11 di 14 Nell esempio qui accanto, le informazioni veicolate dai quadratini colorati sono fornite in alternativa sotto forma testuale, usando l attributo TITLE dell elemento A. L uso accessibile del colore prevede in accordo con il punto di controllo 2.1 delle WCAG 1.0 che le informazioni veicolate attraverso i colori siano rese disponibili agli utenti anche in modalità alternative, destinate a chi non percepisce correttamente i colori.

12 Uso NON accessibile del colore 12 di 14 L immagine qui accanto mostra una pagina da un corso su XHTML disponibile in Rete. Dal punto di vista dell accessibilità, il sistema scelto per suddividere in blocchi il codice rappresentato è il peggiore immaginabile. Infatti, l unico modo per capire quali sezioni corrispondano alla legenda posta in basso consiste nel percepire perfettamente i colori (tra l altro sono stati scelti proprio i più problematici per chi soffre di cecità ai colori). L esempio sarebbe risultato invece accessibile, se i blocchi, pur rimanendo diversamente colorati, fossero stati identificati ciascuno per mezzo di un numero inserito in modalità testo e se la legenda in basso avesse fatto riferimento ai numeri invece che hai colori.

13 Fare pagine accessibili non vuol dire rinunciare al colore 13 di 14 Da quanto detto finora a proposito dell uso del colore, potrebbe sembrare che sviluppare pagine accessibili voglia dire rinunciare alla possibilità di avere siti molto colorati e curati nell estetica. Non è affatto così. Le regole di accessibilità non vietano di utilizzare immagini o animazioni, suggeriscono soltanto di non utilizzarle come sfondo del testo. I creativi sono liberi di inventare le decorazioni grafiche più suggestive e complesse, purché queste non siano in conflitto con la leggibilità dei testi e purché le eventuali informazioni da esse comunicate siano disponibili anche in altre modalità, indipendenti dalla capacità dell utente di percepire i colori.

14 Collegamenti utili per approfondire 14 di 14 La linea guida num.2 delle WCAG 1.0: Colorblind Web Page Filter, per simulare come vede una pagina una persona affetta da cecità ai colori: Il capitolo Type and Colour del libro di Joe Clark Building Accessible Websites : La tabella di Franco Frascolla sui migliori accoppiamenti primo piano/sfondo per ipovedenti: I capitoli della mia guida all accessibilità su HTML.it:

Documenti analoghi

La Percezione Dei Colori

La Percezione Dei Colori PRINCIPI BASE DELLA PERCEZIONE DEI COLORI LA TRICROMIA PROCESSI OPPONENTI VEDIAMO GLI STESSI COLORI? STEFANO ZUCCALA IL COLORE NON È UNA PROPRIETÀ FISICA DELL AMBIENTE, MA PIUTTOSTO