Non affidarsi solo al colore

Punto di controllo 2.1, priorità 1

Uso semantico del colore

Un documento non può essere considerato accessibile, se le informazioni in esso contenute non sono leggibili, o meglio usabili, anche in assenza di colore. Ciò perché tra gli utenti del Web ci sono non vedenti, persone con deficit nella visione dei colori, persone che usano browser testuali o monitor che alterano i colori: tutte condizioni che possono impedire di ricevere informazioni veicolate solo attraverso il colore.

Il rispetto di questo requisito non dipende solo da scelte grafiche e da un uso accorto della marcatura, ma può dipendere anche dalla scelta dei contenuti testuali. Per esempio, porre all’utente una condizione del tipo “Schiaccia il pulsante verde per confermare o quello rosso per annullare” significa presentare una richiesta che non può essere soddisfatta, se non da chi è in grado di distinguere perfettamente il rosso e il verde, qualsiasi sia lo sfondo su cui sono posizionati.

In mancanza di altri elementi distintivi dei pulsanti, un documento contenente una richiesta simile non dovrebbe passare il punto di controllo 2.1. Potrebbe passarlo, invece, se i due pulsanti, oltre a essere distinti per mezzo del colore, fossero associati a etichette testuali che ne rendessero inequivocabile la funzione. Per esempio, value="Conferma" per il pulsante verde e value="Annulla" per il pulsante rosso.

Ogni volta che l’accesso a un contenuto viene subordinato alla percezione di un dato colore da parte dell’utente, c’è una violazione del punto di controllo 2.1. Ciò avviene più spesso di quanto non si creda. Accade, per esempio, nelle spiegazioni che accompagnano un grafico (“La linea blu indica la variazione annuale del costo delle cipolle a Berlino”). Ciò crea evitabili confusioni agli utenti che non sono in grado di distinguere chiaramente i colori. Per evitare errori di accessibilità come quelli del grafico in Figura 5.1, in cui la comprensione è vincolata alla percezione dei colori, basterebbe utilizzare – in sostituzione o in aggiunta alla distinzione cromatica – una distinzione ottenuta per mezzo di linee variamente spezzate o di aree riempite con motivi differenti.

Al momento nessuno strumento automatico è in grado di rilevare direttamente problemi di accessibilità di questo tipo, che sono di natura semantica. Tocca ad autori, grafici e sviluppatori fare attenzione a evitare di realizzare contenuti che possano essere compresi o usati esclusivamente da chi ha una normale percezione dei colori.

Inizio pagina

Differenziare i collegamenti ipertestuali non solo con il colore

Un caso tipico, in cui il colore veicola informazioni e può creare situazioni di scarsa accessibilità, è quello dei collegamenti ipertestuali o link.

Agli albori del Web, il blu sottolineato era l’unico modo possibile per marcare un frammento di testo come un collegamento verso un altro documento. A partire da HTML 3.2, fu possibile, invece, impostare il colore dei collegamenti per mezzo degli attributi link, vlink e alink dell’elemento BODY, usati rispettivamente per i link non visitati, visitati e attivati. Si cominciarono così a sperimentare nuove combinazioni cromatiche, in aggiunta alle due o tre predefinite offerte da ciascun browser (i colori tuttora usati per i tre tipi di link descritti sono, convenzionalmente, il blu, il viola e il rosso).

A complicare le cose, erano usati spesso, e lo sono tuttora, collegamenti realizzati con testo in forma d’immagine, i quali erano, e sono, quasi sempre privi di sottolineatura: una soluzione divenuta poi comunissima anche per i link testuali, dopo l’avvento dei fogli di stile, grazie all’uso della proprietà text-decoration con valore none, che annulla la sottolineatura che i browser grafici impongono in modo predefinito ai collegamenti ipertestuali.

Se i link colorati e non sottolineati fanno parte di un menu di navigazione, chiaramente distinto dai contenuti testuali della pagina per mezzo della posizione e dell’aspetto grafico, non c’è un vero problema di accessibilità: purché il contrasto tra primo piano e sfondo sia sufficiente, le informazioni contestuali, cioè posizione e struttura del menu, permettono agli utenti, anche se ipovedenti e/o ciechi ai colori, di capire che quelli contenuti nel menu sono collegamenti ad altri documenti o ad altri siti.

La situazione è diversa, invece, se i collegamenti sono inseriti in modo sparso all’interno di blocchi di testo discorsivo e se non sono sottolineati né resi distinguibili in altro modo che per mezzo del colore. In casi simili, a un utente che non riesce a distinguere i link in base al colore non resta che esplorare i blocchi di testo col mouse o navigare da tastiera per via di Tab successivi: la comparsa della manina, nel primo caso, ed eventuali effetti di attivazione nel secondo caso, gli consentiranno di capire se nel testo sono stati disseminati dei link.

Costringere, però, gli utenti a una sorta di “giro di prova”, che può essere noioso ma soprattutto impreciso, solo per accertarsi della presenza di qualcosa che avrebbe potuto essere segnalato meglio, non è buona progettazione. Grafici e sviluppatori dovrebbero sforzarsi di differenziare sempre i link tra loro e dal testo circostante per mezzo di qualcosa di più che il solo colore, in modo da permettere il riconoscimento visivo immediato dei collegamenti anche a chi ha problemi di percezione dei colori (problemi che possono essere dovuti anche alle attrezzature usate, non necessariamente a difetti della visione).

Il sito di Wikipedia offre un esempio di link distinti dal testo circostante solo per mezzo del colore. Numerose parole del paragrafo riportato in Figura 5.3, tratto appunto da un articolo di Wikipedia , sono collegamenti ipertestuali. Poiché, però, questi non sono sottolineati e il libro che state leggendo è stampato in bianco e nero, è molto difficile distinguerli dal testo inattivo. Un’analoga difficoltà può essere sperimentata da utenti affetti da alcune forme di cecità ai colori, quando leggono l’articolo sul Web direttamente dal sito di Wikipedia.

