I colori che scegli per l'interfaccia dell'app incidono sulla facilità di lettura e comprensione da parte degli utenti. Un contrasto sufficiente semplifica la lettura e la comprensione di testo e immagini.
Oltre ad agevolare gli utenti con disabilità visive di vario genere, un contrasto sufficiente è utile a tutte le persone che visualizzano un'interfaccia su dispositivi in condizioni di luce estreme, ad esempio in caso di esposizione diretta al sole o su display con bassa luminosità.
Implementazione
Quando devi implementare l'interfaccia utente di un'app, specifica colori di sfondo e in primo piano che abbiano sufficiente contrasto.
Il "rapporto di contrasto" è il calcolo della differenza di luminanza (l'intensità della luce emessa) tra due colori vicini quando vengono visualizzati su uno schermo. I valori di questo rapporto sono compresi tra 1 e 21 (spesso scritti come valori da 1:1 a 21:1), in cui i numeri crescenti indicano un contrasto maggiore. Esistono molti strumenti che consentono di calcolare il rapporto di contrasto di due colori vicini, ad esempio questo.
Se utilizzi TextView per visualizzare il testo, usa android:textColor e android:background per definire colori di sfondo e in primo piano con un rapporto di contrasto elevato. Quando utilizzi Text in Compose, utilizza il parametro del colore e Modifier.background per definire colori di primo piano e di sfondo con un rapporto di contrasto elevato.
- Un rapporto minimo di 4,5:1 per testo di piccole dimensioni (normale inferiore a 18 punti o grassetto inferiore a 14 punti)
- Un rapporto minimo di 3,0:1 per testo di grandi dimensioni (normale di almeno 18 punti o grassetto di almeno 14 punti)
Note sul contrasto di colore:
-
Se utilizzi
ImageViewoImageper eseguire il rendering di contenuti grafici o icone, assicurati che il contrasto tra i colori in primo piano e di sfondo corrisponda o superi i valori consigliati. - I rapporti di contrasto vengono misurati in base al colore apparente di sfondo e in primo piano di un elemento quando è sovrapposto ad altri elementi. Se definisci i colori in un formato ARGB (valori esadecimali #AARRGGBB), tieni presente che i colori non opachi (ossia con valore del canale alpha inferiore a 255) potrebbero avere un colore apparente diverso a causa della fusione con i contenuti visualizzati sotto.
- L'anti-aliasing e lo smussamento dei caratteri possono incidere sul colore apparente di alcuni contenuti, in particolare quelli con spessore del tratto ridotto. Per migliorare la leggibilità, scegli una combinazione di colori con un rapporto di contrasto maggiore oppure aumenta lo spessore del tratto dei contenuti.
Design
Durante la progettazione di un'interfaccia utente, prova a scegliere una tavolozza con sufficiente contrasto di colore per i colori adiacenti.
- Per il testo e le icone, segui le linee guida di W3C relative ai rapporti di contrasto minimi.
- Valuta se includere un'opzione relativa a un tema a contrasto elevato oppure consenti all'utente di scegliere i colori dei contenuti principali.
Per ulteriori informazioni, leggi le linee guida relative a colore e contrasto per l'accessibilità di Material Design.
Test
Per controllare manualmente il contrasto di colore in un'app, procedi nel seguente modo:
- Apri l'app.
- Acquisisci uno screenshot.
- Con un software di visualizzazione o modifica delle immagini, utilizza uno "strumento contagocce" per estrarre un campione di colori dallo screenshot.
- Utilizza uno strumento di calcolo del rapporto di contrasto per stabilire il rapporto dei colori adiacenti.
- Se il rapporto di contrasto è inferiore a quello stabilito dalle linee guida di W3C, potrebbe essere opportuno aumentare il contrasto di colore nell'interfaccia.
Gli strumenti per i test automatici di Android sono in grado di rilevare molti problemi relativi al contrasto di colore. Valuta se utilizzare Accessibility Scanner per Android per testare manualmente l'app sul dispositivo. Per eseguire test automatici, attiva il controllo dell'accessibilità in Espresso e Robolectric.