Guida alla scelta accessibile dei colori

Forumfree, come molti sapranno, può vantare una comunità molta vasta e grandi numeri nelle statistiche. In quanto tale, il servizio è utilizzato ogni giorno da utenti di ogni tipo: c'è chi ama parlare del più e del meno con gli amici, chi si occupa di progetti che ritiene importanti, chi desidera offrire il proprio aiuto per mostrare le proprie capacità, o chi semplicemente (come in questo caso) si impegna nella creazione di skin. Per di più, ognuna di queste persone porta con sè molte variabili: le più comuni sono browser o sistema operativo, quelle più sconosciute riguardano - fra le tante - eventuali handicap o disabilità.

Nel mondo di internet, ed in particolare fra coloro che amano disegnare, progettare e concepire pagine web, è noto il concetto di accessibilità: per definizione, essa si offre come mezzo per superare le barriere tecnologiche e naturali che inevitabilmente nascono insieme al documento destinato alla consultazione in rete; un sito accessibile, quindi, rompe queste barriere, assicurando ad ogni tipologia di utenza la possibilità di consultare ed usufuire dei contenuti senza imbattersi in sgradevoli ostacoli. In termini più tecnici:

L'argomento andrebbe discusso meglio, ma non è questo il tempo ed il posto per farlo.
Vorrei quindi soffermarmi sulla scelta accessibile dei colori, e prendere in considerazione i frequenti problemi di vista che colpiscono persone di tutte le età, e gli errori che tutti noi commettiamo sempre ed inevitabilmente quando scriviamo una pagina web.

Realizzare o adattare una skin non è certo facile: riuscire a trovare colori gradevoli, equilibrati, e fra loro intonati è forse la cosa più complicata, viste le infinite combinazioni possibili. Capita quindi di commettere qualche sbaglio, compromettendo così la visibilità di un forum specialmente ai danni di chi è ipovedente (ha, cioè, disturbi della vista).
Cosa bisognerebbe evitare di fare, quindi, durante la realizzazione di una veste grafica per il proprio forum?

• Basare la tonalità di colori interamente ed esclusivamente sul blu. Col tempo, la sensibilità verso questo colore diminuisce, affaticandone la percezione. E' quindi sconsigliabile utilizzare unicamente sfumature e variazioni del blu, poichè ciò può comportare gravi problemi di visibilità nella maggior specie a chi è in età avanzata.
  
  
  Testo blu su sfondo blu


• Accostare colori molto accesi, saturati e luminosi (come ad esempio il blu ed il rosso): esperienze di questo tipo possono portare l'osservatore ad avere disturbi alla vista e alla testa, compresi fenomeni di abbagliamento nei soggetti colpiti da fotofobia (intolleranza per la luce).
  
  
   
   
   
   
   
   
  
  


• Come conseguenza del punto precedente, utilizzare colori con elevato contrasto ma scarsa differenza di luminosità, poichè in queste situazioni l'utente affetto da cecità ai colori (daltonismo) non sarebbe capace di notare le differenze cromatiche.
  
  
   
   
  
  
  
  Se ora desaturiamo (= rendere in scala di grigio) i due colori, ecco cosa otterremo:
  
  
   
   
  
  
  
  La desaturazione ha rimosso da essi la differenza cromatica, evidenziando esclusivamente la loro luminosità. Essendo questa uguale in ambedue i colori, il risultato è un grigio anonimo.


