Simulatore di visione
Inserisci l’indirizzo di una pagina e guardala attraverso otto tipi di vista, con la pagina senza filtri accanto. Link, avvisi e grafici che si affidano solo al colore saltano subito all’occhio.
Tre sensori, e cosa succede quando ne manca uno
La retina misura il colore con tre tipi di coni, ognuno più sensibile a una diversa banda di luce: lunghezze d’onda lunghe (rosso), medie (verde) e corte (blu). Il cervello ricava un colore confrontando i tre segnali. Se un tipo manca o è spostato, alcuni di questi confronti non si possono più fare, e i colori che differiscono solo lungo quell’asse finiscono per sembrare uguali.
I geni dei coni rossi e verdi si trovano sul cromosoma X, ed è per questo che circa 1 uomo su 12 ha una qualche forma di deficit rosso-verde, contro circa 1 donna su 200. La maggior parte ha un cono indebolito, non assente. Quello che vede sta da qualche parte tra la visione normale e la simulazione completa mostrata qui.
Le otto viste
| Vista | Cosa rappresenta | Cosa tende a non funzionare |
|---|---|---|
| Visione normale | Il riferimento, mostrato senza filtri | |
| Deuteranopia | Coni verdi non funzionanti; con le forme più lievi, circa il 6% degli uomini | Colori di stato rossi e verdi, arancione accanto al verde |
| Protanopia | Coni rossi non funzionanti; circa il 2% degli uomini con le forme più lievi | Testo rosso su sfondo scuro, che diventa quasi nero |
| Tritanopia | Coni blu non funzionanti; meno di 1 persona su 10.000 | Blu contro verde, giallo contro rosa |
| Acromatopsia | Solo luminosità. Anche una pagina su un e-reader monocromatico o una stampa in bianco e nero | Qualsiasi significato affidato alla tinta |
| Ipovisione | Nitidezza ridotta, come leggere senza occhiali | Testo piccolo, font sottili, icone senza etichetta |
| Cataratta | Un cristallino opaco e ingiallito, comune dopo i 60 anni | Testo grigio chiaro, link azzurri |
| Schermo al sole | Un telefono all’aperto a mezzogiorno | Tutto ciò che ha un contrasto modesto |
Le tre viste di daltonismo usano le matrici di trasformazione pubblicate da Machado, Oliveira e Fernandes nel 2009, alla massima gravità, applicate in RGB lineare perché la luminosità resti fedele. Le altre viste sono costruite con filtri CSS: scala di grigi per l’acromatopsia, una sfocatura di 2,5 pixel per l’ipovisione, sfocatura con tinta seppia e contrasto ridotto per la cataratta, e contrasto molto ridotto con luminosità aumentata per la luce del sole.
Una revisione in cinque minuti
- Deuteranopia, poi i link. Trova i link dentro un paragrafo. Se non riesci più a distinguerli dal testo intorno, aggiungi una sottolineatura.
- Deuteranopia, poi gli stati. Guarda gli errori dei moduli, le etichette di disponibilità, i pallini «online» e le legende dei grafici. Un messaggio rosso e uno verde dovrebbero differire anche per un’icona o una parola.
- Acromatopsia. Controlla che il pulsante principale si distingua ancora da quello secondario. Se diventano entrambi dello stesso grigio, la tinta era l’unica differenza tra i due.
- Ipovisione. Dovresti riuscire ancora a trovare il titolo, la navigazione e l’azione principale dalla loro forma e posizione.
- Sole, in larghezza telefono. Il testo che sparisce qui è il primo da scurire. Misuralo con il calcolatore di rapporto di contrasto.
Le WCAG fissano la regola alla base di tutto questo nel criterio di successo 1.4.1: il colore non deve essere l’unico mezzo visivo per trasmettere un’informazione.
Come viene creata l’anteprima, e i suoi limiti
Il nostro server scarica l’HTML (fino a 2,5 MB), toglie ogni script, frame e gestore di eventi, e invia il risultato al tuo browser, che lo mostra in un frame isolato (sandbox). Il frame non può eseguire codice né inviare moduli. Le sue immagini, i font e i fogli di stile vengono richiesti dal tuo browser direttamente al sito originale.
Questo ha due effetti collaterali. I contenuti che un sito costruisce con JavaScript, come caroselli, sezioni a caricamento differito o intere single-page application, possono mancare o sembrare incompleti. E alcuni web font rifiutano di caricarsi fuori dal proprio dominio, quindi il carattere può differire da quello della pagina reale.
Una simulazione è un’approssimazione, mostrata sul tuo schermo ai tuoi occhi. È utile per rivelare dove un design dipende dal colore. Non può dirti cosa percepisce una determinata persona. Il parere di chi ha un deficit della visione dei colori o un’ipovisione vale più di qualsiasi filtro.
Domande frequenti
Qual è il tipo di daltonismo più comune?
La deuteranomalia, una risposta indebolita dei coni verdi. Insieme alla deuteranopia, la sua forma completa, riguarda circa il 6% degli uomini. Per questo lo strumento si apre sulla vista deuteranopia.
I daltonici vedono in bianco e nero?
Quasi mai. L’assenza completa della visione dei colori (acromatopsia) riguarda circa 1 persona su 30.000. La maggior parte delle persone con un deficit vede moltissimi colori e confonde coppie specifiche, di solito lungo l’asse rosso-verde.
Quali colori si possono usare insieme senza rischi?
Le coppie che differiscono chiaramente per luminosità restano distinte con ogni filtro, per esempio blu scuro con giallo o arancione. Rosso con verde, verde con marrone e blu con viola sono le combinazioni da evitare quando i due colori significano cose diverse.
Perché la mia pagina sembra rotta nell’anteprima?
L’anteprima funziona senza JavaScript. Se il layout, il menu o il contenuto dipendono dagli script, quelle parti mancheranno. I filtri si applicano comunque correttamente a tutto ciò che viene mostrato.
Posso testare una pagina che richiede un login?
No. Il nostro server richiede la pagina come visitatore anonimo e non ha accesso alla tua sessione, quindi ottiene solo la schermata di login. Per le pagine dietro un login, usa l’emulazione dei deficit visivi integrata negli strumenti per sviluppatori di Chrome o Firefox.