Design accessibile anche ai daltonici: come si realizza?

Il daltonismo (o color blindness) colpisce circa l’8% della popolazione, ed è una condizione che consiste nella alterata percezione dei colori, totale o parziale.

Ci sono vari tipi di daltonismo:
si va dalla difficoltà a riconoscere alcuni colori (rosso o verde principalmente, ma anche blu e giallo) alla totale cecità ai colori con visione in bianco e nero.

scala dei colori daltonismo

Distinguiamo:

protanopia, cecità per il rosso e di protanomalia in caso di scarsa sensibilità al rosso;
deuteranopia, cecità per il verde e deuteranomalia in caso di scarsa sensibilità al verde;
tritanopia, cecità per il blu e tritanomalia in caso di scarsa sensibilità al blu.
acromatopsia, la cecità al colore è totale

COLOR BLIND-FRIENDLY DESIGN

Avendo un fidanzato daltonico, capisco bene la fatica e la frustrazione nel non riuscire a distinguere determinati colori, e vorrei si potesse diffondere il più possibile l'idea del design inclusivo e accessibile anche per questa minuscola fetta della popolazione.

visione diversi tipi daltonismo

Partiamo dal fatto che è impossibile trovare dei colori che il 100% della popolazione vedrà allo stesso modo, il nostro obiettivo non è questo.

Un design inclusivo infatti mira ad utilizzare dei colori che risultino distinguibili, gli uni dagli altri, a chiunque.

Questo diventa essenziale soprattutto se se entrano in gioco infografiche, o tabelle o grafici colorati, che si basano proprio sulle variazioni di colore per rappresentare dati e informazioni differenti.

Senza dimenticare applicazioni di giochi in cui è necessario riuscire a distinguere i colori, per poter completare determinate azioni che consentono di proseguire ai successivi livelli.

Per rimanere in tema di web design, mi vengono in mente i pulsanti “Call to action” che troviamo in molte landing pages, solitamente di un colore che ben risalti rispetto al background.

Ne vedo molto spesso verdi su uno sfondo aranciato.

esempio visione deuteranopia protanopia

Ma un soggetto x daltonico e che più precisamente soffre di deuteranopia o protanopia, potrebbe avere difficoltà nel notare questo pulsante, come si può ben vedere nell'esempio.

Cosa può comportare questo?

L'usabilità della pagina viene meno, e non scarterei neanche la possibilità di perdere qualche conversione per aver tralasciato un simile dettaglio.

COME REALIZZARE UN DESIGN INCLUSIVE PER DALTONICI?

Alcuni piccoli accorgimenti, permettono di fare davvero un salto di qualità nel realizzare un design inclusivo, ad esempio:

•evitare combinazioni di colori come verde/rosso, blu/viola, verde/giallo

•evitare di accostare sfumature simili, che agli occhi di un daltonico apparirebbero come una sorta di tinta unita

•scegliere colori per i contenuti di testo che abbiano un buon contrasto con lo sfondo, cosicchè risultino leggibili

•nei grafici, alla distinzione dei dati con colori diversi, si potrebbe associare anche l’uso di pattern e texture differenti per facilitare distinzione e comprensione

•utilizzare gli strumenti del web, come COOLORS:
Questo sito permette di creare palette di colori e capire come verrebbero viste a seconda del tipo di daltonismo di cui si è affetti.

Questa è una color blind friendly palette che ho realizzato con l’ausilio di Coolors

palette di colori per daltonici

Ecco come viene vista a seconda dei diversi tipi di daltonismo, ogni colore è perfettamente distinguibile dall'altro, anche nella visione in bianco e nero.

come vedono i colori i daltonici

Alla luce di tutto ciò, secondo me vale decisamente la pena fare qualche piccolo sforzo in più per ottenere un design ottimizzato e accessibile a tutti.

Voi che ne pensate? Avete altri consigli a riguardo?

Come trovare il font utilizzato in un’immagine, un documento o un sito web

