Daltonismo e web design: come progettare il proprio sito in 5 passi

Immagina un form di registrazione con i campi obbligatori in errore evidenziati solo da un bordo rosso. Per la maggior parte delle persone è chiaro: c'è qualcosa da correggere. Per circa 300 milioni di persone nel mondo, quel rosso è quasi indistinguibile dal grigio o dal verde dei campi corretti. 

Il daltonismo è una variabilità visiva comune che cambia il modo in cui una persona percepisce i colori. Non è una malattia, non è un difetto: è una caratteristica neurologica che riguarda circa il 4,5% della popolazione mondiale. E ogni volta che progettiamo un'interfaccia digitale affidando un'informazione critica solo a una sfumatura cromatica, costruiamo un muro invisibile.

Vediamo come riconoscere questi muri, come abbatterli con scelte progettuali precise e come integrare l'accessibilità del colore nel workflow quotidiano di un team di design.

Punti chiave su daltonismo e web design

Punto di partenza: Il daltonismo non è un caso limite. Riguarda circa un uomo su 12 e una donna su 200, una porzione consistente di chi visita siti web ogni giorno.

Cosa cambia nella pratica: Il colore non può essere l'unico canale che veicola un'informazione. Servono contrasti adeguati, ridondanza visiva (icone, pattern, microcopy) e test sistematici con simulatori.

Cosa portarsi a casa:

• Il rapporto di contrasto minimo è 4.5:1 per il testo normale, ma è il punto di partenza, non l'obiettivo

• La progettazione inclusiva inizia dal grayscale, non dal colore

• Brand identity e accessibilità convivono. È una questione di metodo, non di compromesso.

Cos'è il daltonismo e perché riguarda chi progetta il web

Il daltonismo è una condizione genetica che modifica la sensibilità dei coni della retina, le cellule responsabili della percezione cromatica. Chi vive con questa condizione non vede "in bianco e nero" (è un mito che riportiamo spesso): vede i colori, ma con uno spettro ridotto o spostato. Alcune tonalità si confondono, altre perdono saturazione, altre ancora diventano indistinguibili da sfumature vicine.

Per chi progetta interfacce, questo significa una cosa molto concreta. Quando affidiamo un'informazione critica a un colore — l'errore in rosso, la disponibilità in verde, lo stato attivo in arancione — stiamo scommettendo che ogni utente percepisca quel colore come noi lo abbiamo pensato. Per una fetta importante delle persone che useranno il nostro sito, quella scommessa è persa in partenza.

L'accessibilità del colore rientra in uno dei 4 principi fondamentali dell'accessibilità web: il principio della percepibilità. L'informazione deve essere ricevibile da chiunque, indipendentemente dal canale sensoriale o dalle caratteristiche individuali.

Le forme di daltonismo che incontri più spesso nel design

Esistono diverse tipologie di daltonismo, ma per chi progetta il web ne contano essenzialmente tre. 

1. La prima, di gran lunga la più diffusa, è il daltonismo rosso-verde, che si declina in due varianti (deuteranopia e protanopia). Persone con queste condizioni faticano a distinguere coppie cromatiche come rosso e verde, rosso e marrone, verde e marrone.

2. La seconda è il daltonismo blu-giallo (tritanopia), molto più raro. Riguarda meno dell'1% della popolazione e tende a confondere blu con verde e giallo con violetto.

3. La terza è la monocromia, una forma rara in cui la percezione cromatica è quasi assente. Chi vive con questa condizione vede il mondo digitale in scala di grigi.

La buona notizia è che progettare bene per la prima categoria, la più ampia, copre già una percentuale enorme dei casi pratici.

Cinque principi per un design accessibile alle persone con daltonismo

Esistono molti modi di entrare in questo tema. Quello che funziona meglio nella pratica è ridurlo a cinque principi che possono guidare ogni decisione di progettazione, dalla scelta della palette al microcopy degli stati di errore.

Non affidare mai un significato al solo colore

Ogni volta che un colore comunica uno stato (successo, errore, avviso, disponibilità, priorità), quel colore deve essere accompagnato da un secondo segnale: un'icona, un'etichetta testuale, un pattern, una posizione.

Un esempio classico è il messaggio di conferma. 

Verde + spunta + parola "Confermato" funziona per tutti. 

Solo verde, no.

Lo stesso vale per i grafici. Una serie temporale con tre linee colorate è leggibile solo se ogni linea ha anche uno stile diverso (continua, tratteggiata, punteggiata) o un'etichetta diretta sul tracciato. La legenda colorata da sola non basta.

Costruire contrasti in linea con le normative

