Hai mai provato a leggere il testo su uno schermo e hai avuto difficoltà a leggerlo a causa della combinazione di colori o hai avuto difficoltà a vedere lo schermo in un ambiente molto luminoso o con poca luce? O forse hai un problema più permanente di visione dei colori, come si stima che 300 milioni di persone daltoniche o i 253 milioni di persone ipovedenti siano più ipovedenti?
In qualità di designer o sviluppatore, devi capire in che modo le persone percepiscono il colore e il contrasto, che sia temporaneo, situazionale o permanente. Questo ti aiuterà a supportare al meglio le loro esigenze visive.
Questo modulo ti introdurrà ad alcune nozioni di base su colori e contrasto accessibili.
Rilevamento del colore
Sapevi che gli oggetti non hanno colore ma riflettono le lunghezze d'onda della luce? Quando vedi il colore, gli occhi ricevono ed elaborano quelle lunghezze d'onda e le convertiranno in colori.
Quando parliamo di accessibilità digitale, parliamo di queste lunghezze d'onda in termini di tonalità, saturazione e leggerezza (HSL). Il modello HSL è stato creato come alternativa al modello di colore RGB e si allinea maggiormente al modo in cui l'uomo percepisce il colore.
Tonalità è un modo qualitativo per descrivere un colore, ad esempio il rosso, il verde o il blu, in cui ogni tonalità ha un punto specifico nello spettro di colori, con valori che vanno da 0 a 360, con il rosso impostato su 0, il verde con 120 e il blu con 240.
La saturazione è l'intensità di un colore, misurata in percentuali comprese tra 0% e 100%. Un colore con saturazione completa (100%) sarebbe molto vivido, mentre un colore senza saturazione (0%) sarebbe in scala di grigi o in bianco e nero.
La luminosità è il carattere chiaro o scuro di un colore, misurato in percentuali comprese tra 0% (nero) e 100% (bianco).
Misurazione del contrasto di colore
Per aiutare le persone con varie disabilità visive, il gruppo WAI ha creato una formula del contrasto dei colori per garantire un contrasto sufficiente tra il testo e lo sfondo. Quando vengono seguiti questi rapporti di contrasto, le persone ipovedenti possono leggere il testo sullo sfondo senza bisogno di tecnologie per la disabilità per il miglioramento del contrasto.
Diamo un'occhiata alle immagini con una tavolozza dei colori vivace e confrontiamo l'aspetto che vedrebbe a quelle con specifiche forme di daltonismo.
A sinistra, l'immagine mostra la sabbia arcobaleno con i colori viola, rosso, arancione, giallo, verde acqua, azzurro e blu scuro. A destra c'è un motivo arcobaleno multicolore più luminoso.
Deuteranopia
La deuteranopia (comunemente nota come cieco verde) si verifica nell'1-5% dei maschi e dallo 0,35% allo 0,1% delle femmine.
Le persone affette da deuteranopia hanno una sensibilità ridotta alla luce verde. Questo filtro per daltonismo simula il possibile aspetto di questo tipo di daltonismo.
Protanopia
La protanopia (comunemente nota come dai capelli rossi) colpisce dall'1,01% all'1,08% degli uomini e nello 0,02% dello 0,03% delle femmine.
Le persone affette da Protanopia hanno una sensibilità ridotta al luce rosso. Questo filtro per daltonismo simula il possibile aspetto di questo tipo di daltonismo.
Acromatopsia o monocromatismo
L'acromatopsia o il monocromatico (o daltonismo completo) si verifica molto, molto raramente.
Le persone affette da acromatopsia o monocromatismo non percepiscono quasi affatto la luce rossa, verde o blu. Questo filtro per daltonismo simula il possibile aspetto di questo tipo di daltonismo.
Calcolare il contrasto del colore
La formula del contrasto dei colori utilizza la luminanza relativa dei colori per determinare il contrasto, che può essere compreso tra 1 e 21. Questa formula viene spesso abbreviata in [color value]:1. Ad esempio, il nero e il bianco puro hanno il rapporto di contrasto di colore più elevato (21:1).
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
Il testo di dimensioni regolari, incluse le immagini del testo, deve avere un rapporto di contrasto del colore pari a 4.5:1 per soddisfare i requisiti minimi delle WCAG per il colore.
Il testo di grandi dimensioni e le icone essenziali devono avere un rapporto di contrasto di colore pari a 3:1.
Il testo di grandi dimensioni presenta una formattazione in grassetto di almeno 18 pt / 24 px o 14 pt/18,5 px. Loghi ed elementi decorativi sono esenti da questi requisiti di contrasto di colore.
Fortunatamente, non sono necessarie operazioni matematiche avanzate in quanto sono disponibili numerosi strumenti che eseguono automaticamente il calcolo del contrasto di colore. Strumenti come Adobe Color, Color Contrast Analyzer, Leonardo e il selettore colori di DevTools di Chrome possono indicare rapidamente i rapporti di contrasto dei colori e offrire suggerimenti per creare combinazioni e tavolozze di colori più inclusive.
Utilizzo del colore
Senza livelli di contrasto di colore ottimali, parole, icone e altri elementi grafici sono difficili da individuare e il design può diventare rapidamente inaccessibile. È anche importante prestare attenzione a come viene utilizzato il colore sullo schermo, in quanto non è possibile usare il colore da solo per trasmettere informazioni, azioni o distinguere un elemento visivo.
Ad esempio, se dici "fai clic sul pulsante verde per continuare", ma ometti eventuali contenuti o identificatori aggiuntivi per il pulsante, sarebbe difficile per le persone con alcuni tipi di daltonismo capire su quale pulsante fare clic. Analogamente, molti grafici e tabelle utilizzano i soli colori per comunicare le informazioni. L'aggiunta di un altro identificatore, come un pattern, un testo o un'icona, è fondamentale per aiutare le persone a comprendere i contenuti.
Esaminare i prodotti digitali in scala di grigi è un buon modo per rilevare rapidamente potenziali problemi di colore.
Query multimediali incentrate sui colori
Oltre a verificare i rapporti di contrasto dei colori e l'uso dei colori sullo schermo, ti consigliamo di applicare le sempre più diffuse e supportate query supporti che offrono agli utenti un maggiore controllo su ciò che viene visualizzato sullo schermo.
Ad esempio, con la query supporti @prefers-color-scheme puoi creare un tema scuro, che può essere utile alle persone con fotofobia o sensibilità alla luce. Puoi anche creare un tema ad alto contrasto con @prefers-contrast, che supporta le persone con carenze di colore e sensibilità del contrasto.
Preferisce la combinazione di colori
La query supporti @prefers-color-scheme consente agli utenti di scegliere una versione con tema chiaro o scuro del sito web o dell'app che stanno visitando. Puoi vedere questo cambiamento del tema in azione modificando le impostazioni delle preferenze relative a chiaro/scuro e passando a un browser che supporta questa query supporti. Consulta le istruzioni per la modalità Buio per Mac e Windows.
Preferisce il contrasto
La query supporti @prefers-contrast controlla le impostazioni del sistema operativo dell'utente per vedere se l'alto contrasto è attivato o disattivato. Per vedere questo cambiamento del tema, modifica le impostazioni della preferenza di contrasto e accedi a un browser che supporta questa query supporti (impostazioni della modalità di contrasto di Mac e Windows).
Sovrapposizione di query supporti
Puoi utilizzare più query supporti a colori specifici per offrire agli utenti ancora più
scelta. In questo esempio, abbiamo unito @prefers-color-scheme e @prefers-contrast.
Verifica la tua comprensione
Verifica la tua conoscenza del colore e del contrasto
Il colore da solo non è un identificatore sufficiente per la documentazione. Cos'altro aiuterà i lettori a identificare gli elementi dell'interfaccia utente?