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.
![Un occhio che guarda la ruota dei colori.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=19&hl=it)
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.
![Sabbia originale arcobaleno.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/original-rainbow-sand-81e58797919d3.jpg?authuser=19&hl=it)
![Motivo arcobaleno originale.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/original-rainbow-pattern-fe7465290afb8.jpg?authuser=19&hl=it)
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
![Sabbia arcobaleno, vista da una persona affetta da deuteranopia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=19&hl=it)
![Motivo arcobaleno, come visto da una persona affetta da deuteranopia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=19&hl=it)
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
![Sabbia arcobaleno, vista da una persona con protanopia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=19&hl=it)
![Motivo arcobaleno, come visto da una persona con protanopia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=19&hl=it)
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
![Sabbia arcobaleno, vista da una persona affetta da acromatopsia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=19&hl=it)
![Motivo arcobaleno, vista da una persona affetta da acromatopsia.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=19&hl=it)
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.
![UI impostazioni Mac](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=19&hl=it)
![Esempio di codice in modalità Luce.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=19&hl=it)
![Esempio di codice in modalità Buio.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=19&hl=it)
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).
![Esempio di codice in modalità Luce senza preferenza di contrasto.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=19&hl=it)
![Esempio di codice in modalità Buio con preferenza di contrasto elevato.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=19&hl=it)
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.
![Modalità Luce, contrasto regolare.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=19&hl=it)
![Modalità Buio, contrasto regolare.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=19&hl=it)
![Modalità Luce, contrasto elevato.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=19&hl=it)
![Modalità Buio, contrasto elevato.](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=19&hl=it)
Verifica le tue conoscenze
Verifica le tue conoscenze su colori e contrasto
Il colore da solo non è un identificatore sufficiente per la documentazione. Cos'altro aiuterà i lettori a identificare gli elementi dell'UI?