Le linee guida WCAG (Web Content Accessibility Guidelines) fissano due soglie. 

1. Per il livello AA, il rapporto di contrasto tra testo e sfondo deve essere almeno 4.5:1 per il testo normale e 3:1 per il testo grande. 

2. Per il livello AAA, le soglie salgono rispettivamente a 7:1 e 4.5:1.

Il livello AA è il minimo legale in molti contesti, incluso il quadro dell'European Accessibility Act. Ma il livello AAA è quello che davvero abbatte le barriere per chi vive con ipovisione, fatica a leggere in luce intensa o usa schermi non calibrati.

Il contrasto si può misurare. Strumenti come WebAIM Contrast Checker o il pannello di accessibilità integrato in Chrome DevTools fanno il calcolo in tempo reale. 

Usare ridondanza visiva: pattern, icone, microcopy

Quando il colore non basta, il design deve avere un piano B. Tre strumenti coprono la maggior parte dei casi:

• Icone semantiche. Una "X" per l'errore, una spunta per il successo, un punto esclamativo dentro un triangolo per l'avviso. Sono pattern universalmente riconosciuti.

• Pattern grafici. Nei grafici a torta, nei diagrammi e nelle infografiche, sostituire o affiancare il colore con texture (linee diagonali, punti, trame) rende le aree distinguibili anche in scala di grigi.

• Microcopy esplicito. Un'etichetta accanto a un indicatore di stato non è ridondanza inutile: è progettazione robusta. "Disponibile" sotto un pallino verde funziona dove il solo pallino verde fallisce.

Progettare partendo dal grayscale

È un'inversione di metodo che cambia tutto. Costruire un'interfaccia prima in scala di grigi, e solo dopo introdurre il colore, costringe a risolvere gerarchie visive, contrasti e ridondanza prima di tutto il resto.

Se un'interfaccia funziona perfettamente in bianco e nero, funzionerà per chiunque. Il colore diventa un layer di rinforzo e di brand, non il portatore primario dell'informazione.

Molti team di design si fermano dopo aver completato il file Figma a colori e poi controllano l'accessibilità in fase di test. Invertendo l'ordine, l'accessibilità diventa una proprietà strutturale del design.

Brand identity e accessibilità: non è un compromesso

Una delle obiezioni più frequenti che sentiamo dai team di branding suona così: "Se cambio il rosso del nostro logo o aumento il contrasto dei pulsanti, perdo coerenza visiva".

È una falsa alternativa. Il branding non si gioca su una singola tonalità, ma su un sistema cromatico ampio: colore primario, secondari, accent, neutri, sfumature di stato. L'accessibilità si introduce in due modi:

• Definendo varianti accessibili dei colori di brand per usi funzionali (CTA, link, stati di errore)

• Affiancando ai colori altri segnali visivi che mantengono l'identità anche quando il colore non è leggibile

Il futuro dell'accessibilità web va in questa direzione: design system in cui inclusività e identità non sono in conflitto, ma costruite insieme dall'inizio.

Strumenti e processi per testare il design

Simulatori di visione cromatica

Sono filtri che mostrano un'interfaccia come la vedrebbe una persona con daltonismo. Permettono di valutare empiricamente se un'informazione passa anche senza il canale cromatico.

Tra gli strumenti più usati: Colorblindly (estensione Chrome), Stark (plugin per Figma e Sketch), Color Oracle (applicazione desktop) e i filtri integrati nel pannello di rendering di Chrome DevTools. Vanno usati in fase di design, non solo di QA.

Validatori di contrasto WCAG

Calcolano il rapporto di contrasto tra due colori e indicano se rispetta le soglie WCAG. Sono indispensabili nella definizione del design system: ogni coppia testo/sfondo va verificata prima di entrare in libreria.

WebAIM Contrast Checker e Adobe Color Accessibility Tools sono i due riferimenti più solidi. Entrambi gratuiti, entrambi integrabili nel workflow.

Come integrare il test nel ciclo di design

Il test non è un evento, è un'abitudine. Tre passaggi rendono questo principio operativo:

• In fase di sistema: validare contrasti e palette nel design system prima ancora di disegnare schermate

• In fase di design: controllare ogni schermata con un simulatore prima di passarla in handoff

• In fase di sviluppo: automatizzare i controlli di contrasto nei test di QA, con strumenti come axe DevTools o Lighthouse

Su grandi insiemi di pagine, strumenti automatizzati come Accessiway Scan possono identificare gran parte delle barriere cromatiche in modo continuo, restituendo report azionabili che il team può integrare direttamente nel proprio backlog.

