Colore e contrasto

Ti è mai capitato di provare a leggere un testo su uno schermo e di trovarne difficoltà a causa della combinazione di colori oppure di avere difficoltà a vedere lo schermo in un ambiente molto luminoso o con poca luce? Oppure hai un problema di visione dei colori più permanente, come i circa 300 milioni di persone daltoniche o i 253 milioni di persone con disabilità visiva?

In qualità di designer o sviluppatore, devi capire in che modo le persone percepiscono il colore e il contrasto, che si tratti di un'esperienza temporanea, situazionale o permanente. In questo modo, puoi supportare al meglio le sue esigenze visive.

Questo modulo illustra alcuni aspetti di base del colore e del contrasto accessibili.

Percepire il colore

Lo sapevi che gli oggetti non hanno colore, ma riflettono lunghezze d'onda della luce? Quando vedi un colore, i tuoi occhi ricevono ed elaborano queste lunghezze d'onda e le trasformano in colori.

Quando parliamo di accessibilità digitale, parliamo di queste lunghezze d'onda in termini di tonalità, saturazione e luminosità (HSL). Il modello HSL è stato creato come alternativa al modello di colore RGB e si allinea di più alla percezione del colore da parte dell'uomo.

Nota: in CSS, un colore può essere specificato in molti modi, ad esempio utilizzando i nomi dei colori, i valori RGB, RGBa, HEX, HSL, HSLa, HSV o HSVa. HSLa è simile a HSL, è stato aggiunto solo un valore alpha. "Alpha" indica l'opacità ed è definita come un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).

La tinta è un modo qualitativo per descrivere un colore, ad esempio rosso, verde o blu, dove ogni tinta ha un punto specifico nello spettro dei colori con valori che vanno da 0 a 360, con il rosso a 0, il verde a 120 e il blu a 240.

La saturazione è l'intensità di un colore, misurata in percentuali che vanno da 0% a 100%. Un colore con saturazione completa (100%) sarebbe molto vivace, 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, misurata in percentuali che vanno da 0% (nero) a 100% (bianco).

Misurare il contrasto di colore

Per aiutare le persone con varie disabilità visive, il gruppo WAI ha creato una formula per il contrasto di colore per garantire un contrasto sufficiente tra il testo e lo sfondo. Se vengono rispettati questi rapporti di contrasto dei colori, le persone con disabilità visive moderate possono leggere il testo sullo sfondo senza bisogno di tecnologie per la disabilità visiva che migliorano il contrasto.

Dai un'occhiata alle immagini con una tavolozza di colori vivaci e confronta l'aspetto di queste immagini per le persone con forme specifiche di daltonismo.

Foto di Alexander Grey su Unsplash.

Foto di Clark Van Der Beken su Unsplash.

A sinistra, l'immagine mostra sabbia arcobaleno con i colori viola, rosso, arancione, giallo, verde acqua, azzurro e blu scuro. A destra è presente un motivo arcobaleno multicolore più luminoso.

Deuteranopia

La deuteranopia (comunemente nota come cecità ai colori verde) si verifica nell'1-5% dei maschi e nello 0,35-0,1% delle femmine.

Le persone con deuteranopia hanno una sensibilità ridotta alla luce verde. Questo filtro per daltonismo simula l'aspetto di questo tipo di daltonismo.

Protanopia

La protanopia (nota comunemente come cecità ai colori rossi) si verifica nell'1,01-1,08% dei maschi e nello 0,02-0,03% delle femmine.

Le persone affette da protanopia hanno una sensibilità ridotta alla luce rossa. Questo filtro per daltonismo simula l'aspetto di questo tipo di daltonismo.

Acromatopsia o monocromatismo

L'acromatopsia o il monocromatismo (o daltonismo completo) si verifica molto, molto raramente.

Le persone con acromatopsia o monocromatismo non percepiscono quasi la luce rossa, verde o blu. Questo filtro simula l'aspetto di questo tipo di daltonismo.

Calcolare il contrasto di colore

La formula del contrasto di colore 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 puro rispetto al bianco puro ha il rapporto di contrasto del colore più elevato, pari a 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 normali, incluse le immagini di testo, deve avere un rapporto di contrasto di colore 4.5:1 per soddisfare i requisiti minimi 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 è caratterizzato da almeno 18 pt/24 px o 14 pt/ 18,5 px in grassetto. I loghi e gli elementi decorativi sono esenti da questi requisiti di contrasto dei colori.

