Come rendere i grafici accessibili alle persone daltoniche

Un grafico può essere tecnicamente corretto e lasciare comunque il lettore incapace di comprenderlo. Il colpevole abituale è il colore chiamato a fare tutto il lavoro: una linea rossa significa una cosa, una verde un’altra, e la legenda è l’unica chiave. Per chi ha un deficit della visione dei colori — e per molte persone che guardano un grafico in controluce, su uno schermo scadente o in bianco e nero — questo crea un attrito inutile.

La soluzione non è smettere di usare il colore, ma usarlo come uno tra più segnali. Questa guida trasforma quel principio in decisioni concrete per grafici, dashboard, mappe e infografiche.

La regola centrale: il colore non può essere l’unico segnale

Il criterio di successo WCAG 1.4.1 richiede che il colore non sia l’unico mezzo visivo usato per veicolare informazioni, indicare un’azione, sollecitare una risposta o distinguere un elemento visivo. Nelle grafiche di dati significa che il lettore deve poter distinguere categorie, serie, stati o significati senza identificare una tonalità.

Buone alternative includono:

• Etichette testuali e valori diretti
• Forme di marcatore diverse su linee o punti
• Stili di linea continua, tratteggiata e punteggiata
• Pattern, texture o contorni in barre e aree
• Icone chiare e testo descrittivo nella legenda
• Una tabella di dati o una sintesi testuale che dia le stesse informazioni essenziali

La combinazione migliore dipende dal tipo di grafico e dal fatto che al lettore serva una panoramica rapida o valori esatti.

Costruisci il grafico attorno alla domanda

Prima di scegliere i colori, scrivi una frase che esprima il messaggio chiave del grafico. Per esempio: “Le vendite sono cresciute in tutte le aree, con l’aumento maggiore a ovest.” Poi verifica se un lettore potrebbe rispondere a quella domanda vedendo il grafico in scala di grigi.

Se la risposta è no, aggiungi un segnale non cromatico. Questa singola verifica intercetta l’errore di accessibilità più comune: usare una palette gradevole che però codifica l’informazione solo con la tonalità.

Preferisci etichette dirette a legende lontane

Le legende costringono il lettore ad abbinare un piccolo campione a un elemento del grafico, a volte più volte. Diventa più difficile quando i colori sono simili o le linee si incrociano. Dove lo spazio lo consente, etichetta la serie alla fine della linea, metti i valori accanto alle barre o annota direttamente il punto rilevante.

Per esempio, invece di una linea blu, una arancione e una verde con legenda in basso, aggiungi il nome della categoria accanto all’ultimo punto di ciascuna linea. Tieni l’etichetta abbastanza vicina da non essere scambiata per un’altra serie. Il colore resta d’aiuto, ma è il testo a identificare.

Adatta i segnali ridondanti al tipo di grafico

Grafici a linee

Usa una combinazione di stile di linea, forma dei marcatori ed etichette finali. Una linea continua con cerchi, una tratteggiata con quadrati e una punteggiata con triangoli restano distinguibili anche quando i colori sembrano simili.

Evita troppe serie in un solo grafico. Quando sono molte, valuta i piccoli multipli — grafici separati con scala coerente — invece di aspettarti che il lettore districhi una legenda affollata.

Grafici a barre

Usa etichette di categoria e valori diretti. Se le barre rappresentano categorie da distinguere nello stesso gruppo, aggiungi pattern o un contorno netto oltre al colore. La tecnica G111 del W3C descrive proprio l’uso combinato di colore e pattern per le barre.

Per le barre impilate, etichetta i segmenti direttamente quando possibile e fornisci una tabella di supporto. I segmenti sottili sono difficili da leggere per tutti, anche con una buona palette.

Diagrammi a dispersione e a bolle

Abbina forme dei marcatori e colore, e usa dimensioni e contrasto sufficienti perché i marcatori non scompaiano. Aggiungi un bordo ai punti quando il riempimento è chiaro o lo sfondo è affollato. Se i punti si sovrappongono, offri filtri, una tabella o una seconda vista che separi i gruppi.

Mappe e mappe di calore

Usa etichette, confini, simboli o pattern oltre al colore di riempimento. Una mappa dei trasporti, per esempio, può abbinare a ogni colore di linea un marcatore di fermata distintivo. In una mappa coropletica non far dipendere il messaggio solo da un sottile gradiente chiaro-scuro: includi una scala visibile, i valori e una tabella o una conclusione testuale.

