Creare risorse accessibili: Colore e contrasto
Il colore e il contrasto giocano un ruolo fondamentale nel modo in cui gli utenti percepiscono e interagiscono con i tuoi contenuti. Per soddisfare gli standard di accessibilità, è importante garantire un contrasto sufficiente tra testo e sfondo, evitare di affidarsi al solo colore per trasmettere il significato e scegliere palette che supportino la leggibilità per tutti gli utenti. Questo articolo ti guida attraverso le migliori pratiche di utilizzo del colore e del contrasto per creare esperienze web inclusive e accessibili.
Per assicurarti che il tuo sito web, la tua landing page, il tuo modulo o il tuo messaggio soddisfino i requisiti di accessibilità, utilizza la lista di controllo disponibile qui.
Requisiti
- I testi di piccole dimensioni (caratteri regolari inferiori a 18pt (24 pixel CSS) o caratteri in grassetto da 14pt (19 pixel CSS)) devono avere un rapporto di contrasto di almeno 4,5:1 con lo sfondo.
- Il testo di grandi dimensioni (con caratteri da 18pt o 14pt in grassetto) deve avere un rapporto di contrasto di almeno 3:1 con lo sfondo.
- La regola del contrasto si applica anche alle immagini di testo, anche se è meglio evitare di usare immagini per il testo.
- Il contrasto dei controlli dell’interfaccia utente e degli elementi non testuali (come toggle, checkbox, ecc.) rispetto allo sfondo deve essere di 3:1.
- Il contrasto di tutti gli indicatori visivi di attenzione (ad esempio, il passaggio del mouse su un pulsante) rispetto allo sfondo deve essere di 3:1.
- Gli oggetti grafici come un’icona indipendente, un grafico o un’immagine devono avere un contrasto minimo di 3:1 tra l’elemento e lo sfondo.
- Tutte le informazioni visualizzate attraverso i colori devono avere un’alternativa testuale che il programma possa comprendere.
- Fornisci sempre un’alternativa visibile, come un testo o un’immagine, per qualsiasi informazione veicolata dal colore.
Il modo migliore per verificare se il layout è indipendente dal colore è un test in scala di grigi. In questo modo potrai verificare se tutti gli elementi importanti dal punto di vista dell’utente sono visibili e se necessitano di modifiche.
Esempi
 | FARE: Un contorno più scuro indica il passo corrente dell’utente nel flusso. Osservando la scala di grigi di questa vista, una soluzione di questo tipo permetterebbe a una persona daltonica di acquisire informazioni sulla sua posizione nel processo. |
  | FARE: I dati dei grafici possono essere distinti l’uno dall’altro aggiungendo delle forme alle linee. Guardando la scala di grigi di questa vista, questa soluzione permetterebbe a una persona daltonica di acquisire informazioni sui dati. |
  | FARE: Il testo deve essere su uno sfondo con un rapporto di contrasto di 4,5:1. NON FARE: Non utilizzare un colore di sfondo per il testo con un rapporto di contrasto inferiore a 4.5:1. |
