Colore, motivo ed etichette dirette
Codificare le serie in modo che possano essere lette anche da utenti daltonici
Colore, motivo ed etichette dirette è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Il solo colore inganna alcuni occhi
Circa un uomo su dodici non riesce a distinguere con sicurezza alcuni colori. Se nel grafico il rosso indica una perdita, questi utenti potrebbero non vedere alcuna differenza. 🎨
La regola dei due canali
Codificate ogni serie con un secondo canale oltre al colore: un motivo, una forma o un’etichetta diretta. Il colore diventa un aiuto, non l’unico indizio.
I motivi colmano la differenza
Applicate a barre e aree motivi distinti, come strisce o punti. Il riempimento permette di distinguere le serie anche in una scala di grigi completa.
<rect fill="url(#stripes)" />Forme diverse per i grafici a linee
Nei grafici a linee, contrassegnate i punti con forme diverse: cerchi, quadrati, triangoli. Ogni linea resta distinguibile senza affidarsi alla tonalità.
Le etichette dirette sono migliori delle legende
Una legenda separata costringe a cercare la corrispondenza tra colori. Inserite l’etichetta direttamente sulla linea o sulla fetta, così il nome si trova accanto al dato.
Scegliere una palette sicura per le persone daltoniche
Alcune coppie di tonalità, come rosso e verde, sono le più difficili da distinguere. Una palette color-blind-safe come Okabe-Ito evita questi contrasti problematici.
Anche qui il contrasto è importante
Le serie adiacenti e le relative etichette testuali hanno bisogno di un contrasto effettivo. WCAG richiede almeno un rapporto di 3 a 1 tra le parti grafiche significative.
Testare in scala di grigi
Fate una verifica rapida: visualizzate il grafico in scala di grigi. Se non riuscite a distinguere le serie, non ci riuscirà nemmeno una persona daltonica. Correggete il problema prima della pubblicazione.
filter: grayscale(100%);L’obiettivo è la codifica ridondante
Questa sovrapposizione di indizi si chiama codifica ridondante: colore, motivo ed etichetta. Se viene meno un indizio, il grafico resta comunque chiaro.
Non esagerare con gli indizi
L’equilibrio è importante. Accumulare tutti i motivi possibili crea confusione. Aggiungetene quanto basta perché ogni serie sia distinta e il grafico resti ordinato.
È utile anche in condizioni di scarsa illuminazione
Le etichette dirette e i motivi rendono leggibili i grafici anche alla luce del sole, su schermi economici o stampati in bianco e nero. Ne traggono vantaggio tutti. ☀️
Verifica rapida
Perché il solo colore è un modo poco efficace per distinguere le serie di un grafico?
Riepilogo: più di un indizio
Avete imparato a non basarvi mai soltanto sul colore: aggiungete motivi, forme o etichette dirette, scegliete palette sicure e testate il risultato in scala di grigi. 🖤
Domande Frequenti
La lezione «Colore, motivo ed etichette dirette» è gratuita?
Sì — il testo completo di «Colore, motivo ed etichette dirette» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Colore, motivo ed etichette dirette»?
Codificare le serie in modo che possano essere lette anche da utenti daltonici Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Colore, motivo ed etichette dirette»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ogni grafico ha bisogno di un'alternativa testuale
- L'alternativa della tabella dati
- Colore, motivo ed etichette dirette
- Grafici interattivi navigabili con la tastiera