Tag: colori

Check My Colours: come analizzare il contrasto dei colori di un sito

E’ nata una nuova applicazione per analizzare i colori di una pagina web. Ecco qualche domanda a chi l’ha sviluppata.

Check My Colours

La scelta dei colori di una pagina web è uno degli elementi da considerare per avere un sito accessibile. Non è sufficiente tenere conto di alcune problematiche come il daltonismo o altri disturbi della percezione dei colori: esistono infatti numerose circostanze per le quali alcune scelte sbagliate potrebbero rendere un sito inaccessibile.

Basti pensare alla visualizzazione di una pagina senza CSS o con le immagini disabilitate: non avere dichiarato alcuni colori potrebbe rendere illeggibili alcuni testi.

In queste situazioni può tornare utile l’utilizzo di strumenti automatici: Check My Colours è un tool ancora in beta, realizzato dall’italiano Giovanni Scala, che promette molto bene.

Alcune domande all’autore

Per approfondire questa segnalazione ho voluto fare un paio di domande al suo creatore, anche per comprendere le ragioni della nascita di Check My Colours.

Come mai hai voluto creare un’applicazione di questo tipo pur esistendo già altre alternative simili?

Sin da quando ho iniziato a sviluppare siti ho sempre cercato di rendere i miei lavori pienamente accessibili per chiunque, sia dal punto di vista tecnico che umano. Quindi ho pensato che un’applicazione simile sarebbe stata d’aiuto.

Sì, è vero, esistono diversi tool simili, ma ad ognuno di questi manca “qualcosa”:

  • Quasi sempre permettono di verificare solamente il CSS esterno. CheckMyColours verifica i colori di ogni singolo elemento del DOM, siano essi definiti in un foglio di stile esterno o all’interno della pagina HTML. Questo approccio oltre ad essere più completo, permette di avere un rapido quadro della situazione della propria pagina (una sola scelta errata dei colori nel css può rendere illegibile centinaia di links… Gli altri “validatori” segnalerebbero comunque un solo errore…)
  • Non tutti gli strumenti attualmente online utilizzano gli algoritmi ufficialmente suggeriti dal consorzio W3C.
  • Alcuni tools richiedono l’installazione locale, e quindi sono utilizzabili solamente su determinati sistemi operativi

Gli obiettivi principali di questa applicazione sin dall’inizio sono stati:

  • avere come target principale i web designers. Fare una sola cosa, farla bene.
  • facilitare le operazioni di controllo di una pagina già online
  • ottenere risultati semplici da consultare
  • fornire mezzi per la scelta dei colori in fase di sviluppo (il color picker)
  • renderla utilizzabile su qualsiasi sistema operativo
  • renderla utilizzabile su qualsiasi browser

Prevedi degli aggiornamenti per il futuro? Stai lavorando già a delle modifiche?

Ovviamente questo è solo l’inizio. L’attuale versione online è ancora in fase beta. Sto ricevendo diverse mail di segnalazioni, proposte, consigli, e certamente ne terrò conto. Una bozza di roadmap creata al volo potrebbe essere:

  • correggere gli eventuali problemi della versione beta
  • stilare delle FAQ
  • migliorare il color picker
  • creare un’area blog per aggiornamenti sull’applicazione e
  • discussioni legate all’accessibilità.
  • ottimizzare l’utilizzo su iPhone e altri dispositivi mobili
  • permettere il salvataggio su pdf del report

Potete provare subito Check My Colours, tenendo presente che è in costante sviluppo. Se avete dei suggerimenti o delle proposte da fare, non esitate a contattare l’autore dal sito dell’applicazione.

L’accessibilità per i daltonici

Dal daltonismo agli altri disturbi della percezione dei colori: consigli e link utili per realizzare un sito accessibile.

Il daltonismo è spesso considerato l’unico problema nella visione dei colori, e nella relativa incapacità di distinguere il rosso dal verde.

In realtà la problematica è più ampia e complessa. Le percezioni possibili dei colori sono varie e riguardano buona parte della popolazione: l’8% dei maschi e l’1% delle femmine. Il daltonismo è solamente quella più diffusa, ed i colori problematici non sono solamente il rosso ed il verde.

Ragionando in termini percentuali, è comprensibile come la realizzazione di un sito accessibile anche a questa categoria di persone sia fondamentale.

Per non avere problemi a riguardo esistono da tempo gli standard web definiti dal W3C: i colori del testo e dello sfondo devono avere un sufficiente contrasto, sia per tenere conto delle persone che percepiscono i colori in maniera differente, che per la visione su schermi monocromatici.

Strumenti per la scelta dei colori

Fortunatamente esistono diverse risorse per poter realizzare siti che siano accessibili e attenti anche a queste tematiche. Tra i collegamenti più utili:

  • Colorblind Web Page Filter: un tool utilissimo per visualizzare una pagina esistente con diversi filtri attivi, ad esempio cecità al verde e rosso, o al blu e al giallo.
  • Ruota dei colori accessibili: scelti due colori, il risultato indica se il contrasto è sufficiente e se la combinazione è accessibile a tutti.
  • Colour Contrast Check: così come il tool precedente, indica se la combinazione di due colori selezionati rispetti gli standard indicati dal W3C. Segnala anche se i colori si avvicinano al valore corretto.
  • Colour Contrast Analyser (estensione per Firefox): un’estensione (installabile solo se registrati su addons.mozilla.org) per il browser di casa Mozilla che consente di risparmiare tempo nell’analisi del DOM di una pagina. Utilizzandola viene mostrata una tabella con tutte le combinazioni di colori di testo e background presenti, indicando se superano i requisiti minimi. Attenzione: non tiene conto delle immagini di sfondo e degli stati :hover nel CSS.
  • GrayBit: un tool che converte una pagina esistente in bianco e nero, per poter verificare se tutti i testi sono leggibili anche in versione monocromatica.
  • Contrast Analyser 2.1 (software): un semplice programma per Windows e Mac che consente di controllare il contrasto tra due colori specificati. Interessante la differenza di valutazione tra font di diverse dimensioni.

Raccomandazioni e consigli finali

Anche se la scelta di una combinazione di colori accessibile può sembrare un compito semplice, è necessaria attenzione soprattutto per i dettagli, che spesso fanno la differenza.

Un esempio può essere il contrasto tra testo ed immagini di sfondo, frequentemente trascurato. Altro caso è quello del mouseover: capita spesso di avere un contrasto sufficiente sullo stato normale dei link, per poi vedere combinazioni improponibili sugli stati :hover, :active e simili.

A volte può essere difficile mantenere un buon contrasto in tutte queste circostanze, ma per siti che si dichiarano aderenti agli standard è fondamentale che il testo sia sempre leggibile, in ogni situazione.

Concludo segnalandovi un recente test per misurare il vostro “Color IQ”: con un pò di pazienza ed un buon monitor potrete rendervi conto se avete difficoltà nella percezione dei colori.