Daltonismo, normativa e strategia: cosa cambia con l'European Accessibility Act

Dal 28 giugno 2025 è in vigore l'European Accessibility Act (EAA), la normativa europea che impone requisiti di accessibilità a un'ampia gamma di prodotti e servizi digitali venduti nell'Unione Europea. E-commerce, banking online, piattaforme di trasporto, servizi di telecomunicazione: tutti coinvolti.

L'EAA richiama esplicitamente le linee guida WCAG come standard tecnico di riferimento. Questo significa che le soglie di contrasto, la non-affidabilità del colore come unico canale informativo e gli altri principi di accessibilità cromatica non sono più solo buone pratiche: sono requisiti legali, con sanzioni progressive previste in caso di non conformità.

Ridurre l'EAA a un tema di compliance sarebbe però un errore strategico. Le aziende che hanno investito presto sull'accessibilità ne stanno ricavando vantaggi misurabili: tassi di conversione più alti, costi di assistenza più bassi, copertura SEO migliore, percezione di brand più solida.

Esistono ancora molti pregiudizi su questi temi. Ne abbiamo affrontati cinque nei miti da sfatare sull'accessibilità digitale.

Trasformare l'accessibilità del colore in un vantaggio che dura nel tempo

Tre cose ci portiamo a casa.

1. La prima: il daltonismo non è un caso d'uso secondario. È una variabilità diffusa, e progettare ignorandola significa escludere milioni di persone in modo evitabile.

2. La seconda: i principi sono pochi e robusti. Non affidare mai un significato al solo colore, costruire contrasti adeguati, usare ridondanza visiva, partire dal grayscale, integrare brand e accessibilità nello stesso design system. 

3. La terza, ed è il punto che spesso sfugge: l'accessibilità del colore non è una correzione una tantum, è una pratica continua. I siti cambiano, le palette evolvono, le componenti si moltiplicano. Senza un processo di monitoraggio strutturato, le barriere riemergono.

Il primo passo, insieme

Se vuoi capire dove il tuo sito ha barriere cromatiche oggi, il punto di partenza è una valutazione tecnica. Scopri come Accessiway può affiancare il tuo team con un audit di accessibilità che mappa le criticità, le prioritizza per impatto e ti guida nella rimediazione, senza sostituirsi al lavoro del tuo team ma costruendo insieme il percorso.

Prenota una demo

Domande frequenti su daltonismo e web design

Devo eliminare rosso e verde dalla mia palette?

No, e sarebbe controproducente. Rosso e verde sono colori cardine nella comunicazione digitale. Il punto non è eliminarli, ma non affidare loro l'intero peso del messaggio. Se rosso e verde sono accompagnati da icone, etichette o pattern, restano perfettamente utilizzabili.

La dark mode è un problema per le persone con daltonismo?

Non automaticamente, ma richiede attenzione. Su sfondo scuro alcuni colori saturi (in particolare il rosso e il blu intenso) tendono a vibrare e perdere leggibilità. La regola è la stessa di sempre: testare ogni accoppiata di colori contro le soglie WCAG e con simulatori. Una palette accessibile in light mode non è automaticamente accessibile in dark mode, e viceversa.

Esiste una palette universalmente accessibile?

Una palette universale non esiste, perché ogni progetto ha esigenze cromatiche diverse. Esistono però criteri universali per costruirne una: rapporti di contrasto WCAG rispettati, distinguibilità in scala di grigi, varietà di luminosità tra colori vicini, evitare coppie cromatiche critiche (rosso-verde, blu-viola, blu-grigio). Strumenti come Adobe Color o Coolors permettono di costruire palette personalizzate rispettando questi vincoli.

Qual è il rapporto di contrasto minimo da rispettare?

Le linee guida WCAG 2.2 richiedono un rapporto di almeno 4.5:1 tra testo e sfondo per il testo normale, e 3:1 per il testo grande (oltre i 18pt o 14pt in grassetto). Per il livello AAA, le soglie salgono a 7:1 e 4.5:1. Il livello AA è il riferimento minimo per la conformità all'European Accessibility Act.

Come testo velocemente un design per il daltonismo?

Tre passaggi rapidi coprono la maggior parte dei casi. Prima, applica un filtro daltonismo dal pannello di rendering di Chrome DevTools e naviga le pagine principali. Poi, verifica i contrasti dei testi con WebAIM Contrast Checker. Infine, prova a fare uno screenshot in scala di grigi e verifica se le informazioni critiche sono ancora leggibili. Se il design supera questi tre test, hai già coperto l'80% delle situazioni.