Cos’è il contrasto colore?
Le linee guida per l’accessibilità WCAG 2.1 AA consigliano 2 livelli minimi di contrasto colore per i testi:
- 1:3 per i testi più grandi (24px) o bold (da 18px)
- 1:4.5 per i testi più piccoli
Per calcolarlo esistono vari strumenti come il Contrast Checker di WebAIM. Niente di complicato: basta selezionare 2 colori e il gioco è fatto.
Il contrasto migliora la leggibilità
Ci aiuta se facciamo fatica a leggere e in generale ci aiuta a vedere meglio in situazioni comuni come: alla luce del sole e al telefono.
Lettura VS Scansione
Ricordiamoci anche che sui siti non si legge tutto. Le persone scansionano le pagine per trovare quello che serve. Quindi è meglio favorire questa azione con una buona leggibilità.
Testi sopra immagini
I testi sopra le immagini possono essere critici dal punto di vista dell’accessibilità. I problemi cominciano soprattutto quando consegni un progetto web e il cliente inizia a cambiare le immagini in autonomia. Poi cerchi di spiegarlo e dall’altra parte ci sono solo tanti dubbi: “Photoshop? Tool online? Contrast checker? Non capiso mia seto”
Di chi è la colpa?
Nel lavoro di squadra non ci sono colpe da dare. In ogni caso l’errore non è sicuramente del cliente. L’errore è di progettazione. Sono dell’idea che anche le persone senza particolari conoscenze tecniche dovrebbero riuscire a gestire un sito in autonomia. L’accessibilità è anche questo.
È un peccato investire molte ore nel design per poi vedere che il risultato non era quello desiderato. Meglio mettere dei limiti ma garantire autonomia.
Allora cosa è meglio fare?
Propongo 2 soluzioni:
1. Con background
La soluzione più facile e SEMPRE valida è di aggiungere un background tra il testo e l’immagine. Così abbiamo più vantaggi:
- aiutiamo il cliente ad avere maggiore autonomia nella gestione del sito;
- manteniamo alta l’accessibilità, senza il rischio di errori;
- e possiamo mettere da parte le linee guida che abbiamo già seguito.
2. Senza background
Il cliente non vuole gestire il sito? Allora andiamo avanti per la nostra strada, senza lo sfondo e con l’accortezza di usare immagini con un buon contrasto.