La soluzione stilistica scelta da Wikipedia è perciò poco accessibile, e lo diventa ancor meno, se si considera che il colore è usato anche per distinguere, tra due collegamenti ugualmente non visitati, quello che conduce a un articolo esistente da quello che conduce a una pagina di avviso, in cui si spiega che l’articolo per la voce selezionata deve essere ancora scritto: nel primo caso, il link è di colore blu, nel secondo è rosso. Per esempio, nel brano online da cui è tratta la Figura 5.3, “umore acqueo” e “umore vitreo” compaiono in rosso, perché rimandano a pagine che, al momento in cui scriviamo, non contengono ancora un articolo sulle relative voci.

La situazione migliora se disabilitiamo nel browser il supporto per i CSS. Come si può vedere dall’immagine in Figura 5.4, i link sono distinguibili dal contesto, perché appaiono sottolineati. Rimane invisibile, però, la differenza tra un collegamento che porta a un articolo già scritto e uno che porta a un articolo ancora da scrivere. Per risolvere quest’ultimo problema, la sottolineatura non è sufficiente. Sarebbe necessario, invece, associare a uno dei due tipi di link un’icona apposita, dotata di un adeguato testo alternativo.

Poter identificare con la vista un collegamento e il suo stato all’interno di un documento è di grande importanza per l’accessibilità. Per tale ragione, è opportuno usare in modo appropriato gli strumenti che i fogli di stile mettono a disposizione di grafici e sviluppatori per definire lo stato di un link. Tali strumenti sono le cinque pseudo-classi :link, :visited, :hover, :active e :focus, definite nelle sezioni 5.11.2 e 5.11.3 delle Specifiche CSS2 .

Le prime due pseudo-classi sovrascrivono, rispettivamente, i due attributi link e vlink di BODY e rappresentano gli stati non visitato e visitato di un collegamento. La terza (:hover) serve per definire un cambiamento di stato in corrispondenza del passaggio di una periferica di puntamento, tipicamente il mouse, sull’area occupata da un link; non funziona con tutti i dispositivi di puntamento, per esempio con lo stilo dei palmari. La quarta (:active) sovrascrive l’attributo alink di BODY e serve per dare un effetto di attivazione a un collegamento, in corrispondenza, per esempio, del clic del mouse. L’ultima (:focus) è molto importante per l’accessibilità: serve per rendere visibile la selezione di un link per mezzo della tastiera. Ne beneficiano soprattutto gli utenti vedenti che hanno problemi a utilizzare il mouse.

Il Listato 5.1 mostra un esempio di stili per le cinque pseudo-classi descritte. Si tenga presente che l’ordine non è casuale: per le leggi della cascata, gli stili successivi sovrascrivono quelli precedenti e dunque sarebbe inutile, per esempio, definire la pseudo-classe :hover prima di :link. Infatti, l’effetto generato dal passaggio del mouse su un collegamento va a modificare gli stati di link non visitato e di link visitato. Se la definizione di :hover precedesse, invece di seguire, le definizioni di :link e di :visited, al passaggio del mouse non accadrebbe nulla di diverso da quanto definito in :link e in :visited.

I selettori nel Listato 5.1 creano una serie di effetti che, nel rispetto del punto di controllo 2.1, non sono legati esclusivamente all’uso del colore. In particolare:

• tutti i link sono sottolineati (lo sono in modo predefinito: per annullare la sottolineatura bisognerebbe impostare text-decoration: none);
• i link visitati sono in corsivo, per distinguerli da quelli non visitati, che non lo sono;
• il passaggio del mouse su un link fa comparire una doppia sottolineatura (la somma di quella predefinita e di quella generata dalla proprietà border-bottom di :hover);
• l’attivazione di un link da tastiera o tramite mouse genera un effetto di contrasto invertito, molto visibile rispetto al contesto.

La Figura 5.5 mostra un esempio di applicazione di tali differenze, per il quale abbiamo usato lo stesso testo delle Figure 5.3 e 5.4.

La parola “fotoni” è un link visitato: è in corsivo perché vi si applica lo stile definito dalla pseudo-classe :visited; “stimolo visivo” appare in contrasto invertito, perché il collegamento sottostante è stato attivato da tastiera e risulta modificato dalla pseudo-classe :focus. Il link sulle parole “modulazione di ampiezza” ha, infine, la doppia sottolineatura, generata dal passaggio del puntatore del mouse, a cui corrisponde lo stile definito dalla pseudo-classe :hover.

Purché non siano usati anche per il testo inattivo, tali effetti garantiscono agli utenti la possibilità di distinguere i collegamenti e il loro stato anche in presenza di difetti nella percezione dei colori.

Inizio pagina

Uso inaccessibile del colore in moduli e messaggi d’errore

Moduli e relativi messaggi d’errore rappresentano un test cruciale per l’accessibilità di un sito. Gli errori commessi nella loro implementazione possono avere un effetto disastroso su alcune categorie di utenti, che si troveranno nell’impossibilità di completare una procedura di registrazione, un acquisto online, una richiesta di documenti ecc.

Assume particolare importanza, in quest’area del web design, l’uso del colore, a cui si fa ancora oggi ricorso troppo spesso, come unico mezzo per segnalare gli errori di compilazione commessi dagli utenti e i luoghi dove sono avvenuti.

Prendiamo per esempio la procedura di creazione di un accesso personale ai servizi di Google . Se premiamo il pulsante di invio posto a fondo pagina senza aver compilato opportunamente tutti i campi, o avendo inserito informazioni non valide, otteniamo una risposta come quella in Figura 5.6.

In questo caso, il metodo adottato da Google non è il massimo dell’accessibilità. In primo luogo non viene fornito alcun messaggio d’errore preliminare: chi usa una sintesi vocale, non trovando neppure messaggi di conferma, è costretto a rileggere tutta la pagina per capire se qualcosa è andato male, e che cosa.

In secondo luogo, i messaggi d’errore sono pensati per attirare l’attenzione esclusivamente di un utente in grado di distinguere i colori, in particolare il rosso. Sono scritti in questo colore, infatti, i due messaggi di errore visibili in Figura 5.6 (“Indirizzo email non valido” e “Il campo è obbligatorio e non può essere lasciato vuoto”). Chi è cieco al colore rosso, percepisce gli oggetti rossi come più scuri di quanto non appaiano a chi ha una visione dei colori normale, sicché le scritte di questo colore gli appaiono molto meno vivide di quanto dovrebbero, e non riescono a esercitare la funzione di richiamo visivo per la quale sono state progettate.

