Colore e contrasto

Ti è mai capitato di leggere un testo sullo schermo e di avere difficoltà a leggerlo a causa della combinazione di colori o di non riuscire a vedere lo schermo in un ambiente molto luminoso o con scarsa illuminazione? O forse hai un problema di visione dei colori più permanente, come le 300 milioni di persone con daltonismo o le 253 milioni di persone con problemi di vista?

In qualità di designer o sviluppatore, devi capire come le persone percepiscono il colore e il contrasto, in modo temporaneo, situazionale o permanente. In questo modo potrai soddisfare al meglio le loro esigenze visive.

Questo modulo ti introdurrà ad alcuni concetti fondamentali di colore e contrasto accessibili.

Percepire il colore

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

Quando parliamo di accessibilità digitale, ci riferiamo a 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 maggiormente al modo in cui un essere umano percepisce il colore.

La tonalità è un modo qualitativo per descrivere un colore, ad esempio rosso, verde o blu, in cui ogni tonalità ha un punto specifico nello spettro dei colori con valori compresi tra 0 e 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 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à è la caratteristica chiara o scura di un colore, misurata in percentuali che vanno dallo 0% (nero) al 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 dei colori per garantire che il contrasto sia sufficiente tra il testo e lo sfondo. Se questi rapporti di contrasto cromatico vengono rispettati, le persone con ipovisione moderata possono leggere il testo sullo sfondo senza bisogno di tecnologie per la disabilità che migliorano il contrasto.

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

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

Deuteranopia

La deuteranopia (comunemente nota come cecità al verde) si verifica nell'1-5% dei maschi e nello 0,1-0,35% 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

Protanopia (comunemente nota come cecità al rosso) si verifica nell'1,01% - 1,08% dei maschi e nello 0,02% - 0,03% delle femmine.

Le persone con 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 monocromatismo (o cecità ai colori completa) si verifica molto, molto raramente.

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

Calcolare il contrasto di colore

La formula per il contrasto di colore utilizza la luminanza relativa dei colori per determinare il contrasto, che può variare da 1 a 21. Questa formula viene spesso abbreviata in [color value]:1. Ad esempio, il nero puro su 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, comprese le immagini di testo, deve avere un rapporto di contrasto del colore di 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 del colore di 3:1. Il testo di grandi dimensioni è caratterizzato da un carattere di 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 del colore.

Fortunatamente, non sono necessari calcoli matematici avanzati, in quanto esistono molti strumenti che eseguono i calcoli del contrasto cromatico per te. Strumenti come Adobe Color, Color Contrast Analyzer, Leonardo e il selettore di colori di Chrome DevTools possono indicarti rapidamente i rapporti di contrasto cromatico e offrirti suggerimenti per aiutarti a creare le coppie e le tavolozze di colori più inclusive.

Utilizzare il colore

Senza buoni livelli di contrasto cromatico, parole, icone e altri elementi grafici sono difficili da scoprire e il design può diventare rapidamente inaccessibile. Ma è anche importante prestare attenzione a come viene utilizzato il colore sullo schermo, in quanto non puoi utilizzare 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 qualsiasi contenuto o identificatore aggiuntivo del pulsante, sarà difficile per le persone con alcuni tipi di daltonismo sapere su quale pulsante fare clic. Allo stesso modo, molti grafici e tabelle 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.

La revisione dei tuoi prodotti digitali in scala di grigi è un buon modo per rilevare rapidamente potenziali problemi di colore.

Query supporti incentrate sul colore

Oltre a controllare i rapporti di contrasto dei colori e l'uso del colore sullo schermo, ti consigliamo di applicare le media query sempre più popolari e supportate, che offrono agli utenti un maggiore controllo su ciò che viene visualizzato sullo schermo.

Ad esempio, utilizzando la query supporti @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.

Preferenze della 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 cambio di tema in azione modificando le impostazioni delle preferenze chiare o scure e passando a un browser che supporta questa query supporti. Consulta le istruzioni per la modalità Buio per Mac e Windows.

Confronta la modalità Luce e la modalità Buio.

Preferisce il contrasto

La query supporti @prefers-contrast controlla le impostazioni del sistema operativo dell'utente per verificare se il contrasto elevato è attivato o disattivato. Puoi vedere questa modifica del tema in azione modificando le impostazioni delle preferenze di contrasto e accedendo a un browser che supporta questa query supporti (impostazioni della modalità di contrasto di Mac e Windows).

Confronta il contrasto normale e quello elevato.

Query supporti dei livelli

Puoi utilizzare più media query incentrate sul colore per offrire agli utenti ancora più scelte. In questo esempio, abbiamo impilato @prefers-color-scheme e @prefers-contrast.

Confronta sia il colore che il contrasto.