# Palette per daltonici: colori accessibili e come testarli

[Canonical HTML page](https://gradiently.design/it/guide/color-blindness-design)

La maggior parte delle carenze nella visione dei colori non significa vedere in grigio. Significa che certe coppie di colori si fondono in una sola. Scegli colori con luminosità diversa e progetti già intorno al problema.

## The short version

- Una palette per daltonici usa colori che differiscono chiaramente per luminosità, non solo per tonalità, così restano distinti anche quando alcune tonalità si assomigliano.
- La confusione tra rosso e verde è di gran lunga la forma più comune di deficit della visione dei colori; quella tra blu e giallo è molto più rara, e non vedere alcun colore lo è ancora di più.
- La palette di Okabe e Ito, composta da otto colori, è stata pensata per restare distinguibile nei tipi più comuni di daltonismo ed è libera da usare.
- Non lasciare mai che il colore porti da solo il significato: aggiungi anche un'etichetta, un'icona, un motivo o una posizione.
- Gli strumenti per sviluppatori di Chrome ed Edge possono simulare diversi tipi di daltonismo su qualsiasi pagina, e un controllo in scala di grigi individua la maggior parte dei problemi in pochi secondi.

Una **palette per daltonici** è un insieme di colori che restano distinti per chi confonde certe tonalità, di solito rossi e verdi. Il trucco è separare i colori per luminosità oltre che per tonalità, e non lasciare mai il colore come unico segnale. Un blu scuro e un arancione chiaro restano diversi per quasi tutti; un rosso medio e un verde medio, con luminosità simile, possono sembrare lo stesso marrone spento. Qui sotto trovi palette da copiare, le coppie da evitare e tre modi gratuiti per testare il tuo lavoro.

## I tipi di daltonismo, in breve

La visione dei colori dipende da tre tipi di coni nell'occhio, sintonizzati grosso modo su lunghezze d'onda lunghe, medie e corte. Quando un tipo manca o è spostato, alcuni colori che alla maggior parte delle persone sembrano diversi iniziano ad assomigliarsi. L'[articolo di WebAIM sul daltonismo](https://webaim.org/articles/visual/colorblind) spiega la biologia; per chi progetta, conta questa tabella.

| Tipo | Coni coinvolti | Colori che si confondono | Quanto è diffuso |
| --- | --- | --- | --- |
| Deuteranomalia e deuteranopia | Verde (medi) | Rosso con verde, verde con marrone, blu con viola | Il più comune |
| Protanomalia e protanopia | Rosso (lunghi) | Rosso con verde e nero, i rossi appaiono più scuri | Comune |
| Tritanomalia e tritanopia | Blu (corti) | Blu con verde, giallo con rosa o grigio | Raro |
| Acromatopsia | Tutti | Tutto è visto in sfumature di grigio | Molto raro |

I tipi legati a rosso e verde si ereditano dal cromosoma X, ed è per questo che sono molto più frequenti negli uomini che nelle donne.

Il filo comune: la tonalità diventa inaffidabile, ma **la luminosità resiste**. Chi ha la deuteranopia vede ancora chiaramente che un colore è più scuro di un altro. Questo solo fatto guida ogni regola che segue.

## Una palette per daltonici da copiare

L'insieme sicuro più noto è la palette proposta da Masataka Okabe e Kei Ito per le figure scientifiche. I suoi otto colori sono stati scelti per restare distinguibili nei tipi più comuni di daltonismo, e funziona altrettanto bene per grafici, mappe, etichette e colori di stato in un prodotto.

- Nero #000000: #000000
- Arancione #e69f00: #e69f00
- Azzurro #56b4e9: #56b4e9
- Verde bluastro #009e73: #009e73
- Giallo #f0e442: #f0e442
- Blu #0072b2: #0072b2
- Vermiglio #d55e00: #d55e00
- Viola rossastro #cc79a7: #cc79a7

La palette di Okabe e Ito. Usa solo i colori che ti servono: quattro o cinque sono più facili per tutti che otto.

Per il lavoro sul brand, otto colori sono di solito troppi. L'accoppiata singola più sicura è **blu e arancione**: stanno ai lati opposti della linea di confusione tra rosso e verde e differiscono per luminosità, quindi appaiono diversi a quasi tutti. Reggono bene anche blu con giallo e viola scuro con verde chiaro.

### Sfumature e scale per i dati

Per mappe di calore e grafici che mostrano un intervallo, usa una scala la cui luminosità cambia con regolarità da un capo all'altro. Una scala dal rosso al verde sbaglia due volte: gli estremi si confondono per chi è daltonico ed entrambi hanno luminosità simile. Dal blu all'arancione, o una sola tonalità dal scuro al chiaro, funziona per quasi tutti.

- Da evitare: rosso e verde: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)`
- Sicura: dal blu all'arancione: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)`
- Sicura: dal viola scuro al giallo: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)`

L'ultima scala segue i colori viridis, molto usati: la sua luminosità sale in modo uniforme, quindi resiste anche alla stampa in scala di grigi.

## Coppie da evitare e cosa usare al loro posto

Alcune combinazioni creano problemi di continuo. Il rosso `#d7263d` e il verde `#2e9e44` qui sopra sembrano chiaramente diversi alla maggior parte delle persone, ma la loro luminosità percepita è quasi identica (circa 57% e 62% in [OKLCH](https://gradiently.design/it/guide/oklch-explained)), quindi per chi ha la deuteranopia resta poco per distinguerli.