Errori di accessibilità legati all’uso del colore sono presenti anche nella procedura di registrazione ai servizi di Yahoo! . Se, da un lato, il sistema implementato da questo portale avverte subito l’utente della presenza di errori di compilazione nel modulo di registrazione, e lo fa in modo molto dettagliato e preciso (Figura 5.7), dall’altro ricorre ancora al colore, per segnalare i campi che contengono dati inesatti o insufficienti. “Correggi i campi evidenziati in giallo” è, in effetti, un tipo di avviso che discrimina, non solo gli utenti che hanno problemi a discriminare il colore giallo (per fortuna una piccolissima percentuale della popolazione), ma anche quelli che navigano in modalità non grafica. Come potranno costoro identificare quali sono i campi marcati in giallo?

Fortunatamente, Yahoo! usa un criterio non cromatico per evidenziare i campi obbligatori, cioè l’asterisco (Figura 5.8), che è utilizzabile da tutti i tipi di utente, anche se privi di vista o ciechi ai colori.

Però l’asterisco non serve per identificare i campi marcati in giallo. Sarebbe necessario adottare un differente criterio, basato su informazioni testuali invece che su colori.

A nostro parere, si otterrebbe un risultato più accessibile:

1. premettendo all’elenco degli errori un avviso che informa l’utente del loro numero;
2. modificando il codice di marcatura di ogni avviso di errore, in modo da incorporarlo in un elemento LABEL collegato direttamente al campo modulo che deve essere modificato (un elemento INPUT può essere associato esplicitamente a un numero qualsiasi di etichette, per mezzo degli attributi id e for. Sull’associazione esplicita tra etichette e campi modulo, si veda il commento al punto di controllo 12.4 nel Capitolo 15).

Purtroppo in moltissimi casi l’uso dei colori, e del rosso in particolare, è ancora l’unico criterio che gli sviluppatori adottano per informare l’utente di un errore di compilazione in un modulo. A tal proposito, il servizio di videocondivisione Grouper fornisce un esempio di procedura di registrazione particolarmente inaccessibile, forse nata dall’idea che un sito di video debba essere usato solo da persone con una vista perfetta, anche per quanto riguarda la capacità di distinguere i colori.

Il modulo di registrazione in Figura 5.9 è ottenuto in risposta a un invio incompleto del medesimo, nel quale erano stati volutamente lasciati vuoti tutti i campi, tranne User name e Password. Il sistema fornisce un unico avviso, tra l’altro non formulato come un messaggio di errore: password requires four charachters (cioè, la parola d’ordine richiede quattro caratteri). Per il resto, l’unico cambiamento è che l’etichetta delle caselle non compilate diventa rossa. Ciò significa affidare al solo colore l’informazione – peraltro non formulata esplicitamente – che la registrazione non è riuscita a causa della presenza di campi non compilati o compilati male, come il campo password.

Inizio pagina

Punto di controllo 2.2, priorità 2 per le immagini, priorità 3 per il testo

Tipi di cecità ai colori

È oggi praticamente impossibile trovare qualcuno che navighi sul Web con un monitor in bianco e nero. Progettare, quindi, il contrasto affinché i contenuti restino leggibili anche in assenza di colore sarebbe una richiesta irrealistica e degna di essere trascurata, se lo scopo fosse soltanto favorire un’inesistente utenza di navigatori in bianco e nero. Ma il punto di controllo 2.2 riguarda soprattutto chi soffre di deficit nella visione dei colori: è questa categoria di utenti la vera beneficiaria, insieme agli ipovedenti, della raccomandazione sul “sufficiente contrasto”. E poiché tra i vari deficit della visione dei colori vi è l’acromatopsia, una rara malattia che causa l’assenza totale di percezione dei colori, va considerata ragionevole anche la richiesta di provvedere a un livello di contrasto sufficiente su un monitor in bianco e nero (o, più realisticamente, su una simulazione di monitor in bianco e nero).

Ciò premesso, dobbiamo ora considerare le varie forme di cecità ai colori e il loro influsso sulla realizzazione di pagine web accessibili.

In primo luogo, occorre chiarire che, quando si parla di cecità ai colori, s’intende qualcosa di molto diverso dalla cecità vera e propria. Una persona cieca semplicemente non vede. Chi è cieco ai colori, invece, vede; e, anzi, può avere, tranne che in alcune malattie degenerative, un’acuità visiva del tutto normale. Può, per esempio, distinguere perfettamente un semaforo con le sue tre luci e sapere, per averlo imparato, qual è il verde e qual è il rosso.

Il problema vero della cecità ai colori non è distinguere gli oggetti presi singolarmente, ma distinguerli l’uno dall’altro, in un contesto in cui il contrasto tra due oggetti adiacenti, o tra un oggetto e il relativo sfondo, non è sufficiente per una persona affetta da una patologia della visione dei colori.

Tali patologie possono essere congenite, cioè derivanti da fattori ereditari, o acquisite in seguito a malattie.

Nel campo delle patologie ereditarie, bisogna distinguere tra individui tricromati, dicromati e monocromati: i primi possiedono tutti e tre i tipi di recettori del colore della retina, chiamati coni; i dicromati hanno solo due tipi di coni; i monocromati un unico tipo o anche nessuno.

I deficit della visione del colore che colpiscono i tricromati sono i meno gravi. I più diffusi sono la protanomalia e la deuteranomalia. La prima è una perdita di sensibilità verso i toni del rosso, la seconda verso i toni del verde. In entrambi i casi si ha una visione alterata dei colori sull’asse dal rosso al verde, che genera una difficoltà più o meno marcata di distinguere questi due colori tra loro e da alcuni altri colori con cui il rosso e il verde, a seconda delle gradazioni, possono essere confusi (tipicamente grigio scuro, arancione, giallo, nocciola chiaro). Protanomalia e deuteranomalia colpiscono circa il 5-6% della popolazione maschile, con una proporzione di 5 a 1 a favore della deuteranomalia, che è in assoluto il deficit della visione dei colori più diffuso.

