Colore e contrasto

Ti è mai capitato di provare a leggere un testo su uno schermo e di trovarlo difficile a causa alla combinazione di colori o fatica a vedere lo schermo in una zona molto luminosa in un ambiente poco illuminato? O forse sei una persona con un colore più permanente problema visivo, ad esempio 300 milioni di persone daltonismo stimate o dei 253 milioni di persone ipovedenti?

In qualità di designer o sviluppatore, devi capire come le persone percepiscono il colore e contrastarli, che siano temporanei, situazionali o permanenti. Ciò ti aiuterà le esigenze visive.

Questo modulo ti introdurrà ad alcuni concetti fondamentali relativi a colore e contrasto.

Rilevamento del colore

Sapevi che gli oggetti non possiedono colore ma riflettono le lunghezze d'onda di luce? Quando vedi il colore, i tuoi occhi ricevono ed elaborano le lunghezze d'onda e convertirli in colori.

Quando si parla di accessibilità digitale, parliamo di queste lunghezze d'onda. termini di tonalità, saturazione e leggerezza (HSL). Il modello HSL è stato creato come un'alternativa al modello di colore RGB ed è più in linea con il modo in cui percepisce il colore.

Tonalità è un modo qualitativo per descrivere un colore, ad esempio rosso, verde o blu, in cui ogni tonalità ha uno specifico punto dello spettro cromatico 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 dallo 0%. al 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, misurata in percentuali che vanno dallo 0% (nero) al 100% (bianco).

Misurazione del contrasto di colore

Per aiutare le persone con varie disabilità visive, il gruppo WAI ha creato un formula del contrasto di colore per assicurati che il contrasto sia sufficiente tra il testo e lo sfondo. Quando questi rapporti di contrasto di colore seguito, le persone ipovedenti possono leggere i testi sullo sfondo senza bisogno di tecnologie per la disabilità che migliorano il contrasto.

Diamo un'occhiata alle immagini con una tavolozza dei colori vivaci e confrontiamo sembrerebbero le persone con determinate forme di daltonismo.

di Gemini Advanced.

.

.

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

Deuteranopia

Deuteranopia (comunemente noto come cieco verde) si verifica nell'1%-5% dei maschi, dallo 0,35% allo 0,1% dei femmine.

Le persone affette da deuteranopia hanno una minore sensibilità alla luce verde. Questo filtro daltonismo simula questo tipo di daltonismo.

Protanopia

Protanopia (comunemente noto come cieco rosso) si verifica nell'1,01%-1,08% dei maschi e nello 0,02% dei 0,03% delle donne.

Le persone affette da protanopia hanno una minore sensibilità alla luce rossa. Questo filtro daltonismo simula questo tipo di daltonismo.

Acromatopsia o monocromatismo

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

Le persone affette da acromatopsia o monocromatismo non hanno quasi percepito il rosso, verde o blu. Questo filtro per daltonismo simula ciò che questo tipo di potrebbe essere daltonismo.

Calcolare il contrasto di colore

La formula del contrasto di colore utilizza luminanza relativa di per stabilire il contrasto, che può essere compreso tra 1 e 21. Questa formula viene spesso abbreviato in [color value]:1. Ad esempio, nero puro rispetto a puro il bianco ha il rapporto di contrasto di colore più elevato 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, deve avere un rapporto di contrasto di colore di 4.5:1 per superare 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 è caratterizzato da una dimensione di almeno 18 pt / 24 px o 14 pt / 18,5 px in grassetto. I loghi e gli elementi decorativi sono esenti da questi colori di contrasto.

Fortunatamente, non sono necessarie funzioni matematiche avanzate, in quanto esistono molti strumenti che calcoli il contrasto di colore al posto tuo. Strumenti come Adobe Color Strumento di analisi del contrasto dei colori, Leonardo e Selettore colori di DevTools di Chrome può indicare rapidamente il rapporto di contrasto di colore e offrirti suggerimenti per aiutarti per creare le combinazioni di colori e le tavolozze più inclusive.

Uso del colore

Senza buoni livelli di contrasto di colore, parole, icone e altri elementi grafici elementi sono difficili da trovare, e il design può diventare rapidamente inaccessibile. Ma è importante anche pagare su come viene utilizzato il colore sullo schermo, in quanto non puoi usare il solo colore 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 sul pulsante, verrà per le persone affette da determinati tipi di daltonismo è difficile capire quale pulsante a cui fare clic. Allo stesso modo, molti grafici e tabelle utilizzano solo il colore per trasmettere informazioni. L'aggiunta di un altro identificatore, ad esempio un pattern, un testo o un'icona, fondamentale per aiutare le persone a comprendere i contenuti.

Rivedere i tuoi 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 di colore e l'uso del colore sullo schermo, dovresti prendere in considerazione l'applicazione della sempre più diffusa query multimediali che offrono agli utenti un maggiore controllo su ciò che viene visualizzato sullo schermo.

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

Preferisce la combinazione di colori

La query supporti @prefers-color-scheme consente agli utenti di scegliere una luce o versione con tema scuro del sito web o dell'app che stanno visitando. Puoi vedere che questo il tema cambia in azione modificando le impostazioni delle preferenze per chiaro/scuro e in un browser che supporti questa query multimediale. Esamina il Mac e Istruzioni per la modalità Buio in Windows.

Confronta la modalità Luce e Buio.

di Gemini Advanced.

.

Preferisce il contrasto

La @prefers-contrast la query supporti controlla le impostazioni del sistema operativo dell'utente per verificare se l'alto contrasto è attivato o meno. Puoi vedere come cambia il tema modificando il contrasto le impostazioni delle preferenze e l'accesso a un browser che supporta questa query multimediale (impostazioni della modalità di contrasto su Mac e Windows).

Confronta contrasto normale e alto.

di Gemini Advanced.

Sovrapposizione delle query supporti

Puoi utilizzare più query supporti incentrati sui colori per offrire agli utenti ancora più scelte. In questo esempio, abbiamo sovrapposto @prefers-color-scheme e @prefers-contrast insieme.

Confronta colore e contrasto.

di Gemini Advanced.

di Gemini Advanced.

Verifica le tue conoscenze

Verifica le tue conoscenze su colori e contrasto