Usando il contrasto di colore elevato per un design più accessibile
Un'alta frequenza di rimbalzo è spesso causata dalla scarsa accessibilità visiva di un sito web. Quando i caratteri sono troppo piccoli o sono difficilmente leggibili, quando ci sono troppe distrazioni o non abbastanza spazi bianchi, molte persone solo lasciare il sito senza pensarci due volte.
Uno dei motivi più frequenti per l'abbandono precoce è quello scarsamente selezionato combinazioni di colori che riducono la leggibilità del contenuto.
Secondo le statistiche dell'OMS, ci sono circa 285 milioni di persone con disabilità visive in tutto il mondo, molte delle quali sono parzialmente o completamente daltoniche. Le persone con disabilità visive vedono i colori in modo diverso, quindi evitando il contrasto di colori bassi nei nostri progetti è inevitabile se vogliamo fornire ai nostri clienti un sito web accessibile e di facile utilizzo.
Standard Web per contrasto di colore
Rapporto di contrasto del colore misura la differenza di contrasto tra due colori. Più alto è il valore, più facile è distinguere l'oggetto (testo, immagine, grafica) in primo piano dallo sfondo.
I colori possono contrastare in molti modi diversi, come in colore, valore e saturazione. Il rapporto di contrasto del colore è calcolato da una formula fornita da W3C, la principale organizzazione internazionale per il World Wide Web.
Può prendere un valore tra 1: 1 (nessun contrasto, il primo piano e lo sfondo hanno lo stesso colore) e 21: 1 (il massimo contrasto che esiste solo tra bianco e nero).
Le ultime Linee guida per l'accessibilità ai contenuti Web (WCAG) 2.0 di W3C offrono agli sviluppatori web e ai creatori di contenuti benchmark per il minimo (livello AA) e il valore avanzato (livello AAA) del rapporto di contrasto del colore accettabile.
Il livello AA richiede almeno Rapporto 4,5: 1 per testo normale, e 3: 1 per testi di grandi dimensioni. È molto più semplice leggere testi di grandi dimensioni come i sottotitoli, per questo è necessario un contrasto cromatico inferiore.
Se vuoi raggiungere il livello AAA che è il livello avanzato, devi progettare la tua combinazione di colori con maggiore cura, poiché richiede almeno Rapporto di contrasto 7: 1 per testo normale, e 4.5: 1 per grandi. Se un testo fa parte di un logo o di un marchio, non vi è alcun requisito minimo di contrasto di colore a livello di WCAG.
Possiamo solo chiamare un sito web visivamente accessibile se il il rapporto di contrasto del colore tra ogni oggetto in primo piano e lo sfondo raggiunge almeno il livello AA.
Vantaggi del rapporto di contrasto a colori elevati
Garantendo una migliore leggibilità non si coinvolgono solo gli utenti ipovedenti, ma anche persone che leggono i tuoi contenuti su piccoli schermi come su uno smartphone o uno smartwatch, tra cattive condizioni di illuminazione, e via monitor di qualità inferiore.
Le persone leggono anche più velocemente quando c'è più contrasto tra il testo e lo sfondo, quindi molto probabilmente ci vorrà più tempo per annoiarsi con il contenuto del sito.
Se ti preoccupi che applicare un rapporto di contrasto più elevato avrà un impatto negativo sull'estetica del tuo design, devi controllare il progetto web Contrast Rebellion che dimostra, con esempi di vita reale, che il rispetto delle regole del rapporto di contrasto elevato può ancora risultare in design accattivanti e fantastici.
App per il controllo del contrasto dei colori
Esistono molti ottimi strumenti gratuiti in tutto il Web che possono aiutare i progettisti a controllare il rapporto di contrasto del colore del loro sito web.
Il modo più semplice per testare il tuo design per il contrasto del colore è scegliere i colori principali con Photoshop o un'estensione del browser adatta come questa per Firefox, e copiare i valori in una delle app sotto.
La cosa più importante da ricordare è che devi sempre confronta il colore di primo piano come il colore del testo con l'area circostante (colore di sfondo).
1. Controllo contrasto colore WebAim
WebAim (Web Accessibility In Mind) è un'organizzazione che promuove l'accessibilità al web che offre agli sviluppatori un semplice ma affidabile controllore del contrasto del colore tra molti altri strumenti di accessibilità come Wave, un'app di valutazione generale dell'accessibilità che può aiutarti valutare rapidamente i problemi di accessibilità del tuo sito.
Il controllo del contrasto dei colori di WebAim ti dice se i tuoi colori superano i test WCAG AA e AAA, sia per i testi normali che per quelli di grandi dimensioni.
2. Controllo contrasto colore Snook
Jonathan Snook, che attualmente lavora come sviluppatore front end per Shopify, ha ospitato il suo pratico strumento per il controllo del contrasto del colore per oltre un decennio. L'app di Snook ti consente di cambia i valori HSL e RGB del colore di primo piano e di sfondo uno per uno utilizzando cursori gamma conveniente fino a raggiungere un risultato conforme ai benchmark WCAG 2.0.
CheckMyColours
CheckMyColours creato da Giovanni Scala consente di verificare il rapporto di contrasto del colore di tutte le combinazioni di colori di primo piano su un sito web dal vivo.
Calcola rapporto di contrasto luminosità, differenza di luminosità, e differenza di colore, e ti fornisce una relazione completa sui risultati. Il report di CheckMyColours può facilitare in modo significativo la comprensione di come migliorare l'accessibilità visiva del tuo sito.
Designer Schema colori
Color Scheme Designer non è un controllore del contrasto di colori, ma uno strumento per progettazione di combinazioni di colori complete.
Lo includiamo in questa raccolta, perché ha una funzionalità che ti permette di vedere come la tua combinazione di colori viene percepita da persone con diversi tipi di disabilità visive. Puoi testare i tuoi colori per la completa cecità ai colori, protanopia, deuteranopia e molti altri problemi visivi. L'app ha una versione più recente denominata Paletton che rende possibile anche una simulazione di visione più sofisticata (puoi anche testare cose come un display LED scadente o un display CRT debole).
W3C ti fornisce anche una vasta lista di strumenti di valutazione dell'accessibilità del Web in cui puoi trovare molti altri strumenti di contrasto del colore come questa utile rotellina dei colori di accessibilità.
Suggerimenti per la creazione di siti web visivamente accessibili
Se vuoi creare un sito web visivamente accessibile, è sempre una buona idea evitare di usare il solo colore per trasmettere funzionalità o significato. Le icone che cambiano colore in base al loro stato attuale sono esempi tipici di ciò.
Se è possibile, sempre progettare ulteriori segnali visivi che assiste le persone che vedono i colori in modo diverso nella comprensione della funzionalità.
Non dimenticare mai prestare maggiore attenzione al contrasto cromatico di pulsanti, collegamenti e menu, come sono i mezzi di navigazione sul tuo sito. Se gli utenti non possono navigare facilmente sul tuo sito, li perderai rapidamente. Colori accessibili per pulsanti di invito all'azione sono anche fondamentale per buoni tassi di conversione.
È una buona pratica del flusso di lavoro per testare il rapporto di contrasto del colore il prima possibile nel processo di progettazione, poiché sarà difficile persuadere il cliente a cambiare lo schema dei colori del sito più avanti nel processo di progettazione.
Ora Leggi: Approccio pratico alla scelta dello schema dei colori del sito web