Esiste anche una terza forma di tricromatismo anomalo ereditario, che però è rarissima: la tritanomalia, che consiste in una perdita di sensibilità verso la luce nelle frequenze del blu. Genera problemi nella discriminazione dei colori sull’asse dal blu al giallo.

Passando ai dicromati, il primo tipo di cecità ai colori è la protanopia, che colpisce circa l’1% dei maschi e consiste nell’assenza dei coni responsabili della visione del rosso. La principale difficoltà visiva causata dalla protanopia è l’incapacità di distinguere il rosso dal verde (così come nella protanomalia), ma è presente anche tutta una serie di confusioni con altri colori, dovuta al modo in cui i due tipi di coni superstiti interagiscono, al variare della lunghezza d’onda della luce. In particolare, la tonalità percepita al posto del rosso appare notevolmente più scura di come appare il rosso a una persona con visione normale dei colori. Ciò rende le coppie rosso-nero e rosso-grigio molto meno contrastate e distinguibili di quanto siano per un tricromato.

La seconda forma di cecità ai colori è la deuteranopia, in cui vi è la mancanza dei coni sensibili alle onde medie e responsabili, principalmente, delle visione del colore verde. Benché differisca dalla protanopia, l’esito ai fini pratici, che sono quelli che ci interessano, è pressoché identico: l’incapacità di distinguere il rosso dal verde. Ne è affetto l’1% circa degli individui maschi.

La terza patologia che riguarda i dicromati, molto rara (colpisce lo 0,003% della popolazione), è la tritanopia, che è la mancanza dei coni responsabili della percezione delle onde corte dello spettro visivo, corrispondenti alla zona del blu-violetto. Chi ne è colpito, ha problemi a distinguere il blu dal giallo.

Come sarà ormai chiaro al lettore attento, esiste un’analogia tra le patologie dei tricromati e quelle dei dicromati: protanopia, deuteranopia e tritanopia possono essere considerate forme più gravi, rispettivamente, della protanomalia, della deuteranomalia e della tritanomalia.

Il tipo di cecità ai colori in assoluto più grave è certamente l’acromatopsia, che è di due tipi: completa e incompleta. Nella forma completa, molto rara, i soggetti sono totalmente privi di coni. Alla mancanza di capacità di discriminare i colori, si accompagnano di solito un’acuità visiva molto ridotta (circa 1/10), nistagmo (movimento involontario ritmico degli occhi, che impedisce di fissare lo sguardo), miopia e fotofobia (bisogno di sfuggire la luce).

Chi desidera farsi un’idea delle notevoli difficoltà di lettura e di orientamento di cui soffre una persona malata di acromatopsia, può leggere la bella cronaca autobiografica del professor Knut Nordby , riportata sul numero di aprile/giugno 2000 di Tiflologia per l’integrazione.

Le patologie ereditarie della visione dei colori sono, per così dire, sessiste al contrario: colpiscono soprattutto gli uomini. Una percentuale compresa, infatti, tra l’8 e il 10% della popolazione maschile è affetta da uno dei deficit percettivi che abbiamo elencato. Tra le donne, solo lo 0,4-0,5% è colpito da una forma di cecità ai colori, con prevalenza assoluta (circa il 95%) della deuteranomalia.

Questa differenza così marcata tra uomini e donne può avere una ricaduta pratica sull’accessibilità: se un sito web ha un pubblico notoriamente femminile, garantire un contrasto tra primo piano e sfondo, sufficiente a compensare le varie forme di cecità ai colori, può non essere una priorità irrinunciabile, come dovrebbe essere, invece, per un sito con un pubblico prevalentemente maschile o misto. Ma in un sito che fa servizio pubblico, il rispetto del requisito 2.2 delle WCAG 1.0 deve, invece, essere considerato un compito imprescindibile: la percentuale totale di utenti affetti da cecità ai colori costituisce, infatti, una fetta significativa della popolazione ed è ingiustificabile non tener conto dei problemi percettivi di questi utenti.

La percentuale di persone con visione alterata dei colori cresce poi ulteriormente, se aggiungiamo alle patologie che abbiamo elencato fin qui, che sono tutte ereditarie, le numerosissime malattie che possono essere contratte nel corso della vita, e che pure hanno influenze negative sulla percezione dei colori. Tra queste, vanno citate almeno la cataratta nucleare (che provoca una visione con preminenza del giallo), il glaucoma, le neuropatie degenerative, le malattie della retina. L’invecchiamento causa di per sé una perdita di sensibilità verso il colore blu. Infine, l’assunzione di alcuni farmaci, come il chinino, può danneggiare il nervo ottico e la retina e produrre, per conseguenza, alterazioni nella visione dei colori.

Inizio pagina

Uno scienziato affetto da cecità per il rosso descrive la propria patologia

Il paragrafo precedente è stato dedicato alla teoria. Ai fini pratici di questo libro, serve ora, però, capire in concreto che tipo di valutazioni e confusioni fa sui colori una persona che ne ha una visione alterata. In particolare, poiché la grande maggioranza delle patologie della visione del colore riguarda la discriminazione del rosso e del verde, è importante comprendere i problemi di individui affetti da una simile alterazione.

A tale scopo forniamo di seguito, in traduzione italiana, alcuni estratti dalla relazione On Colour-Blindness (“Sulla cecità ai colori”), presentata dall’ingegnere inglese William Pole alla prestigiosa Royal Society di Londra, nella seduta del 19 giugno 1856. Nonostante sia un testo teoricamente datato, contiene una descrizione chiara e precisa della visione alterata, tipica degli individui affetti da un certo tipo di cecità ai colori.

L’autore comincia riassumendo i dati raccolti da un altro studioso, il dr. Wilson, in un saggio che analizzava i sintomi mostrati da una nutrita serie di individui ciechi ai colori.

