Una guida all'accessibilità del colore nella progettazione del prodotto

Si parla molto di design accessibile, ma hai mai pensato all'accessibilità del colore?

Di recente, un cliente ha avviato un progetto con implementazioni molto specifiche e complesse di un sistema di colori accessibile. Questo mi ha aperto gli occhi non solo su quanto sia importante questa materia, ma anche quanto c'è da imparare.

Questa storia è di Justin Reyna

Impariamo come rendere il colore accessibile usando i principi di progettazione che già conosci.

Perché l'accessibilità è così importante?

L'accessibilità nella progettazione di prodotti digitali è la pratica di creare esperienze per tutte le persone, comprese quelle con disabilità visive, vocali, uditive, fisiche o cognitive. Come designer, sviluppatori e tecnici in generale, abbiamo il potere di creare una rete di cui siamo tutti orgogliosi: una rete inclusiva creata e consumabile da tutte le persone.

Inoltre, non creare prodotti accessibili è solo scortese, quindi non essere scortese.

L'accessibilità del colore consente alle persone con disabilità visive o con deficit della visione dei colori di interagire con le esperienze digitali allo stesso modo delle loro controparti non ipovedenti. Nel 2017, l'Organizzazione mondiale della sanità ha stimato che circa 217 milioni di persone vivono con una qualche forma di compromissione della vista da moderata a grave. Questa statistica da sola è una ragione sufficiente per progettare l'accessibilità.

"Non creare prodotti accessibili è solo scortese, quindi non essere scortese".

Oltre che l'accessibilità è una buona pratica etica, ci sono anche potenziali implicazioni legali per il mancato rispetto dei requisiti normativi in ​​materia di accessibilità. Nel 2017, i querelanti hanno presentato almeno 814 cause federali su siti Web presumibilmente inaccessibili, tra cui una serie di azioni collettive. Varie organizzazioni hanno cercato di stabilire standard di accessibilità, in particolare la Commissione di accesso degli Stati Uniti (Sezione 508) e il World Wide Web Consortium (W3C). Ecco una panoramica di questi standard:

  • Sezione 508: la conformità 508 si riferisce alla sezione 508 della legge sulla riabilitazione del 1973. Puoi leggere l'ordinanza approfondita qui, ma per riassumere, la sezione 508 richiede che il tuo sito debba essere accessibile se sei un'agenzia federale o crei siti su per conto di un'agenzia federale (come gli appaltatori).
  • W3C: Il World Wide Web Consortium (W3C) è una comunità internazionale volontaria fondata nel 1994 e sviluppa standard aperti per il web. Il W3C delinea le loro linee guida per l'accessibilità del web all'interno di WCAG 2.1, che è essenzialmente lo standard di riferimento per le migliori pratiche di accessibilità del web.

Garantire che il prodotto sia accessibile dal colore

La contabilità per l'accessibilità nelle fasi iniziali del ciclo di vita di un prodotto è la migliore: riduce il tempo e il denaro che spenderai per rendere i tuoi prodotti accessibili retroattivamente. L'accessibilità del colore richiede un po 'di lavoro iniziale quando si seleziona la tavolozza dei colori del prodotto, ma garantire che i colori siano accessibili pagherà i dividendi lungo la strada.

Ecco alcuni suggerimenti rapidi per assicurarti di creare prodotti accessibili al colore.

Aggiungi abbastanza contrasto

Per soddisfare la valutazione AA minima del W3C, il rapporto di contrasto tra sfondo e testo dovrebbe essere di almeno 4,5: 1. Pertanto, durante la progettazione di elementi come pulsanti, carte o elementi di navigazione, assicurati di controllare il rapporto di contrasto delle combinazioni di colori.

Esistono molti strumenti per aiutarti a testare l'accessibilità delle combinazioni di colori, ma quelli che ho trovato più utili sono Colorable e Colorsafe. Mi piace Colorable perché ha dei cursori che ti consentono di regolare Tonalità, Saturazione e Luminosità in tempo reale per vedere come influisce sul grado di accessibilità di una particolare combinazione di colori.

Non fare affidamento esclusivamente sul colore

Puoi anche garantire l'accessibilità assicurandoti di non fare affidamento sul colore per trasmettere informazioni cruciali sul sistema. Quindi, per cose come stati di errore, stati di successo o avvisi di sistema, assicurati di incorporare messaggistica o iconografia che chiari chiaramente ciò che sta succedendo.

Inoltre, quando si visualizzano cose come grafici o diagrammi, dare agli utenti la possibilità di aggiungere texture o motivi assicura che coloro che sono daltonici possano distinguerli senza doversi preoccupare del colore che influenza la loro percezione dei dati. Trello fa un ottimo lavoro con questa modalità Colorblind-Friendly.

Contrasto dello stato di messa a fuoco

Gli stati di attivazione aiutano le persone a navigare nel tuo sito con una tastiera fornendo loro un indicatore visivo attorno agli elementi. Sono utili per le persone con disabilità visive, le persone con disabilità motorie e le persone che amano semplicemente navigare con una tastiera.

Tutti i browser hanno un colore dello stato attivo predefinito, ma se prevedi di sovrascriverlo all'interno del tuo prodotto, è fondamentale assicurarti di fornire un contrasto di colore sufficiente. Ciò garantisce che coloro con disabilità visive o carenze di colore possano navigare con stati di messa a fuoco.

Documentare e socializzare il sistema di colore

Infine, l'aspetto più importante della creazione di un sistema di colori accessibile è dare al tuo team la possibilità di fare riferimento a esso quando necessario, quindi tutti sono chiari sull'uso corretto. Ciò non solo riduce la confusione e la confusione, ma assicura anche che l'accessibilità sia sempre una priorità per la tua squadra. In base alla mia esperienza, è più efficace richiamare esplicitamente il punteggio di accessibilità di una specifica combinazione di colori all'interno di un kit di interfaccia utente o di un sistema di progettazione, soprattutto quando si socializza tutto il team con uno strumento (come InVision Craft o InVision DSM). Ecco un esempio di come documentare le combinazioni di colori di sfondo e testo e il grado di accessibilità di ciascuna combinazione.

Siamo accessibili

Questi sono solo alcuni suggerimenti per rendere il tuo prodotto più accessibile, ma tieni presente che riguardano solo l'accessibilità del colore. Per comprendere in dettaglio le linee guida sull'accessibilità, ti consiglio di familiarizzare con WCAG 2.1. Mentre queste linee guida possono essere un po 'scoraggianti, ci sono tonnellate di risorse là fuori per aiutarti lungo la strada e, in caso di dubbio, non esitare a contattare i progettisti della tua zona (o via Internet) per chiedere aiuto.

Ti è piaciuto questo post? Leggi di più su Inside Design, un nuovo blog di InVision.

Originariamente pubblicato su invisionapp.com.