Puoi supporre che tutti i colori o la leggibilità del testo siano percepiti come te. La nostra percezione del colore può dipendere dall'ambiente circostante (luci basse o intense) e dalle nostre capacità visive. Tu o i tuoi utenti potreste essere tra i milioni di persone daltoniche o ipovedenti.
Per supportare le persone con varie disabilità visive, il gruppo WAI ha creato una formula del contrasto del colore per garantire che il contrasto sia sufficiente tra il testo e lo sfondo. Se questi rapporti di contrasto di colore vengono seguiti, le persone ipovedenti possono leggere il testo in background senza utilizzare tecnologie per la disabilità per il miglioramento del contrasto.
Osserva la differenza nei rapporti di contrasto mostrati nella Figura 1.
Il rapporto di contrasto di 4,5:1 è il minimo obbligatorio stabilito dalle linee guida per l'accessibilità dei contenuti web (WCAG) 2.0. Questa razione è stata scelta perché compensa la perdita di sensibilità al contrasto spesso riscontrata dagli utenti con perdita della vista, equivalente a circa 20/40 della visione.
Anche in questo caso, 4,5:1 è solo il minimo. Per supportare gli utenti ipovedenti o daltoniche, raggiungi il livello AAA e crea contenuti con un contrasto di 7:1.
Puoi controllare il contrasto di colore con un controllo dell'accessibilità di Lighthouse in DevTools.
Algoritmo di contrasto percettivo avanzato
L'algoritmo APT (Advanced Perceptual Contrast Algorithm) è un modo di calcolare il contrasto in base a ricerche moderne sulla percezione del colore.
L'APCA dipende più dal contesto rispetto ai livelli AA e AAA delle WCAG.
In questo modello, il contrasto viene calcolato in base alle seguenti caratteristiche:
- Proprietà spaziali (spessore del carattere e dimensione del testo)
- Colore del testo (differenza di luminosità percepita tra testo e sfondo)
- Contesto (luce ambientale, ambiente e scopo previsto del testo)
Chrome include una funzionalità sperimentale che sostituisce le linee guida sul rapporto di contrasto AA/AAA con l'APCA.
Trasmetti informazioni importanti non solo a colori
Ogni volta che trasmetti informazioni importanti agli utenti, utilizza un testo o un testo alternativo oltre agli indicatori visivi per la condivisione di informazioni importanti. Gli elementi visivi includono colori, motivi, immagini, stili dei caratteri e linguaggio direzionale.
Ad esempio, potresti avere un modulo di contatto che indica input non validi sottolineandoli in rosso. Questa indicazione del colore non comunica allo screen reader o agli utenti con problemi di vista dei colori che qualcosa non funziona. L'utente potrebbe chiedersi perché l'invio del modulo non funziona e poi si arrende.
Assicurati di avvisare l'utente in diversi modi dell'errore specifico. Ad esempio, puoi aggiungere un messaggio di errore per annunciare che l'input specifico non è valido e perché. Puoi anche aggiungere un testo di aiuto per descrivere l'input corretto.
Puoi comunque sottolineare l'input non valido in rosso, a condizione che ci siano altri segnali non visivi.
Se fai molto affidamento sull'uso dei colori nella tua interfaccia, puoi scoprire problemi di contrasto in Chrome DevTools.
Aumenta contrasto e inverti i colori
Per ipovedenti, le modalità ad alto contrasto possono facilitare la navigazione dei contenuti in una pagina. Esistono diversi modi per configurare l'alto contrasto.
Sia macOS che Windows offrono modi per aumentare il livello di contrasto nel sistema operativo.
Gli utenti possono anche scegliere di invertire i colori in primo piano e di sfondo (ad esempio su macOS), una funzionalità particolarmente utile per i siti web e le app che non supportano le modalità Buio.
In qualità di sviluppatori, potete verificare che l'interfaccia sia ancora visibile e utilizzabile attivando queste impostazioni e verificando manualmente l'usabilità.
Ad esempio, una barra di navigazione potrebbe utilizzare un leggero colore di sfondo per indicare la pagina selezionata. Se la visualizzi in modalità ad alto contrasto, la delicatezza scompare completamente e il lettore potrà capire quale pagina è attiva.
Se soddisfi il livello AA o il contrasto superiore, i contenuti dovrebbero continuare a funzionare come previsto anche quando i colori sono invertiti o con un contrasto elevato. Tuttavia, vale comunque la pena effettuare test per assicurarsi che l'esperienza sia quella prevista.