Blu e giallo sono perfettamente distinti, e sono i soli colori visti nello spettro. Quasi tutte le persone cieche ai colori pensano di vedere il rosso, ma esso è frequentemente confuso con il verde (l’errore più comune), il nero, l’arancione, il giallo, il marrone, il blu e il viola. Cremisi e rosa appaiono senza relazione con lo scarlatto. Il verde è il colore più difficile; non solo è confuso con il rosso, ma anche con il nero, il bianco, o il grigio, l’arancione, il giallo, il blu, il viola e il marrone. Il viola è confuso con il blu o il grigio; e l’arancione con il giallo.

Poi Pole comincia a spiegare le sue esperienze con i colori, parlando di sé, come d’uso in un saggio scientifico, in terza persona. Il difetto che egli descrive corrisponde a ciò che chiamiamo attualmente protanopia.

Egli vede il blu e il giallo perfettamente bene, e non ha ragione di dubitare che le sue sensazioni di questi due colori siano le stesse di quelli che hanno un occhio normale. Il terzo primario, il rosso [Pole, come altri suoi contemporanei, riteneva colori primari il blu, il giallo e il rosso], è quello la cui visione è difettosa, ma lo studio delle sensazioni prodotte da questo colore hanno causato alcune difficoltà. Il carminio, il rappresentante artificiale di ciò che è usualmente considerato il rosso puro, presenta all’occhio dell’autore una sensazione molto positiva, che egli ha a lungo supposto essere un colore distinto; ma, analizzando in modo più approfondito, ha scoperto che si trattava semplicemente di una tonalità scura di giallo, dal momento che egli potrebbe ricreare perfettamente la sensazione del rosso carminio con una mistura di giallo e di nero. C’è tuttavia una varietà di rosso, vale a dire il cremisi, che è perfettamente invisibile, come colore, ai suoi occhi, dandogli soltanto una sensazione di oscurità; e l’intera gamma delle frequenze del rosso e dell’arancione, tra questo e il giallo, mostra soltanto differenti tonalità dell’ultimo colore; l’elemento rosso appare agire, non come un agente colorante, ma semplicemente come una potenza oscurante. [...]

Le frequenze del viola, che sono situate tra il blu e il cremisi, appaiono, in modo similare, soltanto come toni di blu, con il rosso che oscura il blu nello stesso modo del giallo.

[...] Egli possiede solo due sensazioni di colore propriamente dette, cioè blu e giallo; tutte le altre frequenze in natura sono ridotte a toni di queste. Il colore della luce, o la frequenza risultante dalla loro combinazione, può essere chiamata verde, bianco o grigio, a piacere. [...] Rosso e verde sono visti soltanto come toni di giallo, e, se il giallo è della stessa intensità in ognuno, essi appariranno simili e, naturalmente, saranno confusi l’uno con l’altro.

Pole offre, però, non solo un’accurata descrizione del problema, ma anche indicazioni pratiche, per aiutare una persona con la sua patologia a distinguere, entro certi limiti, il rosso dal verde.

Rosso e verde non vengono confusi tra loro in modo generale, ma soltanto quelle loro frequenze che giacciono, per entrambi, sul versante giallo rispetto al punto neutrale; e perciò, se il verde fosse reso un verde blu, allo stesso tempo che il rosso è un rosso giallo, essi diventerebbero del tutto distinti per un cieco ai colori, così come lo sarebbero per un occhio normale.

Inizio pagina

Come ottenere contrasti accessibili tra primo piano e sfondo

I rettangoli in Figura 5.10 A e 5.10 B rappresentano, rispettivamente, un testo verde su sfondo rosso e un testo rosso su sfondo verde (con valori esadecimali di 669900 per il verde e ff0000 per il rosso), visti da una persona in grado di discriminare normalmente i due colori. Il rettangolo in Figura 5.10 C mostra invece una simulazione della percezione di un protanope. Non importa se il colore di primo piano sia il rosso oppure il verde: in entrambi i casi il testo risulta completamente invisibile. Un’analoga invisibilità è sperimentata anche da un deuteranope, nonostante le tonalità percepite da quest’ultimo siano leggermente differenti.

La simulazione è stata realizzata con uno strumento di test disponibile sul sito Color Vision , sviluppato qualche anno fa dal programmatore inglese Cal Henderson, che, più di recente, è stato tra i creatori di Flickr, il gigante della condivisione di foto sul Web.

Il simulatore in Figura 5.11 permette di scegliere una qualsiasi coppia di colori, tra i 216 presenti nelle sei tavolozze poste sulla sinistra dell’area di lavoro. I due colori selezionati vengono attribuiti al testo e allo sfondo, nel rettangolo posto sulla destra e intitolato Sample Text (“testo campione”). A questo punto, basta selezionare una delle otto opzioni relative alle patologie di visione del colore, per ottenere la simulazione immediata di come apparirebbe quella combinazione di primo piano e sfondo a una persona affetta dalla patologia selezionata (protanopia, deuteranopia, tritanopia ecc.). I campioni nelle sei tavolozze, inoltre, cambiano tonalità, fino a rispecchiare la gamma di colori vista dai soggetti affetti da quella patologia.

Nello sviluppare un sito accessibile, è fortemente consigliato scegliere i colori di primo piano e di sfondo, solo dopo averne testato il contrasto con un simulatore in grado di mostrare, o almeno di dichiarare, che la coppia prescelta è leggibile anche per soggetti con deficit nella visione dei colori. Una ricerca sui principali motori permetterà di trovare più di un simulatore, da utilizzare sul Web o in locale.

Tra i simulatori utilizzabili in locale, è da segnalare il ColorSelector di Fujitsu (Figura 5.12), giunto alla versione 5.02 e disponibile sia per Windows che per Macintosh. È liberamente scaricabile da http://www.fujitsu.com/global/accessibility/assistance/cs/ e permette di impostare una qualsiasi combinazione di primo piano e sfondo, sia catturando i colori da un’altra applicazione, per mezzo degli appositi contagocce (dropper), sia creandoli direttamente tramite cursori e valori numerici. Nel riquadro con etichetta Judgment (“Giudizio”), il programma fornisce una valutazione di leggibilità della coppia di colori impostata per il testo e per lo sfondo, riferita a individui con visione dei colori normale (Regular), oppure affetti da cataratta, protanopia, deuteranopia o tritanopia. Se una combinazione riceve cinque segni di spunta, è virtualmente leggibile da chiunque, o quasi (il test non considera l’acromatopsia e alcune altre malattie che pure influiscono sulla visione dei colori).

