Linee GuidaUn buon contrasto consente di percepire chiaramente i contenuti in diverse condizioni: in caso di vista ridotta, occhi affaticati, forte luce solare o su schermi di dimensioni ridotte. Pertanto, il contrasto non è solo una scelta estetica, ma un requisito fondamentale del design accessibile.
Per quali utenti il contrasto è particolarmente importante?
Un uso corretto dei colori e del contrasto è fondamentale per:
- persone ipovedenti,
- persone affette da daltonismo,
- utenti anziani.
Allo stesso tempo, il contrasto è utile anche a molti altri utenti nelle situazioni quotidiane, ad esempio quando si utilizza il cellulare all’aperto o durante un lavoro prolungato davanti allo schermo.
Contrasto del testo
Per quanto riguarda il testo, è fondamentale che la differenza tra il colore del testo e quello dello sfondo sia sufficientemente ampia da garantire una leggibilità senza sforzo.
Secondo le linee guida sull’accessibilità, è necessario che:
- un rapporto di contrasto di almeno 4,5 : 1 per il testo normale,
- un rapporto di almeno 3 : 1 per il testo di grandi dimensioni (18 px e oltre o 14 px in grassetto).
Ciò vale per tutte le forme di testo: paragrafi, titoli, link, etichette nei moduli e anche il testo nei pulsanti.
Importante nella pratica
Il testo può essere formalmente corretto, ma comunque illeggibile se il contrasto è troppo basso. Il testo grigio chiaro su sfondo bianco o le combinazioni di colori con una differenza minima di luminosità rappresentano un problema comune.
Esempio di contrasto insufficiente su una pagina web:
Testo nei pulsanti e negli elementi interattivi
Anche il testo nei pulsanti, nelle schede e in altri elementi interattivi deve soddisfare i requisiti di contrasto. Un errore comune è che il pulsante abbia un colore di sfondo adeguato, ma il testo al suo interno sia troppo chiaro o troppo scuro.
Esempio di contrasto inadeguato e adeguato del testo nei pulsanti:
Contrasto non testuale
Il contrasto non è importante solo per il testo, ma anche per gli elementi non testuali, quali:
- icone,
- pulsanti senza testo,
- campi di immissione,
- caselle di conferma,
- rappresentazioni grafiche e parti di immagini che veicolano significato.
Per questi elementi, il contrasto tra l’elemento e lo sfondo deve essere di almeno 3 : 1.
Tutti gli stati degli elementi (normale, focus, hover, selezionato)
Gli elementi interattivi (pulsanti, link, schede, campi dei moduli) non hanno un unico aspetto. Cambiano a seconda di come vengono utilizzati dall’utente:
- stato normale – quando l’elemento è semplicemente visibile,
- hover – quando il mouse si trova sopra di esso,
- focus – quando è selezionato tramite la tastiera (ad es. con il tasto Tab),
- selezionato/attivo – quando viene cliccato o è attualmente in uso.
È importante che tutti questi stati siano chiaramente visibili anche senza fare affidamento sul colore, poiché gli utenti che non utilizzano il mouse (ad es. persone con disabilità motorie), che soffrono di daltonismo o che utilizzano lettori di schermo o strumenti di ingrandimento, devono capire immediatamente dove si trovano nella pagina e quale elemento è attualmente attivo.
Esempio pratico
Nel modulo è presente il pulsante «Invia»:
- in stato normale presenta un bordo,
- quando è selezionato appare una cornice chiara (non solo un cambio di colore),
- una volta selezionato, viene visualizzata l’icona di un segno di spunta.
Immagini funzionali che fungono da pulsanti
A volte un’immagine o un’icona non è solo decorativa, ma ha una funzione, ad esempio:
- icona del cestino per l’eliminazione,
- freccia avanti/indietro,
- icona della stampante per la stampa.
Pertanto, tali elementi devono essere chiaramente riconoscibili come interattivi, presentare un contrasto adeguato per un riconoscimento affidabile e rimanere comprensibili anche senza l’uso dei colori.
Esempio di contrasto insufficiente nelle immagini funzionali:
Un esempio di contrasto adeguato nelle immagini funzionali che svolgono un ruolo interattivo:
Grafici e diagrammi che trasmettono informazioni chiave tramite il colore
Nei grafici si usa spesso il colore per distinguere i dati (ad es. rosso, verde, blu). Questo non è sufficiente, poiché non tutti percepiscono i colori allo stesso modo.
Questo è importante perché le persone affette da daltonismo o gli utenti ipovedenti spesso non distinguono il rosso dal verde, non riconoscono le tonalità chiare o utilizzano una visualizzazione in scala di grigi; pertanto, le informazioni fornite esclusivamente tramite il colore vanno perse per loro.
Una buona pratica per i grafici è quella di integrarli con una tabella adeguatamente accessibile, poiché in questo modo i dati risultano ancora più accessibili e più facilmente comprensibili per gli utenti.
Esempio di utilizzo di motivi in un grafico:
Strumento per la verifica dei contrasti adeguati
Per verificare l’adeguatezza dei contrasti cromatici è possibile utilizzare WebAIM Contrast Checker, uno strumento dell’organizzazione WebAIM semplice e pratico da usare. Basta inserire nel tool il colore del testo (in primo piano) e quello dello sfondo; lo strumento calcolerà automaticamente il contrasto e mostrerà la conformità alle linee guida WCAG. Invece di inserirle manualmente, possiamo selezionare i colori anche utilizzando il contagocce.
Lo strumento viene utilizzato per verificare il contrasto sia negli elementi testuali che in quelli non testuali ed è utile anche già nella fase di progettazione delle combinazioni di colori per siti web o documenti.
Link alle linee guida sull’accessibilità (WCAG)
L’ambito dei contrasti adeguati e dell’uso dei colori è trattato dai seguenti criteri di successo delle WCAG:
- 1.4.3 Contrasto (minimo)
- 1.4.6 Contrasto (migliorato – AAA)
- 1.4.11 Contrasto degli elementi non testuali
- 1.4.1 Uso del colore
Questi criteri garantiscono che il testo, le icone, i pulsanti e altri elementi importanti siano chiaramente distinguibili dallo sfondo e che il significato delle informazioni non sia trasmesso esclusivamente tramite il colore. In questo modo consentono la percezione dei contenuti anche agli utenti con ipovisione, daltonismo o altre limitazioni percettive, nonché in condizioni meno favorevoli, quali luce intensa, schermi di piccole dimensioni o affaticamento degli occhi. Un contrasto adeguato non è quindi solo una questione di accessibilità, ma contribuisce in modo significativo a una migliore leggibilità, chiarezza e esperienza utente complessiva per tutti.