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.

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

3 commenti su “Check My Colours: come analizzare il contrasto dei colori di un sito”

  1. Splendido!
    Grazie ad entrambi, sia a Giovanni che ci ha regalato questa perla, sia a Tom per avercela segnalata.