Chiudiamo qui con i simulatori e passiamo a una domanda strettamente collegata al loro uso: quali elementi di un documento devono essere valutati dal punto di vista del contrasto? Innanzitutto il testo, che è l’elemento significativo per eccellenza.

È essenziale per l’accessibilità che i testi siano posti su sfondi che diano la migliore leggibilità possibile. A tal fine, è importante non solo valutare il contrasto rispetto a uno sfondo uniforme usando strumenti come i simulatori, ma anche evitare di porre il testo su sfondi grafici frastagliati e irregolari. Gli sfondi grafici irregolari, infatti, non solo producono un livello di contrasto non uniforme, e quindi difficilmente valutabile, ma creano anche una spaventosa confusione in utenti come gli ipovedenti, la cui vista è già messa a dura prova da problemi di acuità e di restrizione del campo visivo.

Per avere un’idea chiara di come non deve essere fatto uno sfondo per un sito accessibile, è sufficiente fare un giro d’esplorazione su MySpace , il portale che ha aggregato la più grande comunità al mondo di social networking. MySpace è, in effetti, la centrale mondiale degli sfondi inaccessibili: gli oltre cento milioni di utenti che ne fanno parte pubblicano le proprie pagine personali, grazie ai facili strumenti offerti dal portale, senza essere professionisti del Web... e si vede. Le loro pagine sono caleidoscopiche e talvolta affascinanti, perfettamente adeguate a esprimere la personalità di ciascun autore, ma sono anche l’esempio più lampante degli errori che è meglio evitare, se si vuole conservare la leggibilità dei testi.

Diffusa è la tendenza a usare immagini estremamente elaborate sotto i testi: soprattutto in caso di sfondi che non scorrono col testo, il risultato è una più o meno completa illegibilità anche per chi non ha gravi patologie alla vista.

Dagli sfondi grafici alle fotografie e ai disegni il passo è breve. È necessario valutare il contrasto anche all’interno di una foto o di un disegno? In linea generale no.

La cecità ai colori ha a che fare soprattutto con il rapporto tra primo piano e sfondo, cioè con il contrasto tra elementi sovrapposti o adiacenti. In un’immagine, se gli oggetti sono sufficientemente nitidi e separati, possono essere discriminati anche da una persona con deficit nella visione dei colori: li vedrà con colori alterati, ma li vedrà, e capirà cosa sono.

La Figura 5.14 A mostra una foto digitale ricca di colori, in cui vi sono dei bambini su una giostra. In Figura 5.14 B, la stessa foto è stata modificata con un filtro che simula la visione di un protanope. Come effetto dell’applicazione del filtro, il rosso, presente nel vestito e nel cappello della bambina in primo piano, è scomparso, sostituito da un giallo ocra molto scuro. È scomparso anche il verde, presente in varie decorazioni e nel pennacchio del cavallo su cui è seduta la bambina, sostituito da diverse tonalità di giallo. Eppure le cose e le persone rappresentate in entrambe le versioni della foto rimangono perfettamente riconoscibili, e cioè accessibili.

Ciò è una conferma empirica di un dato di fatto: in linea di massima, i contenuti di una fotografia sono comprensibili anche per chi ha una percezione alterata dei colori. Il principio ha tuttavia un’eccezione: bisogna considerare, infatti, che l’alterazione della percezione dei colori influenza in certa misura anche la luminosità (come si può notare osservando la giacca della bambina nelle Figure 5.14 A e 5.14 B). La variazione di luminosità può rendere indistinguibili tra loro oggetti che, per chi vede normalmente i colori, appaiono invece assolutamente distinti.

In ogni caso, se un’immagine è essenziale per la comprensione del contenuto di un documento, sarebbe opportuno, prima di pubblicarla sul Web, svolgere una simulazione, usando un filtro che sia in grado di mostrare come vedrebbe quell’immagine una persona affetta da protanopia, deuteranopia o tritanopia (Figura 5.15). Qualora la simulazione mostrasse che alcuni elementi essenziali per la comprensione sono indistinguibili dal contesto, è consigliabile modificare l’immagine, nei limiti del possibile. Ciò può essere ottenuto, in un qualsiasi programma di fotoritocco, agendo sui valori cromatici e di luminosità, fino a ottenere simulazioni in cui i contenuti dell’immagine appaiono chiaramente distinti anche per utenti ciechi ai colori.

Tolto il testo e le immagini significative, per tutto il resto non è richiesto di intervenire sul contrasto di luminosità e di colore. In altre parole, gli elementi decorativi di un documento possono essere lasciati così come sono: se anche un cieco ai colori non riuscirà a capire bene il senso di una sfumatura o di alcune figure svolazzanti, inserite a scopo decorativo, non è importante; l’importante è che riesca a leggere senza problemi i contenuti testuali di un documento e a capire cosa rappresentano gli elementi grafici significativi, come fotografie, diagrammi e disegni integrati con il testo.

Inizio pagina

Il problema dell’abbagliamento

Questa disamina sull’uso accessibile del colore non sarebbe completa, se non facessimo un accenno al problema dell’abbagliamento. Un’interfaccia grafica, per essere veramente accessibile, deve non soltanto possedere un sufficiente livello di contrasto, ma deve anche cercare di non abbagliare i suoi lettori. Il fenomeno dell’abbagliamento riguarda in particolare gli ipovedenti e gli acromati: per questo tipo di utenti, uno sfondo bianco o di un colore troppo acceso può rendere la lettura molto faticosa, o addirittura impossibile, anche in presenza di un contrasto tra primo piano e sfondo molto elevato.

