Progettare con colori accessibili

1. Introduzione

Ultimo aggiornamento: 05/11/22

Il sistema di colori Material 3 crea combinazioni di colori accessibili con l'algoritmo di colore dinamico, ma cosa significa accessibilità per il colore? In che modo il nuovo sistema di colori di Material Design crea una combinazione di colori accessibile e quali strumenti aiutano?

Obiettivi didattici

Come il colore si relaziona alle linee guida per l'accessibilità e il contrasto.
In che modo gli strumenti possono aiutarti a creare una combinazione di colori accessibile, apportare modifiche e controllare il contrasto.

Prerequisiti

Per questo lab ci baseremo su alcuni concetti di progettazione fondamentali.

Conoscenza degli schemi di colori e dei ruoli Android attuali.
Conoscenza di Figma.

Che cosa ti serve

2. Inizia

Configurazione

Per iniziare, devi accedere al file Figma di Designlab. Tutto ciò che ti serve per il lab è contenuto nel file Figma. Puoi scaricare e importare il file oppure duplicarlo dalla community di Figma.

Per prima cosa, accedi a Figma o crea un account.

Duplicare dalla community di Figma

Vai al file Designing with accessible colors o cerca Designing with accessible colors nella Figma Community. Fai clic su Duplica nell'angolo in alto a destra per copiare il file nei tuoi file.

Layout del file

Mentre esamini il file, noterai che è autonomo e inizia con un'introduzione. Ogni sezione è suddivisa in una riga di tavole da disegno collegate tra loro, con alcuni concetti fondamentali per la sezione, seguiti da esercizi. Le sezioni e gli esercizi si basano l'uno sull'altro e devono essere completati in sequenza.

Questo codelab ti guida attraverso questi concetti ed esercizi in modo più dettagliato. Segui il codelab per scoprire di più sulle nuove funzionalità di Material You.

A partire dalla tavola da disegno Intro, sono presenti pulsanti che collegano le tavole da disegno in ordine. Per accedere al link, fai clic sul pulsante.

Installare il plug-in Figma

Questo codelab si basa in gran parte su un nuovo plug-in Figma per generare schemi di colori e token dinamici. Installa il plug-in Figma direttamente dalla pagina della community Figma o cerca "Material Theme Builder" nella community Figma.

3. Colore e accessibilità

L'accessibilità è l'unico modo per progettare per tutti, garantendo che i prodotti che realizzi siano inclusivi per il pubblico più ampio possibile.

"Posso vedere il colore sullo schermo?" è solo la prima considerazione da tenere presente quando si progetta con il colore. Le persone vedono i colori in vari modi a seconda della loro acuità visiva.

Il daltonismo può significare controllare le combinazioni di colori in modo che gli elementi dell'interfaccia utente non si mescolino.

Sebbene l'opacità e il peso non siano la tonalità letterale di un colore, hanno un potente effetto visivo sul modo in cui il colore viene percepito.

L'utilizzo di un'opacità bassa crea un colore più chiaro, che può rendere il testo illeggibile. Ad esempio, una persona miope avrà difficoltà a leggere un testo impostato con un'opacità del 30% a una distanza ragionevole.

Utilizza l'opacità con cautela e mai al di sotto delle linee guida suggerite.

Lo spessore del carattere può avere un effetto simile, tenendo conto degli spessori più sottili su sfondi più scuri. Nella stampa, l'utilizzo di un carattere molto sottile consente all'inchiostro di "fuoriuscire" al suo interno, creando un testo claustrofobico. Anche i nostri occhi creano questo effetto sugli schermi, cercando di riempire lo spazio.

Il carattere sottile su uno sfondo scuro crea un effetto claustrofobico.

Leggibilità e leggibilità. In questo lab, faremo riferimento alla leggibilità del testo. La leggibilità misura la facilità di lettura, mentre la comprensibilità misura la facilità di comprensione.

4. Contrasto di colore

Le linee guida per l'accessibilità forniscono a designer e sviluppatori un elenco di controllo coerente e basato su competenze specifiche per garantire il rispetto delle best practice per la creazione di prodotti inclusivi. Le WCAG sono lo standard abituale e il riferimento di questo lab.

Il contrasto cromatico è la differenza tra la luminanza degli elementi in primo piano e di sfondo, presentata in formato di rapporto. A questi criteri di rapporto vengono assegnati dei voti. La misurazione del contrasto tra, ad esempio, il testo di un pulsante e il relativo contenitore può aiutare a determinare se il testo sarà leggibile.

Esempio con contrasto di colore non conforme.

Le linee guida sul contrasto cromatico sono suddivise in testo e non testo, ognuno con il proprio insieme di gradi.

Testo

	AA	AAA
Testo grande	3:1	4,5:1
Testo normale (corpo)	4,5:1	7:1

Non testuale

	AA
Elementi non testuali (grafici)	3:1

Proviamo a controllare il contrasto e vediamo come correggerlo manualmente.

