Por que as cores da sua UI parecem de júnior: 6 correções com códigos exatos
Seis erros de cor que fazem uma interface parecer júnior, e a correção sênior para cada um com os códigos exatos: um único destaque, cor mais ícone mais palavras, áreas com tom suave, texto de destaque mais escuro, texto escuro no amarelo e um tom por estado.
Cor de júnior raramente é um choque de cores. São seis pequenos hábitos: destaques demais, cor fazendo sozinha um trabalho que não é dela, preenchimentos em força total para todo lado, uma cor de marca clara usada em texto, branco sobre amarelo e um único tom para todos os estados. A cor sênior parece calma porque cada um desses pontos tem uma regra. Aqui estão os seis, com os códigos.
1. Um destaque, para a ação
Vermelho
Verde
Âmbar
Violeta
Neutro
Neutro
Neutro
Destaque #6440E0
Quando cada elemento tem sua própria cor, a cor deixa de significar qualquer coisa. O olho não tem onde pousar, e a ação real compete com a decoração.
Escolha um destaque e gaste-o só no que as pessoas podem acionar: o botão principal, a aba selecionada, o link. Todo o resto fica neutro. Se você consegue apontar para um elemento colorido e dizer "isso não é tocável", tire a cor dele. A regra 60-30-10 é a mesma ideia em proporções: o destaque é o pequeno 10.
2. Cor, ícone e palavras
✕ Júnior: uma borda vermelha e mais nada
Informe o endereço completo, como sam@mail.com.
✓ Sênior: cor, ícone e palavras
✕ Júnior: qual campo está errado?
Informe o endereço completo, como sam@mail.com.
✓ Sênior: continua óbvio
Cerca de 8 por cento dos homens de ascendência do norte da Europa têm dificuldade para distinguir vermelho de verde, o número habitual de "1 em 12 homens". Para eles, e para qualquer pessoa usando o celular sob o sol, uma borda vermelha é uma borda cinza.
Portanto, um estado precisa de três sinais: uma cor, um ícone na frente e palavras que digam o que fazer. Isso é a WCAG 1.4.1, uso de cor: a cor pode reforçar uma mensagem, nunca ser a única forma de transmiti-la. A paleta completa de erro está no nosso paper sobre cor de mensagem de erro.
3. Suavize as áreas grandes
Vire Pro por $4
Mapas offline, sem anúncios e compartilhamento de viagens.
Assinar✕ Júnior: o card inteiro em cor cheia
Vire Pro por $4
Mapas offline, sem anúncios e compartilhamento de viagens.
Assinar✓ Sênior: um tom suave, e cor cheia no botão
Um bloco grande de cor em força total é barulhento e gasta o seu destaque. Aí o botão dentro dele fica sem nada para se destacar, porque tudo ao redor já tem a mesma cor.
Suavize a área grande e guarde a cor cheia para a parte que faz o trabalho. Aqui o card fica sobre #E6DDFF, um passo claro do mesmo violeta, e o botão é o #6440E0 cheio. Use o mesmo movimento em banners, linhas selecionadas e seções de destaque. Nosso paper sobre paletas de cores de marca mostra como construir os passos de tom a partir de um único matiz.
4. Escureça o texto de destaque
Violeta claro no branco
Violeta mais escuro no branco
Uma cor de marca clara funciona bem como preenchimento e mal como texto. #9A79FC parece simpática num botão e desmorona como link de 14 px no branco. A correção mantém o matiz e reduz a luminosidade: #6440E0 é o mesmo violeta, profundo o bastante para ler.
Para quem precisa defender a escolha: #9A79FC no branco tem 3,22 para 1, abaixo dos 4,5 para 1 que a WCAG exige de texto, e #6440E0 tem 6,27 para 1. Nosso paper sobre contraste de cor acessível explica os números e como verificá-los.
Mantenha duas versões de cada cor de marca: a vibrante para preenchimentos e ilustração, e a mais profunda para texto e ícones finos.
5. Texto escuro no amarelo
Branco no amarelo
Escuro no amarelo
Amarelo e cores claras são brilhantes por natureza, então o branco sobre elas quase não tem diferença de brilho. Branco sobre #FED480 é 1,41 para 1. Um quase preto como #161513 sobre o mesmo amarelo é 12,99 para 1.
A regra vale para todo preenchimento claro: amarelo pálido, menta, azul-céu, pêssego. Se o fundo é claro, o texto é escuro. Parece ao contrário para quem está acostumado a branco sobre cor de marca, e é um dos jeitos mais rápidos de fazer um botão parecer profissional.
6. Um tom por estado
Padrão
Pressionado
Desativado
Um botão que parece igual pressionado e em repouso não dá feedback, e um botão desativado pintado da mesma cor de um ativo parece quebrado. Dê a cada estado seu próprio tom do mesmo matiz: #6440E0 por padrão, #4422B2 quando pressionado, e um tom claro como #E6DDFF com um rótulo legível #9A79FC quando desativado.
Desativado é o único estado em que baixo contraste é aceitável, e a WCAG o isenta, mas o rótulo ainda deve ser legível o bastante para as pessoas entenderem o que o botão faria. O mesmo conjunto de três tons funciona para links, abas e toggles.
As seis correções em uma tabela
| Júnior | Sênior | O valor |
|---|---|---|
| Vários destaques | Um destaque, para a ação | #6440E0 na única coisa a tocar |
| Só cor | Cor, ícone e palavras | Nunca o único sinal |
| Áreas em cor cheia | Áreas com tom suave | #E6DDFF no fundo, #6440E0 no botão |
| Cor de marca clara como texto | Texto de destaque mais escuro | #6440E0, não #9A79FC |
| Branco no amarelo | Texto escuro no amarelo | #161513 sobre #FED480 |
| Um tom para todos os estados | Um tom por estado | #6440E0, #4422B2, #E6DDFF com rótulo #9A79FC |
FAQ
O que faz uma paleta de cores de UI parecer amadora?
Destaques demais, cor usada sozinha para carregar significado, preenchimentos em força total em áreas grandes e cores de marca claras usadas em texto. Corrigir esses quatro costuma importar mais do que mudar a paleta em si.
Quantas cores de destaque uma UI deve ter?
Uma. Use-a só para o que as pessoas podem tocar ou acionar, e mantenha todo o resto neutro. Cores de status, como o vermelho de erro, são separadas e sempre vêm com ícone e palavras.
Que cor de texto usar sobre fundo amarelo?
Uma escura. #161513 sobre #FED480 é cerca de 13 para 1, enquanto branco sobre o mesmo amarelo é cerca de 1,4 para 1. O mesmo vale para qualquer fundo claro.
Como deixar uma cor de marca clara legível como texto?
Mantenha o matiz e reduza a luminosidade. #9A79FC tem cerca de 3,2 para 1 no branco, e #6440E0, o mesmo violeta, tem cerca de 6,3 para 1.
Que cor um botão pressionado deve ter?
Um tom mais escuro do padrão, como #4422B2 em relação a #6440E0. Isso dá às pessoas o feedback de que o toque foi registrado, sem mudar o matiz.
Botões desativados precisam cumprir requisitos de contraste?
A WCAG isenta controles desativados do contraste mínimo, mas mantenha o rótulo legível para que as pessoas entendam o que o botão faz.
Fontes
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4,5 para 1 para texto, componentes desativados isentos) e 1.4.1 Use of Color.
- Razões calculadas com a fórmula de luminância relativa da WCAG: #9A79FC sobre #FFFFFF 3,22 para 1, #6440E0 sobre #FFFFFF 6,27 para 1 (ambos com matiz de cerca de 254 graus), #FFFFFF sobre #FED480 1,41 para 1, #161513 sobre #FED480 12,99 para 1.
- A deficiência de visão de cores vermelho-verde afeta cerca de 8 por cento dos homens de ascendência do norte da Europa, segundo o National Eye Institute.
- Os tons de estado (#4422B2 pressionado, #E6DDFF com rótulo #9A79FC desativado) são da nossa própria paleta. As cores dos filtros na seção 1 são ilustrativas.
- Publicado originalmente como carrossel no UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