Per evitare o ridurre il rischio dell’abbagliamento, è consigliabile, perciò, non impostare sfondi troppo luminosi o troppo saturi. Le tinte pastello costituiscono in genere una soluzione ottimale per gli sfondi: permettono di ottenere un contrasto sufficiente con il testo, senza tuttavia abbagliare i lettori colpiti da alcune gravi patologie della vista.

La soluzione venuta di moda da un paio d’anni, cioè di non preoccuparsi troppo dell’abbagliamento e di altri fattori di accessibilità nell’interfaccia grafica predefinita di un sito, fornendo al contempo una versione a contrasto invertito per gli ipovedenti, non è la migliore delle soluzioni possibili, anche se è ritenuta accettabile da un punto di vista teorico (si veda, in proposito, il paragrafo “Versioni alternative di uno stesso sito”, alla fine del Capitolo 16).

Le versioni alternative per ipovedenti sono costruite in modo da essere tutte più o meno uguali: caratteri ingranditi bianchi, gialli o celesti su uno sfondo nerastro, con contenuti linearizzati e talvolta del tutto privi di immagini. Sono, insomma, versioni impoverite del sito principale e, per il fatto di essere tutte così simili tra loro, finiscono, se utilizzate costantemente, per rendere molto monotona la navigazione sul Web e impercettibili le differenze tra un sito e l’altro. A peggiorare la situazione, c’è la difficoltà di accedere dalla versione “normale” di un sito alla versione alternativa a contrasto invertito, se i collegamenti o i pulsanti che vi rimandano sono troppo piccoli o nascosti chissà dove.

Per tali ragioni, la soluzione migliore non è tentare di confinare gli ipovedenti, e in generale le persone con disabilità, in “ghetti” telematici costruiti solo per loro, ma imparare a realizzare un’unica interfaccia grafica, che sia allo stesso tempo gradevole, accessibile ed eventualmente personalizzabile.

Nozioni riassuntive sull’accessibilità dei colori

È tempo, ormai, di tirare le somme di tutte le considerazioni sull’uso del colore fatte fin qui, provando a definire un sommario di informazioni e raccomandazioni generali, da tener presenti nella progettazione della grafica di un sito accessibile:

• tra otto e dieci persone su cento sono affette da una forma ereditaria di cecità ai colori;
• le donne sono quasi del tutto immuni dalla cecità ai colori di origine ereditaria (ne è colpita all’incirca una donna su duecento);
• esistono malattie contratte nel corso della vita che possono causare cecità ai colori (glaucoma, cataratta ecc.);
• le forme di cecità ai colori di gran lunga più comuni sono quelle che creano problemi nella discriminazione dei colori sull’asse rosso-verde;
• la difficoltà, in questo caso, non è limitata solo ai colori rosso e verde (altrimenti dovrebbero preoccuparsi solo i siti che vendono addobbi natalizi), ma si estende a tutti i colori che possono essere confusi con il rosso e il verde, tra cui il giallo, il blu, il grigio e il nero;
• la cecità ai colori può creare problemi di accessibilità solo nel caso in cui si debba discriminare tra oggetti sovrapposti o molto vicini;
• la massima attenzione deve essere posta nel valutare il contrasto tra il testo e il colore di sfondo posto dietro il testo;
• è di gran lunga preferibile evitare di porre sotto i testi sfondi grafici costituiti da immagini irregolari e frastagliate;
• in linea generale, non è necessario che il contrasto all’interno di immagini e disegni sia modificato; qualche modifica può essere opportuna, solo se elementi essenziali per la comprensione di un’immagine significativa risultano indiscernibili in una simulazione di cecità ai colori, fatta con uno dei vari software utilizzabili allo scopo;
• non è necessario preoccuparsi del livello di contrasto di foto e disegni puramente decorativi;
• gli ipovedenti sono in genere soggetti a fenomeni di abbagliamento; è consigliabile perciò evitare di impostare sfondi dai colori troppo luminosi o troppo accesi, se si vuole garantire una lettura confortevole anche a questa categoria di utenti.

Inizio pagina

L’algoritmo proposto dal W3C per la verifica del contrasto di luminosità e colore tra primo piano e sfondo

Abbiamo già parlato dei simulatori di cecità ai colori e dell’importanza del loro uso. Il limite di questi software sta nel fatto che lo sviluppatore si affida in genere al proprio personale giudizio e, soprattutto, alle tabelle di calcolo del simulatore, per decidere se un dato livello di contrasto tra primo piano e sfondo sia sufficiente.

Nelle tecniche associate alle WCAG 1.0 viene consigliata una tecnica differente: stampare in bianco e nero un documento a colori, e poi acquisirlo con uno scanner e stamparlo di nuovo, ripetendo il ciclo due o tre volte, in modo da vedere se alla fine sia ancora possibile leggerne il contenuto. Le parti che risultano non leggibili al termine del procedimento sono quelle per cui bisogna aumentare il contrasto tra primo piano e sfondo.

Anche questo è però un metodo che porta a valutazioni soggettive. È necessario qualcosa di più oggettivo: disporre per esempio di parametri matematici, che definiscano senza ambiguità una soglia di contrasto sufficiente.

In un documento del 26 aprile 2000, intitolato Techniques for Accessibility Evaluation end Repair Tools (“Tecniche per gli strumenti di valutazione e ripristino dell’accessibilità” ), viene proposto un algoritmo, con lo scopo di definire due soglie di contrasto tra primo piano e sfondo, una per la luminosità e una per il colore, sufficienti a ritenere soddisfatte le richieste del punto di controllo 2.2 delle WCAG 1.0. Il documento però è rimasto allo stato di bozza e l’algoritmo viene presentato come una proposta aperta ai cambiamenti. Ciò nondimeno, esso è considerato lo strumento di riferimento con cui valutare la conformità al punto di controllo 2.2 delle WCAG 1.0 ed è stato adottato anche dalla legge italiana sull’accessibilità (legge 9 gennaio 2004 n. 4), che, in virtù del decreto di attuazione datato 8 luglio 2005, lo ha inserito nella metodologia per la verifica dei requisiti tecnici di accessibilità.