Siete capitati su un sito web con un font accattivante e vorreste utilizzarlo per un vostro lavoro?

In questo articolo parleremo dei metodi che ci consentono di identificare il font utilizzato in un’immagine, un documento o un sito web

 

Ci sono diversi tecniche e servizi che ci permettono di scoprire il carattere tipografico utilizzato:

 

SITI WEB UTILI

Una semplice ricerca su Google ci permette di trovare siti che ci offrono questo servizio.

Tra i siti migliori per rintracciare un font troviamo:

 

MY FONTS

sito per trovare font

 

My Fonts permette di caricare solo immagini (.png o .jpg), selezionare la parola/testo desiderata e mostra subito la lista dei risultati ottenuti, la quale riporta il nome e altri font molto simili a quello di tuo interesse.

Nota bene che questi servizi sono spesso affiliati a siti che si occupano della vendita dei font, infatti dalla stessa pagina dei risultati ti danno anche la possibilità di acquistarli direttamente.

Tranquillo, non tutti sono a pagamento! Tra i font simili a quello da te ricercato se ne trovano alcuni gratis.

La cosa più comoda da fare è secondo me copiare il nome dalla lista dei risultati e cercarlo su google, dato che spesso i siti che offrono questo servizio richiedono la registrazione anche per scaricare un font gratuito.

 

 WHAT FONT IS

sito per trovare fontWhat font is permette non solo di caricare un foto per il riconoscimento, ma anche di inserire l’url dell’immagine in questione.

Personalmente lo preferisco, è un po' più laborioso (chiede di dividere o di digitare le lettere del testo dell’immagine) però permette di filtrare la lista dei risultati tra quelli a pagamento e quelli gratuiti e non richiede la registrazione per poter scaricare un font (uno gratis perlomeno).

APP PER IL CELLULARE

WhatTheFont

app whatthefont

 

WhatTheFont è un’app per cellulare e rappresenta la versione mobile del sito web che ho precedentemente citato: My Fonts.

 E’una sorta di Shazam per i font.

L’app permette di fotografare un testo e ne elenca i risultati corrispondenti.

Dall’app non è possibile acquistare direttamente i font trovati.

 

 

ISPEZIONARE IL CODICE DI UN SITO WEB

 

Questa tecnica è utile per identificare il font usato in un sito web su Google Chrome.

  1. Visitare il sito web che vi interessa (Io prenderò il sito Giallo Zafferano come esempio).
  2. Fare click in un punto a caso della pagina con il tasto destro del mouse, e clicca su “Ispeziona”.

come identificare font dal codice

N.B: se il sito web ha disabilitato il click col tasto destro del mouse dovrete procedere in un altro modo:

 

  1. Vi comparirà una schermata del genere:

Cliccate sul puntatore in alto a sinistra (cerchiato in foto) e si evidenzierà di blu.

 

  1. Posizionatevi sul testo di cui vi interessa conoscere il font. Non cliccateci su, posizionatevi sopra la scritta soltanto e apparirà una finestra contente l’informazione che state cercando

 

Io ad esempio stavo cercando il font utilizzato nel titolo.

Nella finestra apparsa, alla riga “Font” apprendo che è stato utilizzato “Montserrat

Nella suddetta finestra sono presenti altre informazioni, come la dimensione del carattere e il colore utilizzato (espresso in codice esadecimale).

 

 

ADOBE READER

Il magico Adobe Reader torna utile qualora voleste cercare il font utilizzato in un documento pdf.

  1. Aprire il file interessato con adobe;
  2. Fare clic col tasto destro del mouse in un punto a caso del documento, e cliccare su “Proprietà documento

trovare font documento pdf adobe reader

  1. Selezionare l’etichetta “Font” nella finestra che vi apparirà e troverete l’informazione che state cercando.

 

scoprire font di un documento pdf con adobe reader

 

Siamo riusciti ad aiutarvi nel trovare il font che stavate cercando?