I colori del tuo marchio hanno un forte impatto emotivo, ma come appaiono ai visitatori del sito che sono ipovedenti, daltonici o che affrontano fattori ambientali che rendono difficile la visibilità?
I livelli di colore e contrasto sono fondamentali per la comunicazione e ottenere questi dettagli giusti è fondamentale per il progettista attento all'accessibilità.'
I disturbi della percezione dei colori sono più comuni di quanto si possa pensare. Quindi, in questo post parleremo di come le persone con disabilità come ipovedenti, dislessia e daltonismo interagiscono con il web.
Sommario
Come posso utilizzare un controllo colori per migliorare l'accessibilità del mio sito web?
Questa sezione è in realtà abbastanza semplice, anche se richiede un certo sforzo. Dovrai utilizzare lo strumento di controllo del contrasto online di WebAIM. WebAIM è un'organizzazione senza scopo di lucro con sede presso la Utah State University con la missione di migliorare l'accessibilità web in tutto il mondo.
Inserisci semplicemente il colore di primo piano (ad esempio, il colore del testo o delle icone) e il colore di sfondo come valori esadecimali (noti anche come valori esadecimali), come specificato in HTML o CSS e il controllo del rapporto di contrasto ti informerà se il rapporto è sufficiente. Ricorda che il rapporto di contrasto minimo che dovresti cercare è 4.5 a 1. Il testo nero su sfondo bianco ha un rapporto di contrasto di 21 a 1, quindi hai un ampio margine di manovra.
5 strumenti per creare una tavolozza di colori per il Web visibile a tutti
1. Controllo contrasto colore WebAIM
Inserisci i colori esadecimali per il primo piano e lo sfondo. L'output mostra la conformità AA e AAA per testo normale e di grandi dimensioni, insieme a una frase di esempio. I cursori ti consentono di cambiare le cose finché non trovi una buona combinazione.
Punti di forza
- Strumento semplice con un'interfaccia gradevole alla vista.
- Questo è uno strumento carino e semplice per i principianti e non solo per i designer.
Punti di debolezza
- Non è possibile confrontare più di due colori, solo due.
- Il cursore della luminosità non è un ottimo modo per scegliere i colori. È difficile dire quanto siano attraenti i colori in questo semplice display.
2. Controllo del contrasto per WCAG
Inserisci i colori esadecimali per il primo piano e lo sfondo. Mostra la conformità AA e AAA per il testo normale e di grandi dimensioni accanto a un esempio di testo Lorem Ipsum. Potresti anche caricare una foto. Viene scelta automaticamente una tavolozza di 9 colori. Quindi, puoi confrontare ciascun colore come colore di primo piano o di sfondo.
Punti di forza
- Strumento semplice con un'interfaccia intuitiva.
- Avere la capacità di creare tavolozze dalle immagini.
Punti di debolezza
- La tavolozza viene scelta automaticamente e puoi modificarla ulteriormente con il selettore colori, ma tali modifiche non vengono salvate nella tavolozza. È necessario copiare e incollare le informazioni in un nuovo documento.
3. Cubo dei colori
Inserisci i colori per la tavolozza, ciascuno sulla propria riga. L'output mostra lettere campione con rapporti di contrasto rispetto agli standard AA per caratteri piccoli e grandi. Tre colonne mostrano il contrasto con uno sfondo bianco, uno sfondo nero e una serie di colori del marchio che sono i "più leggibili tra quelli disponibili".
Punti di forza
- Piacevole per la vista L'interfaccia utente (UI) è ben organizzata e lo stato superato/fallito/edge è facile da vedere.
Punti di debolezza
- Non soddisfa gli standard stabiliti da AAA.
- Non esegue tutte le possibili combinazioni di colori e all'inizio non è chiaro che sia così.
4.) Griglia di contrasto di otto forme
Inserisci i colori della tavolozza. Inoltre, puoi dare un nome a ciascun colore. L'app realizza una tabella con ogni possibile combinazione di colori. Ci sono tre dimensioni di piastrelle. Sono presenti segnali visivi per il rapporto pass/fail/edge AA e AAA e il rapporto di contrasto effettivo. Le colonne e le righe possono essere spostate nell'app trascinandole. I dati tabulari possono essere salvati, esportati e condivisi.
Punti di forza
- Ci sono molte funzionalità utili che aiutano con l'analisi di intere tavolozze.
Punti di debolezza
- È più difficile da imparare rispetto ad altri strumenti più facili da usare.
- Non è il modo giusto per confrontare solo due colori.
- Non va bene per capire come i colori stanno insieme.
- Un po' travolgente da guardare, ma ci sono molte informazioni mostrate.
5. Colore sicuro
Digita il colore dello sfondo. Scegli la famiglia, la dimensione e lo spessore del carattere. Scegli AA o AAA come standard. Mostra il colore selezionato e il relativo codice esadecimale, nonché un campione e il rapporto di contrasto effettivo. Le grandi miniature dei possibili colori in primo piano con sufficiente contrasto sono la parte migliore. Puoi scegliere di guardarli tutti o solo alcuni gruppi di colori (verdi, blu, viola, ecc.)
Punti di forza
- Con un'interfaccia gradevole alla vista, è facile trovare una combinazione di colori che abbia un bell'aspetto e funzioni bene.
- Questo è uno strumento utile se non disponi già di una tavolozza di colori del marchio o se desideri aggiungerla a quella che già possiedi per il Web.
Punti di debolezza
- Puoi confrontare solo i colori di primo piano e di sfondo alla volta.
- Devi copiare e incollare i colori in un documento separato se vuoi salvarli.
- Esci e crea cose per tutti!
Una volta che sai come utilizzare questi strumenti, potresti scoprire di averne bisogno più di uno per un progetto. Forse Color Cube è il modo migliore per mostrare a un cliente ciò che hai imparato sull'accessibilità. Forse utilizzerai sempre lo strumento WebAIM per eseguire rapidi controlli a campione.
Conclusione
Utilizzando i suggerimenti, le linee guida e gli strumenti di cui abbiamo appena parlato, puoi dare al tuo sito web colori ed etichette ad alto contrasto. Ciò renderà più facile per le persone ipovedenti, dislessiche e daltoniche leggere il tuo sito web e i tuoi contenuti. Non sorprenderti se anche il tuo pubblico generale trova più facile utilizzare il tuo sito web.