Poiché la scelta dei colori costituisce un elemento molto importante nella progettazione di documenti per il Web, nella quale confluiscono, e spesso si scontrano, le esigenze estetiche con quelle di una buona leggibilità, vale la pena di approfondire le basi sperimentali su cui poggia l’algoritmo di cui stiamo parlando.

La fonte da cui l’algoritmo è tratto è uno studio condotto da Chris Ridpath, Jutta Treviranus e Patrice L. Weiss, disponibile sul sito della società canadese A-Prompt, all’indirizzo http://www.aprompt.ca/WebPageColors.html . L’ipotesi teorica di partenza presentata in questo studio è che:

... un’ampia differenza nella luminosità e un’ampia differenza nella tonalità di colore indichino un alto grado di leggibilità. Una piccola differenza nella luminosità e/o una piccola differenza nella tonalità di colore indichino un basso grado di leggibilità.

L’ipotesi deriva da un precedente studio sul contrasto di colore, realizzato dallo scienziato della visione Aries Arditi e disponibile sul sito della società Lighthouse International .

Per verificare la validità dell’ipotesi, i tre ricercatori sottoposero a test 149 volontari, reclutati via Internet, tra cui 65 uomini e 84 donne. Oltre il 90% del campione aveva un’età compresa tra i 20 e i 65 anni. Poco meno del 20% dei volontari aveva un’acuità visiva tale da non richiedere alcun tipo di correzione della vista. I restanti erano miopi, ipermetropi, astigmatici, presbiti, spesso con più problemi di acuità visiva combinati insieme, e portavano occhiali o lenti a contatto. Nessuno dei volontari riferì di soffrire di deficit del campo visivo o della percezione dei colori.

Il test consisteva nel valutare il grado di leggibilità di una serie di 42 campioni, costituiti da un medesimo testo che veniva riproposto in 35 differenti combinazioni di colore di primo piano e di sfondo, con 7 campioni uguali riproposti casualmente nel corso della prova. I soggetti dovevano indicare su una scala orizzontale, posizionando con il mouse un cursore mobile, il punto in cui situavano il campione che veniva loro di volta in volta presentato, sapendo che la posizione all’estrema sinistra della scala indicava “impossibile da leggere” e quella all’estrema destra “leggibile con facilità”.

Riportiamo un estratto dalle conclusioni dello studio, che fanno seguito, nel documento, a una serie di diagrammi in cui sono illustrati i risultati dei test.

Questi risultati dimostrano che è possibile valutare la leggibilità delle pagine web sulla base dei colori in esse specificati. Tuttavia il giudizio, basato sulla differenza di luminosità e sulla differenza di colore, non è del tutto accurato. Vi sono altri fattori che influenzano la leggibilità, i quali richiedono ulteriori investigazioni. Numerosi campioni di colore, che erano classificati come eccellenti dal nostro algoritmo in termini di differenza di luminosità e di differenza di tonalità, sono stati giudicati insoddisfacenti dai nostri soggetti in termini di leggibilità. [...] Altri campioni, che erano valutati insoddisfacenti dal nostro algoritmo in termini di differenza di luminosità e di differenza di tonalità, sono stati giudicati molto soddisfacenti dai nostri soggetti in termini di leggibilità. È possibile che numerose combinazioni di colore siano rilevate con più facilità dal nostro sistema visivo e che siano di conseguenza più leggibili. Alcune combinazioni di colore possono essere visualizzate meglio o peggio in dipendenza dei criteri di progettazione del monitor del computer, delle impostazioni di visualizzazione e del tipo di luce ambiente.
[...] Le pagine web usano comunemente più di due colori per la visualizzazione del testo. La maggior parte delle pagine usa un colore per il testo normale, un altro colore per il testo dei link non visitati e un terzo colore per il testo dei link visitati. Il modo in cui questi tre colori interagiscono tra loro e con il colore di sfondo non è stato investigato, e può essere un fattore generale di leggibilità.
In conclusione, i risultati di questo esperimento hanno dimostrato che, a dispetto della variabilità nelle valutazioni individuali, le risposte dei soggetti si adattano molto bene alla leggibilità dei colori predetta dall’algoritmo.

Tali conclusioni sono molto interessanti, perché gli autori pongono chiaramente e onestamente in luce che i risultati dei test, per quanto si adattino molto bene all’ipotesi di partenza, non permettono di considerare l’algoritmo proposto più che una tappa di un percorso di ricerca non ancora terminato, che richiede ulteriori approfondimenti e ulteriori test. Non può essere ignorato, per esempio, il fatto che numerosi campioni considerati insufficienti dall’algoritmo sono stati giudicati invece più che leggibili dai soggetti (e viceversa), né può essere sottovalutato che i test sono stati effettuati su individui che non erano tecnicamente ipovedenti né erano affetti da deficit della visione dei colori: i soggetti utilizzati per l’esperimento non possono perciò essere considerati rappresentativi della categoria di utenti che dovrebbe essere la principale beneficiaria dell’applicazione del punto di controllo 2.2 delle WCAG 1.0.

Negli ultimi anni, i limiti intrinseci della sperimentazione su cui è basato l’algoritmo, uniti ai notevoli vincoli nella scelta dei colori che impone ai grafici, hanno causato una serie di vibranti discussioni all’interno della comunità di sviluppatori interessati all’accessibilità, suscitando la richiesta di un nuovo algoritmo che consenta valori di soglia più tolleranti. A rendere più complessa la situazione, hanno espresso critiche su questo algoritmo anche i rappresentanti di associazioni di persone con deficit della vista, ma per ragioni opposte: a loro detta, vi sarebbero numerose combinazioni di colore, il cui contrasto è giudicato sufficiente dall’algoritmo, le quali risultano invece per loro illeggibili.

Così, recependo le richieste di sviluppatori e utenti, i membri del gruppo di lavoro WCAG hanno di recente proposto un nuovo algoritmo per la determinazione della soglia del contrasto testo/sfondo, che entrerà molto probabilmente a far parte del corredo di tecniche e strumenti di valutazione dell’accessibilità associati alle WCAG 2.0. Per dettagli su questo nuovo algoritmo, si veda il Capitolo 21.

Inizio pagina