In Figma, trova i colori negli elementi dell'interfaccia utente. A partire dal testo Grande (#C0BEC5), si trova su un colore di sfondo (#F5F5FF). Se inserisci questi colori in primo piano e sullo sfondo utilizzando un controllo del contrasto online, vedrai che non superano tutte le valutazioni.
Il testo è troppo chiaro per il colore di sfondo. Sempre nel controllo del contrasto online, regola il colore di primo piano con il selettore dei colori su un colore più scuro finché non supera il livello AAA.
In Figma, applica il nuovo colore di superamento al testo grande.
Segui la stessa procedura per il corpo del testo e i pulsanti, assicurandoti di controllare sia il colore del testo che quello dello sfondo per ciascuno.
,Utilizza il risultato in Oggetti grafici e componenti dell'interfaccia utente per applicare lo stesso processo alle icone**.**
Importa il nuovo colore in Figma per ogni elemento. Tutti gli elementi dovrebbero ora superare le valutazioni del contrasto.

Esempio con contrasto di colore sufficiente.

Probabilmente è stato un processo lungo e i risultati potrebbero aver creato una tavolozza dei colori meno armoniosa. È qui che gli strumenti possono aiutarti.

5. Realizzato con la luminanza

Il nuovo sistema di colori dinamici per Material Design è basato sulla luminanza anziché sulla tonalità. Ciò significa che se la tonalità e la saturazione venissero rimosse, potremmo vedere il contrasto attraverso le sfumature.

Quando viene estratto un colore, vengono generati 5 colori chiave spostati da cui vengono generate le tavolozze tonali. Una tavolozza tonale è composta da 13 tonalità, tra cui bianco e nero. Un valore di tonalità pari a 100 equivale all'idea di luce al massimo e produce il bianco. Ogni valore di tonalità compreso tra 0 e 100 esprime la quantità di luce presente nel colore.

Il sistema di tavolozze tonali è fondamentale per rendere accessibile per impostazione predefinita qualsiasi combinazione di colori.

La combinazione di colori in base alla tonalità, anziché al valore esadecimale o alla tonalità, è uno dei sistemi chiave che rendono accessibile qualsiasi output di colore. I prodotti che utilizzano il colore dinamico soddisfano i requisiti perché le combinazioni algoritmiche che un utente può sperimentare sono progettate per soddisfare gli standard di accessibilità.

Gli elementi con luminanza simile non hanno un contrasto appropriato per la leggibilità, mentre gli elementi con valori di luminanza diversi sono più distinguibili.

Il colore dinamico di Material You è progettato per funzionare in contesti imprevedibili. Per gestire i rapporti di contrasto in vari contesti di visualizzazione, i livelli di luminanza sono l'attributo chiave che consente ai colori di combinarsi correttamente anche senza che il team di prodotto testi ogni combinazione di colori specifica.

6. Creare un tema accessibile

Il generatore di temi genera token Material Design come stili Figma, consentendoti di visualizzare il colore dinamico e creare un tema personalizzato. Questa operazione viene eseguita seguendo il sistema di colori Material 3 per garantire che nella combinazione di colori vengano generati colori accessibili.

Nel modale del plug-in, fai clic su Personalizzato. In questo modo, il tema viene impostato su un tema personalizzato. Il tema Material è già generato, ma puoi anche crearne uno nuovo, se vuoi. Per scoprire di più, consulta la sezione Visualizzare il colore dinamico.
Successivamente, imposta un colore per il tasto principale. Il colore principale può essere il colore principale del brand o il colore di contrasto principale più utilizzato. Fai clic sul colore etichettato come Primario per aprire il selettore colori e scegliere un colore. Il colore principale viene utilizzato per il colore di origine, proprio come il colore di origine nell'impostazione dinamica.

Aggiungere colori alla MTB.

I colori dei tasti rimanenti vengono compilati in base al colore principale. Ciò significa che non è necessario aggiungere colori aggiuntivi se non ti servono. (Facoltativo) Aggiungi un colore secondario e terziario.
Lo schema dei colori mostra i colori chiave interpretati dai colori di input, le tavolozze tonali generate e le combinazioni di colori risultanti con i ruoli dei colori. Sono disponibili sia lo schema chiaro che quello scuro.
Il lab ha fornito un esempio di UI per visualizzare la combinazione di colori applicata. Con il componente UI dell'app selezionato, fai clic su Scambia all'interno del plug-in.

Combinazione di colori con mockup collegato.

Per questi esercizi, Material Theme Builder ha già generato i token richiesti nel file Figma.

7. Controllare il contrasto con Material Theme Builder

Ottimo, ma siamo consapevoli che vorrai aggiornare manualmente alcuni di questi stili con colori diversi. Material Theme Builder include il controllo del contrasto integrato per i colori dello schema principale per aiutarti a prendere queste decisioni.

Poiché i token vengono creati come stili, possiamo anche impostare il valore del colore generato. All'interno degli stili Figma, scorri verso il basso fino al colore principale del tema corrente e seleziona l'icona Modifica stile a destra.
Aggiorna il colore principale nelle proprietà. Ciò si riflette nell'output del colore e nell'interfaccia utente dell'app. L'algoritmo dei colori non ha generato questo colore, quindi non possiamo garantirne l'accessibilità.
Nel menu del plug-in, fai clic su Controlla contrasto e poi riapri la finestra modale Modifica stile per lo stile principale. Controlla il contrasto e mostra la relativa valutazione.

Contrasto nella finestra di dialogo dello stile di Figma.

8. Complimenti

Formidabile! L'accessibilità deve essere una parte fondamentale del tuo processo e con Material Design e Material Theme Builder è ancora più semplice.

Se hai domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.

Continua a seguirci per altri contenuti e tutorial di design su youtube.com/MaterialDesign.