Progetta per il contrasto, non solo per tonalità diverse

I colori possono differire per tonalità ed essere simili per luminosità, fondendosi in scala di grigi o con una differenza cromatica. Il contrasto è particolarmente importante per linee sottili, marcatori piccoli, bordi del grafico e testo.

Per gli oggetti grafici non testuali necessari a comprendere il grafico, le indicazioni WCAG sul contrasto non testuale usano in genere una soglia di 3:1 rispetto ai colori adiacenti. Il contesto conta, e talvolta un’etichetta o una tabella equivalente può veicolare l’informazione senza che il lettore debba distinguere la grafica da sola. Considera la verifica del contrasto una parte della revisione del design, non un sostituto di etichette e segnali ridondanti.

Usa il verificatore di contrasto per esplorare il contrasto tra primo piano e sfondo di testi di interfaccia ed elementi visivi semplici. Poi esamina il grafico completo: i layout reali introducono adiacenze, tratti sottili, stati al passaggio del mouse e sovrapposizioni che una singola verifica di coppia cromatica non coglie.

Dai ai lettori i dati dietro l’immagine

I grafici sono sintesi, non sostituti dell’accesso ai dati. Quando un grafico sostiene una decisione o un’affermazione importante, includi uno o più di questi elementi:

• Una tabella vicina con categorie e valori
• Una sintesi scritta e concisa dell’intuizione principale
• Un download accessibile, per esempio in CSV
• Una descrizione estesa per relazioni visive complesse
• Tooltip raggiungibili da tastiera o una vista dati focalizzabile nei grafici interattivi

Questo migliora l’usabilità sia per chi usa uno screen reader sia per chi non distingue ogni codifica visiva. Permette inoltre di verificare il messaggio senza stimare altezze di barre o spicchi di torta.

Una checklist pratica di revisione

Usala prima di pubblicare un report, una presentazione, una dashboard o un articolo:

• Il titolo indica di che cosa tratta il grafico e il periodo di riferimento?
• Ogni serie o categoria si può identificare senza affidarsi al solo colore?
• I valori essenziali sono etichettati, disponibili in una tabella o descritti nel testo vicino?
• Linee, marcatori, barre e voci di legenda hanno contrasto sufficiente dove si toccano o si sovrappongono?
• Le etichette sono leggibili a zoom ordinario e su schermo piccolo?
• Il grafico evita etichette di stato rosso/verde ambigue come “buono” e “cattivo” senza testo o icona?
• Chi usa la tastiera può raggiungere le informazioni di un grafico interattivo?
• Una revisione in scala di grigi o con simulazione cromatica rivela elementi ambigui?

Verifica con contenuti veri e persone vere

Controlli automatici e simulazioni sono utili campanelli d’allarme, ma non dimostrano che un grafico funzioni per tutti. Verifica il grafico finito nelle dimensioni reali, nel prodotto o documento in cui comparirà. Chiedi a una persona di individuare la serie più importante, il valore più alto e la conclusione senza suggerimenti.

Il nostro simulatore della visione dei colori può aiutare i designer a esplorare come un’immagine possa apparire con diverse differenze cromatiche comuni. Consideralo un passaggio di revisione aggiuntivo, non un sostituto della ricerca con gli utenti o della valutazione WCAG.

Per indicazioni più ampie sull’interfaccia, vedi design per il daltonismo.

Esempio: migliorare un grafico di stato

Immagina una dashboard con cinque reparti: barre verdi per “in linea con l’obiettivo”, rosse per “in ritardo” e gialle per “a rischio”. Una versione più accessibile potrebbe:

1. Aggiungere la parola di stato a ogni barra: “In linea”, “A rischio” o “In ritardo”.
2. Usare un’icona nell’etichetta, come una spunta, un triangolo di allerta o una freccia, con un testo che la spieghi.
3. Usare pattern o contorni come secondo segnale visivo.
4. Mostrare la percentuale effettiva e il valore obiettivo.
5. Fornire sotto il grafico una tabella con reparto, valore attuale, obiettivo e stato.

Per molti utenti il colore continua a rendere più rapida la lettura d’insieme. Semplicemente non è più l’unica via alla comprensione.

In sintesi

I grafici accessibili rendono il messaggio più solido. Etichette dirette, pattern, stili di linea, contrasto e dati equivalenti aiutano chi ha un deficit della visione dei colori a comprendere le stesse informazioni di tutti gli altri — e rendono il tuo lavoro più chiaro per l’intero pubblico.