Color Blindness Simulator
Visualizza qualsiasi colore come appare a chi ha un deficit visivo cromatico — 6 tipi simulati.
① Inserisci un codice HEX o scegli un colore ② Simula 6 tipi di daltonismo ③ Copia qualsiasi HEX simulato
Prova un preset:
Cos'è il Daltonismo e perché è importante per il Design?
Il daltonismo (deficit visivo cromatico) colpisce circa l'8% degli uomini e lo 0,5% delle donne nel mondo. I tipi più comuni — deuteranopia e deuteranomalia — comportano confusione tra tonalità rosse e verdi. Designer e sviluppatori devono verificare che l'informazione non sia trasmessa solo tramite colore. Il criterio WCAG 2.1 SC 1.4.1 richiede che il colore non sia l'unico mezzo visivo per comunicare informazioni. Questo simulatore usa il modello colore LMS scientificamente validato (Viénot 1999)
Domande frequenti
Il daltonismo (deficit visivo cromatico) è l'incapacità di distinguere certi colori per assenza o malfunzionamento dei coni retinici. Colpisce circa l'8% degli uomini e lo 0,5% delle donne di discendenza nordeuropea. La forma più comune è la deuteranomalia (ridotta sensibilità al verde), seguita da protanomalia. La tritanopia (blu-giallo) è molto più rara, circa 0,01% della popolazione.
Il tool usa il modello colore LMS (metodo Viénot 1999). La pipeline è: HEX → sRGB [0,1] → RGB lineare (rimozione gamma) → risposte dei coni LMS via matrice Hunt-Pointer-Estevez → matrice di simulazione del deficit → LMS → RGB lineare → sRGB (gamma) → HEX. Produce risultati percettivamente accurati coerenti con studi clinici.
Deuteranopia: coni M (sensibili al verde) assenti — verdi, rossi e arancioni appaiono simili. Protanopia: coni L (rosso) assenti — i rossi appaiono molto scuri e vengono confusi con verde/marrone. Tritanopia: coni S (blu) assenti — blu e verde vengono confusi con rosso e rosa. Le forme anomale (deuteranomalia, protanomalia) implicano sensibilità ridotta anziché assente, causando confusione più lieve.
Inserisci ogni colore chiave della tua UI — bottoni primari, indicatori di stato, grafici, badge. Per ogni simulazione verifica se il colore trasmette ancora il significato inteso. Se il colore simulato diventa indistinguibile da un altro elemento (es. rosso errore = verde successo), aggiungi un secondo segnale: icona, pattern, etichetta o bordo. Testa sistematicamente l'intera palette.
WCAG 2.1 SC 1.4.1 (Livello A): il colore non deve essere l'unico mezzo visivo per trasmettere informazioni, indicare un'azione, sollecitare una risposta o distinguere un elemento visivo. SC 1.4.3 (Livello AA): il contrasto del testo deve essere almeno 4,5:1 (3:1 per testo grande). Questi requisiti si applicano indipendentemente dal tipo di visione cromatica.
Le combinazioni più sicure mantengono alto contrasto di luminanza indipendentemente dalla tonalità. Blu-arancio e blu-giallo funzionano per la maggior parte dei deficit. Le combinazioni rosso-verde (il pattern UI più comune) sono le più problematiche per deuteranopia e protanopia. Aggiungi icone o pattern accanto alla codifica cromatica e verifica sempre i rapporti di contrasto.
Questo tool simula un colore alla volta — ideale per verificare colori brand, voci di palette ed elementi chiave dell'UI. Per testare un'intera pagina o screenshot, usa estensioni browser come NoCoffee (Chrome/Firefox) o Colorblinding, oppure il filtro colori del sistema operativo (macOS: Impostazioni → Accessibilità → Display → Filtri colore; Windows 11: Impostazioni → Accessibilità → Filtri colore).