Fortunatamente, non è richiesta alcuna matematica avanzata, in quanto esistono molti strumenti che fanno al posto tuo i calcoli del contrasto dei colori. Strumenti come Adobe Color, Color Contrast Analyzer, Leonardo e il selettore dei colori di DevTools di Chrome possono indicarti rapidamente i rapporti di contrasto dei colori e offrire suggerimenti per aiutarti a creare le coppie di colori e le tavolozze più inclusive.

Utilizzo del colore

Senza un buon livello di contrasto dei colori, le parole, le icone e altri elementi grafici sono difficili da individuare e il design può diventare rapidamente inaccessibile. Ma è anche importante prestare attenzione a come viene utilizzato il colore sullo schermo, dato che non puoi usare da solo il colore per trasmettere informazioni, azioni o distinguere un elemento visivo.

Ad esempio, se dici "Fai clic sul pulsante verde per continuare", ma ometti contenuti o identificatori aggiuntivi per il pulsante, sarà difficile per le persone con determinati tipi di daltonismo capire su quale pulsante fare clic. Analogamente, molti grafici, tabelle e grafici utilizzano solo il colore per trasmettere informazioni. L'aggiunta di un altro identificatore, come un motivo, 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 sul colore

Oltre a controllare i rapporti di contrasto e all'uso del colore sullo schermo, dovresti valutare l'opportunità di applicare le query multimediali, sempre più popolari e supportate, che offrono agli utenti un maggiore controllo su ciò che viene visualizzato sullo schermo.

Ad esempio, utilizzando la query media @prefers-color-scheme, puoi creare un tema scuro, che può essere utile per le 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à al contrasto.

Nota: esistono ulteriori impostazioni del sistema operativo e query supporti da prendere in considerazione per l'accessibilità dei colori, ma sono molto meno supportate rispetto alle due elencate in questo modulo. Leggi Modalità di visualizzazione dell'accessibilità del sistema operativo e del browser per ulteriori informazioni sulle varie impostazioni di accessibilità del sistema operativo.

Preferisce la combinazione di colori

Supporto dei browser

• 76
• 79
• 67
• 12.1

Origine

La query sui media @prefers-color-scheme consente agli utenti di scegliere una versione chiara o scura del sito web o dell'app che stanno visitando. Puoi vedere questa variazione del tema in azione modificando le impostazioni di preferenza per il tema chiaro o scuro e passando a un browser che supporta questa query sui contenuti multimediali. Consulta le istruzioni per la modalità Scuro su Mac e Windows.

Impostazioni generali di macOS per l'aspetto.

Confronta la modalità Luce e Buio.

Modalità Luce.

Modalità Buio

.

Preferisce il contrasto

Supporto dei browser

• 96
• 96
• 101
• 14.1

Origine

La query di media @prefers-contrast controlla le impostazioni del sistema operativo dell'utente per verificare se la modalità ad alto contrasto è attivata o disattivata. Puoi vedere questa modifica del tema in azione modificando le impostazioni di preferenza del contrasto e passando a un browser che supporta questa query di media (impostazioni della modalità di contrasto di Mac e Windows).

Confronta il contrasto normale e quello elevato.

Modalità Luce, nessuna preferenza di contrasto.

Modalità Buio, preferenza di contrasto elevato.

Query sui contenuti multimediali a livello

Puoi utilizzare più query sui contenuti multimediali incentrate sui colori per offrire ai tuoi utenti ancora più scelte. In questo esempio, abbiamo sovrapposto @prefers-color-scheme e @prefers-contrast.

Confronta colore e contrasto.

Modalità Luce, nessuna preferenza per il contrasto.

Modalità Buio, nessuna preferenza di contrasto.

Modalità Luce, preferenza ad alto contrasto.

Modalità Buio, preferenza ad alto contrasto.

Verifica le tue conoscenze

Verifica le tue conoscenze su colore e contrasto

Il colore da solo non è un identificatore sufficiente per la documentazione. Cos'altro può aiutare i lettori a identificare gli elementi dell'interfaccia utente?

Pattern

Non proprio. I pattern da soli non sono sufficienti per aiutare un utente a identificare un elemento dell'interfaccia utente.

Testo

Non proprio. Il testo da solo potrebbe non essere sufficiente per aiutare un utente a identificare un elemento dell'interfaccia utente.

Icona

Non proprio. Un'icona da sola non è sufficiente per aiutare un utente a identificare un elemento dell'interfaccia utente.

Tutte le risposte precedenti

Sì. Due o più identificatori aiuteranno l'utente a identificare un elemento dell'interfaccia utente.