
Progettazione grafica accessibile
Sara Rossi
Sara Rossi
Graphic designer
Progettare in modo accessibile è possibile
L’importanza della progettazione grafica accessibile
Leggibilità
Il testo per essere leggibile deve avere forme definite e una buona spaziatura.
Non utilizzare font graziati come questi
Time New Roman
A Day Without Sun
Bradley Hand Calisto MT Cookie-Regular
Playfair Display
Ma puoi provare ad utilizzare questi
Arial
Titillium Web
Atkinson Hyperlegible
Thaoma Aktiv Grotesk Open Sans
Open Dyslexic Easy Reading Lexie Readable
Biancoenero
Atkinson Hyperlegible
*studiati per dislessia e ipovedenti
Utilizza il MAIUSCOLO solo per evidenziare brevi periodo o mettere in risalto una parola. Immagina che leggendo ad alta voce equivale ad alzare il tono di voce.
Utilizza il grassetto per titoli o evidenziare parole o concetti interessanti. Non abusarne perché perde di significato.
Utilizza sottolieare parole solo per collegamenti ipertestuali (es: link)
Inserisci il punto alla fine di ogni frase o titolo, per consentire ai software di lettura di fare una pausa. Limita segni e simboli.
Spezza i tuoi testi con dei titoli e sottotitoli per alleggerire la lettura. Utilizza l’allineamento a sinistra (a bandiera) del testo ed evita giustificazioni e sillabazione.
Spezza i tuoi testi con dei titoli e sottotitoli per alleggerire la lettura. Utilizza l’allineamento a sinistra del testo ed evita giustificazioni e sillabazione.
Verifica la dimensione del testo a seconda del supporto e della distanza con cui le persone vedranno il design.
Qui sotto trovi una base di partenza, che però dipende dal carattere tipografico, stampa e fai sempre una verifica.
FOGLIO A4
Testo tra 11/12 pt Titolo tra 26/32 pt
Interlinea 150%
la misura del carattere.
SLIDE
Scritta breve 80/120pt Titolo 40/48pt
Testo tra 24/28pt
Slide frase + testo 56pt + 28/32pt
MOBILE
Testo tra 16/20px
Mai sotto i 14px
Titolo tra 36/48px
Interlinea 150%
la misura del carattere.
DIDASCALIA
(4 metri)
Testo
1 cm, 28,77 pt
Contrasto
Verifica sempre che ci sia contrasto tra sfondo (colore o immagine) e testo.
4.5:1
Rapporto di contrasto ottimale
Per verificare il contrasto puoi utilizzare online:
Accessible Colors > https://accessible-colors.com/
Adobe Color > https://color.adobe.com/it/create/color-contrast-analyzer
Non dimenticare lo spazio bianco è essenziale.
Usa margini ampi
+20 mm
Colore
Privilegia un testo in colore scuro su sfondo chiaro
Simulatore daltonismo color-blindness.com
PROVIAMO A FARCI QUALCHE DOMANDA:
• Ho utilizzato un carattere leggibile e distanziato le righe in modo che le lettere non si tocchino?
• C’è una chiara gerarchia dei testi: titolo, sottotitolo, testo di paragrafo e testo delle note?
• Questo testo/immagine è comprensibile?
• Ho utilizzato più di 3 colori? Posso usarne meno ottenendo un buon risultato?
• Ho dato dei significati ai colori utilizzati per etichette o legenda? Li ho espressi in modo che chi non li distingue correttamente sappia interpretarli?
• Le immagini fanno da sfondo a un testo? questo testo è leggibile o si fa fatica? Posso evitarlo?
• Ho pensato di rendere percepibile il contenuto attraverso più di un canale sensoriale? QRcode, audio…
• Se si sfoglia o è un pieghevole, è di facile comprensione la dinamica apri/chiudi?
• La dimensione è trasportabile facilmente?
• La carta è troppo lucida e fa riflessi che possono infastidire/affaticare la lettura?
• C’è sovraccarico cognitivo?
PER APPROFONDIRE
SCHWA E ACCESSIBILITÀ https://www.aliceorru.me/come-usare-lo-schwa/
MOSTRA ACCESSIBILE https://pepitosaincarrozza.it/la-mostra-di-rubens-e-laccessibilita-museale/