O Material 3 Expressivo para Wear OS estabelece hierarquia visual ao atribuir valores diferentes de matiz, croma e tom às funções de cor, distinguindo eficáciamente cores de destaque em negrito de cores de superfície neutras. A inclusão do sistema de papéis de realce primário, secundário e terciário não apenas aumenta as possibilidades de expressão, mas também oferece um controle mais granular sobre a hierarquia visual com opções de cores distintas. Esse uso intencional de cores garante uma sensação consistente e coesa na interface do relógio, mesmo com temas.
Exemplo de layouts, componentes e interfaces diferentes em vários temas, mas mantendo o contraste de cores adequado.
Combinar e sobrepor cores
Para manter a acessibilidade visual, aplique cores apenas nos pares de tokens de cor pretendidos. Combinar cores de forma incorreta pode quebrar o contraste necessário para a acessibilidade visual, principalmente quando as cores são ajustadas com cores dinâmicas.
Combinar e sobrepor cores corretamente
Para garantir recursos visuais e acessibilidade adequados, mapeie o token correto para a posição correta. Um mapeamento de cores incorreto pode levar a visualizações não intencionais e interromper a acessibilidade.
O que fazer
Combine e estratifique as funções de cor corretamente para garantir visuais e acessibilidade adequados.
Neste exemplo, os botões com (2) on-primary em (1) primary ou (4) on-primary-container em (3) primary-container permanecem legíveis à medida que o nível de contraste muda e têm uma classificação AAA com uma proporção de contraste de 7:1 ou mais.
O que não fazer
Mapeamentos de cores inadequados podem levar a visuais não intencionais e prejudicar a acessibilidade.
Neste exemplo, os botões com (2) primary-container em (1) primary ou (4) primary-dim em (3) primary-container ficam ilegíveis à medida que os níveis de contraste mudam e não seguem a proporção mínima de contraste de 7:1 para texto normal. Esses níveis de contraste se aplicam a funções primárias, secundárias e terciárias.
Combinações de cores recomendadas
Principal + Dim principal
Use "Principal" para ações principais e "Principal-Dim" para itens complementares. Isso cria profundidade e garante que a ação principal se destaque.
Primário-dim + terciário
Use o primário-escuro para destacar elementos importantes e o terciário para fornecer feedback excepcional, como respostas de toque.
Primary + Secondary-Container
Use o contêiner secundário para conteúdo menos importante, enquanto o primário é aplicado a elementos-chave para garantir que eles se destaquem e chamem a atenção.
Primary + Primary-Container
Use "Primary" para ações principais e "Primary-Container" para itens complementares ou secundários. Isso cria profundidade, garantindo que a ação principal se destaque.
Dim primária + dim terciária
Use o Primary-Dim para destacar elementos importantes e o Tertiary-Dim para fornecer feedback de destaque, como uma meta que foi alcançada.
Tercário + primário + secundário
Quando não estiver claro qual é a ação principal, use uma combinação de terciário e primário para ações principais e secundário-contêiner para ações complementares.
Contêiner secundário + primário
Use "Primary-Dim" e "Secondary" quando quiser mostrar duas opções ou contêineres igualmente importantes, mas ainda ter contraste entre os dois.
Primário + terciário + primário-contêiner
Quando não estiver claro qual é a ação principal, use uma combinação de terciária e primária para ações principais e primário-contêiner para ações complementares.
Primário + Tertiary-Dim
Use "Principal" para ações principais e "Dimensão principal" para itens complementares. Isso cria profundidade e ajuda a ação principal a se destacar.