O Material Design para Wear OS usa uma paleta de cores mais escura. É necessário usar um segundo plano preto no app e no bloco.
Esquema de cores
O esquema de cores do Wear OS foi criado com base no tema de cores do Material Design (link em inglês) de referência. Você pode usar esse tema no estado em que se encontra ou personalizá-lo para o app.
Este tema inclui cores padrão para:
- Cores primárias e secundárias
- Variantes de cores primárias e secundárias
- Outras cores de IU, como cores de segundo plano, superfícies, erros, tipografia e iconografia
Tema escuro
Todas as cores do tema escuro precisam exibir elementos com contraste suficiente, atendendo ao padrão AA das WCAG de pelo menos 4.5:1 para o corpo do texto quando aplicado a todas as superfícies de elevação.
Usar cores dessaturadas para acessibilidade
Um tema escuro precisa evitar o uso de cores saturadas, já que não atendem ao padrão de acessibilidade das WCAG de pelo menos 4.5:1 para o corpo do texto em superfícies escuras. As cores saturadas também produzem vibrações ópticas em um fundo escuro, o que pode causar cansaço visual. Em vez disso, use cores dessaturadas como uma alternativa mais legível.
Figura 1. As cores menos saturadas da sua paleta de cores melhoram a legibilidade.
Figura 2. Evite usar cores saturadas em um fundo escuro.
Cor principal
A cor principal é a cor mostrada com mais frequência nas telas e componentes do app. O tema escuro do Material Design usa o tom 200 como cor principal. Isso atende ao padrão AA das WCAG de pelo menos 4.5:1 para texto normal em todas as superfícies de elevação.
Figura 3. Exemplo de paleta principal em um tema escuro. 1. Indicador de cor principal 2. Variantes tonais
Cor secundária
Uma cor secundária pode ser usada para destacar partes específicas da interface. Em um tema escuro, uma cor secundária pode ser dessaturada para atingir o nível de contraste de 4.5:1.
Na figura 4, 1) aponta um indicador de cor secundário e 2) aponta variantes tonais.
Figura 4. Paleta secundária de exemplo em um tema escuro.
Cor de destaque
Em um tema escuro, as superfícies escuras ocupam a maior parte da interface. Em geral, as cores de destaque são tons claros (tons pastel dessaturados) ou brilhante (cores saturadas e vívidas). Isso ajuda a destacar os elementos mais importantes. Use cores de destaque com moderação para destacar elementos-chave, como texto ou botões.
Como encontrar cores de destaque Use o gerador de paleta de cores para criar ou conferir um tema de cores. O gerador de paleta de cores também cria paletas tonais, que são variações de cores claras a escuras, criadas com base nas cores principais e secundárias. Use as variações no tema escuro.
Na figura 5, 1) aponta um indicador de cor principal padrão do tema e 2) aponta um indicador de cor principal do tema escuro.
Figura 5. Para oferecer mais flexibilidade e usabilidade em um tema escuro, é recomendável usar tons mais claros (200 a 50) em vez de tons saturados (900 a 500).
Use o espectro de cores mais escuro para grandes partes da interface, como a cor de fundo. Reserve cores mais claras para destaques e elementos da interface.