• Comunicare esclusivamente attraverso colori la presenza di un collegamento ad un'altra pagina: per chi è vittima del daltonismo, in particolare, questa decisione postrebbe rivelarsi scomoda ed inappropriata. Il link potrebbe confondersi nel testo, diventando impossibile da individuare. Utilizzare forme di enfasi come il grassetto, il corsivo, o il sottolineato, in questi casi, è una buona soluzione.
  
  
  • Link numero 1 e testo semplice [Valido]
  • Link numero 2 e testo semplice [Valido]
  • Link numero 3 e testo semplice [NON valido, informazione comunicata esclusivamente tramite colore]
  
  
  Per una maggior comprensione, mostriamo lo stesso esempio (o almeno, proviamo a mostrarlo) con gli occhi di un utente affetto da una comune forma di daltonismo:
  
  
  • Link numero 1 e testo semplice [Valido]
  • Link numero 2 e testo semplice [Valido]
  • Link numero 3 e testo semplice [NON valido, informazione comunicata esclusivamente tramite colore]
  
  
  Come vedete, il link si "perde" nel testo e non è più facilmente rintracciabile.


• Fare largo uso di sfondi complessi sotto ai testi. Un'immagine di sfondo (background) può influenzare negativamente l'esperienza dell'utente: essendo composta da più colori, alcune parti di essa potrebbero risultare inaccessibili rispetto al colore in primo piano (foreground) del testo.
  
  
  

Chiariti questi punti, vediamo come sia possibile comprendere se l'accoppiamento sfondo-testo è accessibile.

Cromatismo e Luminosità

Il consorzio per gli standards nel web, chiamato W3C (Acronimo di: World Wide Web Consortium), ha stabilito dei valori entro i quali due colori posso definirsi accessibili. Questi valori (sebbene non rientrino nelle raccomandazioni ufficiali) si basano su una soglia minima calcolata in base alla differenza di cromatismo e di luminosità. Affinchè la coppia di colori risulti accessibile, quindi, è necessario soddisfare le seguenti condizioni:

• La differenza cromatica fra i due colori deve essere maggiore o uguale a 500.
• La differenza di luminosità fra i due colori deve essere maggiore o uguale a 125.

In realtà, ricerche successive hanno dimostrato che questa non è la giusta convenzione per assicurare una buona visibilità dei contenuti. A volte, il contrasto può essere sufficiente anche sotto il livello minimo, mentre viceversa può rivelarsi insoddisfacente anche al di sopra di esso. Inoltre, l'esistenza di diverse patologie impedisce la stesura di regole precise e valide universalmente. Gli esperti hanno lavorano ad un nuovo algoritmo, migliore di quello attuale, che verrà inserito nella seconda versione delle linee guida all'accessibilità (WCAG 2.0).

In particolare, i limiti del primo algoritmo - denominato "AERT" (Accessibility Evaluation and Repair Tools) - risiedono nel disinteresse nutrito dagli studiosi verso alcuni importanti fattori, relativi alla leggibilità di un testo. Alcuni di essi sono:

• Lo spessore del testo. L'utilizzo del grassetto, infatti, accentua il contrasto tra primo piano e sfondo.
• Le dimensioni del testo. Testi di notevoli dimensioni risultano leggibili anche quando non rispettano i valori minimi di visibilità.
• Il tipo di carattere usato. I font "sans-serif" (Verdana, Geneva, Helvetica, Arial, ecc...) sono di norma più adatti ai testi in internet, poichè non presentano tutte le decorazioni tipiche di quelli "serif" (Times New Roman, Georgia, Garamond, ecc...), più adatti sul supporto cartaceo, e decisamente più fastidiosi in scritte di piccole dimensioni.

Non avendo tenuto conto di queste possibilità, l'algoritmo AERT non è capace di offrire risultati soddisfacenti per ogni situazione.

Come misurare cromatismo e luminosità? Vediamolo insieme.

Analizzatori di contrasto

Colour Contrast Analyzer
Questo strumento è stato realizzato dal WAT-C (Web Accessibility Tools Consortium) per rilevare automaticamente la differenza di cromastismo e luminosità fra due colori. Alla stesura di questo documento, il programma fornisce il supporto per il nuovo algoritmo (vedi sopra), più adatto a verificare la visibilità di un testo.
Una volta immessi i due colori, questo tool provvede anche ad emulare la visione di un daltonico, suddividendola in tre esempi, correlati rispettivamente ad altrettante patologie di percezione alterata dei colori:

• Protanopia: Cecità per il colore rosso
• Deuteranopia: Cecità per il colore verde
• Tritanopia: Cecità per il colore giallo e blu

Disponibile per Windows 2000 ed XP (ma compatibile anche con le API di Wine).

Colour Contrast Checker
L'equivalente dello strumento sopra descritto per ambiente desktop KDE (Linux). Sfrutta delle librerie javascript, ma manca il supporto per il nuovo algoritmo.

Juicy Studio Colour Contrast Analyzer Firefox Extension
La particolarità di questo analizzatore sta nel fatto che funziona come estensione per il browser Mozilla Firefox. Una volta applicati i colori alla pagina, basta cliccare con il tasto destro del mouse nella finestra, o andare alla voce "Strumenti" e scegliere la voce "Colour Contrast Analyzer". Supporta sia il vecchio algoritmo AERT, sia quello nuovo, basato sul rapporto luminosità-contrasto.

Applicazioni web omonime

• Snook.ca Colour Contrast Check
• Controllo colori Checky
• Juicy Studio Analyzer

Simulatori di percezione

Vischeck
Questo servizio nasce con lo scopo di mostrare immagini o intere pagine web così come le vedrebbe un daltonico. Può essere utile nella fase conclusiva della realizzazione di una skin, per assicurarsi che il risultato sia più o meno ottimale in tutti i casi. Il servizio è gratuito ed utilizzabile via browser.

Color Vision
Simile a Vischeck, permette di scegliere un colore di sfondo ed uno di primo piano, per osservare il risultato con gli occhi di un utente affetto da cecità ai colori.

Colorblind Web Page Filter
Un servizio molto potente che compie sulle pagine web il medesimo lavoro di Vischeck, offrendo in alternativa strumenti e filtri per un analisi più accurata.

Conclusioni

Internet è un mondo vastissimo e ricco di informazioni.
Tutti dovrebbero avere il diritto di accedervi, in ogni condizione e situazione. Nel campo dell'accessibilità molti progressi dovranno e devono necessariamente essere fatti, poichè le esigenze dei navigatori cambiano continuamente, e ogni convinzione si rivela alla fine effimera. Il Web è dinamico, in via di sviluppo.

Una persona su 20 ha problemi di percezione ai colori.
Migliorare la qualità dei nostri lavori dimostra a mio parere grande sensibilità e rispetto nei confronti degli utenti: grazie a qualche accorgimento, un pò di volonta, e una buona dose di pazienza, a risentire positivamente del nostro invervento non sarà solo un determinato target di utenza, ma tutti noi.

Infine, ci tengo a dire che questa guida non vuole assolutamente imporre delle regole: consigli, suggerimenti, informazioni e dimostrazioni di quello che ho letto ed approfondito negli ultimi tempi sono gli ingredienti principali di questa piccola finestra su internet e sull'accessibilità.

Fonti ed approfondimenti

• L'uso del colore secondo le WCAG 1.0, di Michele Diodati
• Le varie disabilità relative ai colori, di Michele Diodati
• Raccomandazioni nell'uso dei colori (Parte 1), di Michele Diodati
• Raccomandazioni nell'uso dei colori (Parte 2), di Michele Diodati
• La percezione dei colori applicata al Web, di Nicola Convertini
• Techniques For Accessibility Evaluation And Repair Tools, su w3c.org
• Usate i colori sicuri, su francocarcillo.it
• La questione dell'algoritmo W3C, su contrastocolori.org
• Accessibilità dei colori: la formula non serve?, su contrastocolori.org
• Una questione di accessibilità: il contrasto dei colori nella pagina web, di Raffaella Rossini
• Strumenti per lo sviluppo di siti web e per la verifica dell'accessibilità e usabilità, su LAU (Laboratiorio di Accessibilità e Usabilità)

Commenti e critiche sono ben accettate.