Papel de cor no Material: aplicar sem perder a marca

Um papel de cor é um nome para uma função na interface. Ele responde onde a cor entra, não qual cor ela é. O guia do Material Design define 26 papéis padrão em seis grupos (em inglês): primary, secondary, tertiary, error, surface e outline. O guia compara os papéis com áreas numeradas de uma pintura por número (em inglês), como forma de descrever a ligação entre um elemento e a cor que pertence a ele.

O que um papel de cor decide

Os papéis descrevem uma posição no layout. Surface é o papel para fundos e áreas grandes de baixa ênfase (em inglês). Um papel que começa com “on” marca texto e ícones sobre a cor mãe correspondente (em inglês). Um papel de contêiner preenche elementos como botões e não serve para texto ou ícones (em inglês). Um papel variant é uma alternativa de menor ênfase ao par sem variant (em inglês).

Por que o guia separa papel de valor

O papel continua o mesmo quando o valor muda. O guia afirma que os mapeamentos de papel de cor continuam os mesmos nos esquemas dinâmicos (em inglês) enquanto as cores por baixo mudam. Os papéis também são implementados por design tokens (em inglês), então o nome carrega a decisão e o número fica em outro lugar. Uma atualização de marca edita as cores de origem, e toda tela que lê o papel recebe o valor novo.

Os papéis principais e onde eles aparecem

Os papéis de acento carregam ênfase, e o guia os distribui conforme a atenção que um elemento pede. Primary cobre as ações e os elementos mais proeminentes (em inglês), como um botão flutuante. Secondary cobre elementos que não precisam de atenção imediata (em inglês), como o estado selecionado de um ícone de navegação. Tertiary cobre elementos menores que pedem ênfase sem urgência (em inglês), como um selo.

Error marca um estado como uma senha incorreta (em inglês), e o guia o mantém estático mesmo em esquema dinâmico. Surface e seus papéis de contêiner ocupam as regiões neutras da tela (em inglês), com cinco níveis de contêiner para hierarquia. Outline cuida de limites importantes, como a borda de um campo (em inglês), e outline variant fica com marcas decorativas, como divisores (em inglês).

Contraste dentro do esquema, e onde um par falha

O guia constrói o esquema sobre pares de cor acessíveis com contraste mínimo de 3:1 (em inglês). Combinar cores fora da ordem prevista pode quebrar o contraste (em inglês) que a acessibilidade visual exige, sobretudo quando um ajuste de contraste move os valores.

Esse piso de 3:1 não é o único número em jogo. O Nielsen Norman Group relata que a WCAG pede ao menos 4.5:1 para texto de corpo e 3:1 para texto grande (em inglês). Um par pode passar do piso do guia e ainda reprovar em texto de corpo pequeno.

O contraste carrega sentido, além de legibilidade. O NN/g observa que um tratamento de baixo contraste pode sinalizar que uma opção está indisponível (em inglês), porque escurecer é a forma comum de mostrar um controle desativado.

Cor de marca sobre o esquema

Um esquema estático mantém as cores independentemente da entrada do usuário ou do conteúdo do app, e o guia oferece um esquema base com atribuições padrão (em inglês). Um esquema de marca customizado é escolhido à mão pela equipe para casar com a cor da marca (em inglês).

O guia não esconde o custo. Esquemas baseados em marca são criados e mantidos inteiramente pela equipe (em inglês), o que o guia chama de investimento maior de tempo e esforço. O Material Theme Builder transforma um valor hexadecimal de marca em um esquema de cor completo (em inglês), e os nomes dos papéis permanecem.

A cor da marca entra nos papéis, não passa por cima deles. Um acento de marca mapeado em primary continua tendo que funcionar com texto e ícones sobre o preenchimento correspondente (em inglês).

Esquema dinâmico e a partir de conteúdo

A cor dinâmica constrói um esquema acessível a partir de uma cor de origem (em inglês). A origem pode ser o papel de parede do usuário ou o conteúdo do app (em inglês). O guia recomenda desenhar primeiro no esquema base, para que os papéis certos estejam mapeados nos componentes certos (em inglês) antes de as cores começarem a mudar. O que não vem é a mesma cor de interface em todos os dispositivos (em inglês).

O erro comum: usar acento como fundo de texto

Um papel de acento é preenchimento, e o papel par dele é o texto que fica por cima. Usar primary como fundo de texto de corpo põe um preenchimento onde um contêiner deveria estar. O guia reserva os papéis “on” para texto e ícones sobre a cor mãe (em inglês).

O NN/g relata que a cor sozinha não basta para separar estados (em inglês), então um teste de contraste no par real vale mais do que um palpite a partir da amostra. O mesmo artigo sugere deixar o desenho em escala de cinza para ver se ele ainda é legível. O NN/g também alerta que cores de brilho parecido são difíceis de distinguir para quem tem daltonismo (em inglês).

O que o guia não fecha

O guia deriva um esquema de uma cor de origem e define os pares que funcionam. Ele não define o contraste final de uma marca. Também não dá número fixo para texto de marca sobre preenchimento de marca, e essa decisão fica com o time do produto.

Uma paleta de marca precisa do próprio teste (em inglês) em vez de confiança no arquivo de tema. O NN/g sugere limitar a paleta a poucas cores (em inglês), já que um conjunto amplo enfraquece a hierarquia e o acento perde a função.

Os papéis aqui continuam o que foi coberto em Material Design e em design tokens. O lado de contraste de um esquema se liga a dark mode e contraste.