Il material design per Wear OS utilizza una tavolozza dei colori più scuri. In particolare, devi utilizzare uno sfondo nero per l'app e il riquadro.
Combinazione di colori
La combinazione di colori di Wear OS viene creata in base al tema di colori Material Design di riferimento. Puoi utilizzare il tema così com'è o personalizzarlo per la tua app.
Questo tema include colori predefiniti per:
- Colori primari e secondari
- Varianti di colori primari e secondari
- Altri colori dell'interfaccia utente, ad esempio quelli per sfondi, superfici, errori, tipi e icone
Tema scuro
Tutti i colori del tema scuro devono mostrare elementi con un contrasto sufficiente, in conformità allo standard AA WCAG di almeno 4,5:1 per il corpo del testo quando applicato a tutte le superfici in elevazione.
Utilizzare colori desaturati per l'accessibilità
Un tema scuro dovrebbe evitare di utilizzare colori saturi, in quanto non soddisfano lo standard di accessibilità delle WCAG di almeno 4,5:1 per il corpo del testo su superfici scure. I colori saturi producono anche vibrazioni ottiche su uno sfondo scuro, che possono affaticare gli occhi. Utilizza invece colori desaturati come alternativa più leggibile.
Figura 1. I colori meno saturi della tavolozza dei colori migliorano la leggibilità.
Figura 2. Evita di utilizzare colori saturi su sfondo scuro.
Colore principale
Il colore principale è il colore visualizzato più di frequente sulle schermate e sui componenti dell'app. Il tema scuro Material Design di base utilizza il tono 200 come colore principale. Questo soddisfa lo standard AA delle WCAG di almeno 4,5:1 per il testo normale, in tutte le superfici in altitudine.
Figura 3. Una tavolozza principale di esempio con un tema scuro. 1. Indicatore del colore principale 2. Varianti tonali
Colore secondario
È possibile utilizzare un colore secondario per mettere in risalto parti specifiche dell'interfaccia utente. In un tema scuro, un colore secondario può essere desaturato per soddisfare il livello di contrasto di 4,5:1.
Nella figura 4, 1) indica un indicatore di colore secondario e 2) indica le varianti tonali.
Figura 4. Una tavolozza secondaria di esempio in un tema scuro.
Colore di contrasto
Con il tema scuro, le superfici scure occupano la maggior parte dell'interfaccia utente. I colori intensi sono generalmente chiari (colori desaturati) o brillanti (colori saturi e vividi). Questo fa risaltare gli elementi accentati. Usa i colori intensi con parsimonia per accentuare gli elementi chiave, come il testo o i pulsanti.
Trovare colori intensi Utilizza il generatore della tavolozza dei colori per creare o visualizzare un tema a colori. Il generatore della tavolozza dei colori crea anche tavolozze dei colori, ovvero una gamma di variazioni di colore da chiaro a scuro, create a partire dai colori primari e secondari. Selezionane varianti per il tema scuro.
Nella figura 5, 1) indica un indicatore di colore principale del tema predefinito e 2) indica un indicatore di colore principale del tema scuro.
Figura 5. Per offrire maggiore flessibilità e usabilità in un tema scuro, si consiglia di utilizzare toni più chiari (200-50), anziché toni saturi (900-500).
Utilizza lo spettro di colori più scuro per ampie parti dell'interfaccia utente, ad esempio il colore dello sfondo. Riserva colori più chiari per gli accenti e gli elementi dell'interfaccia utente.