### Da evitare affiancati

- Rosso e verde con luminosità simile
- Verde e marrone
- Blu e viola
- Verde chiaro e giallo
- Rosa e grigio, o giallo e grigio chiaro

### Da usare al loro posto

- Blu e arancione
- Blu scuro e giallo chiaro
- Viola scuro e verde chiaro
- Una sola tonalità in gradini di luminosità ben distinti
- Qualsiasi coppia più un'etichetta o un'icona

Se i colori del tuo brand sono rosso e verde, non devi cambiarli. Basta che uno sia nettamente più scuro dell'altro, e che non siano mai l'unica differenza tra, per esempio, un guadagno e una perdita. Una freccia o un segno più e meno risolve il problema per tutti. Come scegliere i colori in partenza lo trovi in [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors).

## Non affidarti mai al solo colore

Questa è la regola che conta di più, ed è anche parte delle Web Content Accessibility Guidelines. Se la legenda di un grafico, un errore in un modulo, un'etichetta «disponibile» o una mappa si distinguono solo per colore, alcuni lettori perdono il significato. Aggiungi un secondo segnale:

- **Etichette** direttamente su linee e barre dei grafici, invece di una legenda a colori.
- **Icone** per gli stati: una spunta per il successo, una croce o un segnale di avviso per gli errori.
- **Motivi o stili di linea**, come linee tratteggiate e continue, nei grafici.
- **Posizione e ordine**, così il primo elemento significa sempre la stessa cosa.
- **Contrasto del testo** che funzioni da solo, verificato con un [controllo del contrasto](https://gradiently.design/it/guide/color-contrast-accessibility).

Le grafiche per i social richiedono la stessa cura. Un post che dice «il verde significa disponibile» su un calendario rosso e verde perderà qualche lettore. Le parole trasmettono meglio il messaggio, e le parole stesse devono leggersi sullo sfondo, soprattutto sulle sfumature, dove il contrasto cambia lungo il quadro. [Testo su sfumature](https://gradiently.design/it/guide/text-on-gradient) ne parla nel dettaglio.

Un annuncio di workshop in cui il titolo poggia su una parte movimentata della sfumatura con poco contrasto di luminosità

Quando testo e sfondo hanno luminosità vicina, tutto il lavoro lo fa la tonalità, ed è proprio ciò che alcuni lettori perdono.

Lo stesso annuncio di workshop con un'area più calma e scura dietro il titolo, che si legge chiaramente

Con una zona calma e più scura dietro le parole, il contrasto sta nella luminosità, che ogni lettore riesce a vedere.

La versione di destra è ciò che un Mark di Gradiently fa da solo: sposta la sua zona più calma e a miglior contrasto dietro il testo e l'inchiostro automatico sceglie caratteri chiari o scuri per ogni riga, così la separazione nasce dalla luminosità e non dalla tonalità.

## Come testare un design per il daltonismo

1. **Fai il controllo in scala di grigi** Esporta o fai uno screenshot del design e convertilo in scala di grigi. Se due colori che significano cose diverse diventano lo stesso grigio, cambia la luminosità di uno dei due.
2. **Simula nel browser** In Chrome o Edge apri gli strumenti per sviluppatori, richiama il menu dei comandi, scrivi Rendering e usa **Emulate vision deficiencies** per vedere la pagina in tempo reale come protanopia, deuteranopia, tritanopia o acromatopsia.
3. **Controlla l'intero schermo in grigio** Sia Mac sia Windows includono un filtro colore in scala di grigi nelle impostazioni di accessibilità. Attivalo per rivedere app, file di design ed esportazioni, non solo pagine web.
4. **Togli il colore e rileggi** Chiediti se ogni grafico, etichetta e stato ha ancora senso con le sole etichette e icone. Se sì, il colore è decorazione, che è il posto giusto per lui.

Le simulazioni sono approssimazioni, e la visione dei colori varia da persona a persona. Se l'accessibilità conta per il tuo prodotto, chiedi a persone daltoniche che conosci di guardare il risultato reale. Per i grafici in particolare, [infographic design](https://gradiently.design/it/guide/infographic-design) approfondisce etichette e impaginazione, mentre [armonia dei colori](https://gradiently.design/it/guide/color-harmony) aiuta quando ti serve una palette sicura che sembri comunque curata.

## FAQ

### Quali sono i colori migliori per i daltonici?

Blu e arancione sono la coppia più sicura, seguita da blu e giallo. Soprattutto, scegli colori che differiscano chiaramente per luminosità, così restano distinti anche quando le tonalità si assomigliano.

### Che cos'è la palette Okabe Ito?

Un insieme di otto colori (nero, arancione, azzurro, verde bluastro, giallo, blu, vermiglio e viola rossastro) pensato per restare distinguibile nei tipi più comuni di daltonismo.

### Quali colori è meglio non accostare?

Rosso con verde, verde con marrone, blu con viola e verde chiaro con giallo, soprattutto quando hanno luminosità simile.

### Come vedo il mio design come lo vedrebbe un daltonico?

Negli strumenti per sviluppatori di Chrome o Edge apri il pannello Rendering e scegli un'opzione sotto Emulate vision deficiencies. Anche un rapido screenshot in scala di grigi rivela i colori che dipendono solo dalla tonalità.

### Devo cambiare i colori rosso e verde del brand?

No. Rendi uno nettamente più scuro dell'altro e aggiungi etichette o icone ovunque i colori portino un significato.