Cores e contraste no design de interfaces para apps

Uso funcional de cores: para que elas servem na interface

Em apps, cor não é “decoração”: é um sistema de sinais. Um bom sistema de cores ajuda o usuário a entender o que é mais importante, o que é clicável, o que mudou de estado e se uma ação deu certo ou errado. Para funcionar bem, a cor precisa ser consistente e previsível.

1) Cor como hierarquia (o que chama atenção primeiro)

Use cor para destacar o que deve ser visto ou acionado primeiro. Em geral, a cor mais “forte” (primária) deve aparecer com baixa frequência e concentrada nos pontos de ação principais.

• Primária: ações principais (ex.: botão “Continuar”, link ativo, indicador de seleção).
• Secundária: ações alternativas (ex.: “Salvar rascunho”, “Ver detalhes”).
• Neutros: estrutura (fundos, cards, bordas, texto).

Regra prática: se tudo é colorido, nada é destaque. Prefira interfaces majoritariamente neutras com poucos pontos de cor.

2) Cor como estados (o componente mudou)

Componentes mudam de estado o tempo todo. Defina cores para estados e aplique de forma consistente:

• Default: aparência padrão.
• Hover/pressed: feedback de interação (em mobile, “pressed” é mais relevante).
• Focused: foco de teclado/controle (importante para acessibilidade).
• Selected: item selecionado (tabs, filtros, listas).
• Disabled: indisponível (redução de contraste e saturação, sem parecer “apagado demais”).

Evite inventar uma cor diferente para cada componente. O ideal é ter um conjunto pequeno de tokens (ex.: primary, primaryPressed, border, surface, text) reutilizado em tudo.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

3) Cor como significado (feedback: sucesso, alerta, erro)

Use cores semânticas para comunicar status e resultados:

• Sucesso: confirmações, operações concluídas.
• Alerta: atenção necessária, risco moderado, confirmação antes de prosseguir.
• Erro: falhas, validações inválidas, ações bloqueadas.
• Informação: dicas, mensagens neutras, estados informativos.

Importante: mantenha o mesmo significado em todo o app. Se “vermelho” é erro, não use vermelho para “promoção” em outro lugar, pois cria conflito de interpretação.

Como evitar dependência exclusiva de cor

Não dependa apenas da cor para transmitir informação. Parte dos usuários tem algum tipo de deficiência de visão de cores, e mesmo usuários sem deficiência podem usar o app em telas ruins ou sob sol forte.

Combine cor com pelo menos um destes recursos:

• Texto (ex.: “Senha fraca”, “Campo obrigatório”).
• Ícone (ex.: check para sucesso, triângulo para alerta, exclamação para erro).
• Forma/estilo (ex.: borda tracejada, sublinhado, badge).
• Posição (mensagem sempre abaixo do campo, por exemplo).

Exemplo prático em validação de formulário: não use apenas a borda vermelha. Use borda + mensagem + ícone.

Campo: Email  [__________]  (borda vermelha)  +  “Digite um email válido”

Montando uma paleta mínima (prática e escalável)

Uma paleta mínima bem definida resolve 80% do design do app e evita “cores aleatórias” surgindo ao longo do projeto. A ideia é separar cores por função (tokens), não por nomes subjetivos (“azul bonito”).

Estrutura recomendada de paleta

• Primária: 1 cor principal + variações (claro/escuro) para estados.
• Secundária: 1 cor de apoio (opcional, mas útil para destaques secundários).
• Neutros: escala de cinzas (fundos, superfícies, bordas, texto).
• Feedback: sucesso, alerta, erro, informação (cada uma com fundo e texto/ícone).

Passo a passo para criar a paleta

Passo 1 — Defina os neutros primeiro

Neutros são a base: fundo, cards, bordas e texto. Crie uma escala com pelo menos 6 níveis. Exemplo (valores ilustrativos):

Regra prática: texto principal quase nunca deve ser cinza claro. Prefira um neutro bem escuro para legibilidade.

Passo 2 — Escolha a cor primária e crie variações de estado

Escolha uma cor primária que funcione bem em botões e links. Depois crie pelo menos:

• primary (default)
• primaryPressed (um pouco mais escura)
• primarySoft (bem clara para fundos/seleções)
• onPrimary (cor do texto/ícone sobre o primário)

Se o primário for escuro, onPrimary tende a ser branco. Se o primário for claro, onPrimary tende a ser um neutro bem escuro. Sempre valide contraste (ver seção de acessibilidade).

Passo 3 — Defina a secundária (opcional) com função clara

Secundária não é “mais uma cor bonita”. Dê um papel: por exemplo, destacar filtros, chips, gráficos, ou uma ação alternativa. Se não houver necessidade, é melhor não ter.

Passo 4 — Crie cores semânticas de feedback (com par fundo + conteúdo)

Para cada status, defina pelo menos:

• successBg e successText
• warningBg e warningText
• errorBg e errorText
• infoBg e infoText

Isso evita o erro comum de usar o mesmo vermelho tanto para fundo quanto para texto, gerando baixo contraste.

Passo 5 — Transforme em “tokens” e aplique no app

Em vez de espalhar hex codes, use nomes funcionais (tokens). Isso facilita manutenção e consistência.

// Exemplo de tokens (conceitual, independente de tecnologia específica):
color.background = neutral-0
color.surface = neutral-50
color.border = neutral-200
color.text = neutral-900
color.textMuted = neutral-500
color.primary = primary
color.onPrimary = onPrimary
color.successBg = successBg
color.successText = successText

Aplicando a paleta em componentes (exemplos práticos)

Botões

Dica: botão desabilitado não deve parecer “clicável”. Evite usar a cor primária em elementos desabilitados.

Campos de texto (input)

• Default: borda border, texto text, placeholder textMuted.
• Focused: borda primary + indicador adicional (ex.: espessura maior ou glow sutil) para não depender só da cor.
• Erro: borda error + mensagem errorText + ícone.

Tabs e seleção

Para itens selecionados, combine:

• Cor (ex.: label em primary)
• Indicador de forma (ex.: underline, pill, marcador)

Isso melhora a compreensão mesmo em baixa saturação ou para usuários com daltonismo.

Contraste e acessibilidade: critérios e verificação

Contraste é a diferença de luminância entre texto/ícone e o fundo. Contraste insuficiente é uma das causas mais comuns de interfaces “bonitas” porém difíceis de usar.

Critérios práticos (referência WCAG)

• Texto normal: contraste mínimo de 4.5:1.
• Texto grande (aprox. 18pt regular ou 14pt bold): mínimo de 3:1.
• Ícones e elementos gráficos essenciais: mínimo de 3:1 contra o fundo.

Observação: “texto grande” depende de tamanho e peso. Quando estiver em dúvida, use o critério mais exigente (4.5:1).

Passo a passo para verificar contraste

Passo 1 — Liste os pares críticos

Verifique principalmente:

• Texto principal sobre fundo principal
• Texto secundário sobre fundo principal
• Texto/ícone em botões primários e secundários
• Texto em badges e alertas
• Placeholder (muito comum ficar fraco demais)

Passo 2 — Meça a razão de contraste

Use uma ferramenta de verificação de contraste (contrast checker) e insira as cores de primeiro plano e fundo. Registre os pares aprovados e reprovados.

Passo 3 — Corrija sem “quebrar” a identidade visual

Se reprovou, ajuste por ordem de preferência:

• Escureça o texto (ou clareie o fundo) mantendo o matiz.
• Aumente o peso/tamanho do texto (ajuda, mas não substitui contraste quando o texto é normal).
• Troque o uso: em vez de texto colorido sobre fundo branco, use texto neutro escuro e deixe a cor para um indicador (barra lateral, ícone, borda).

Passo 4 — Teste em condições reais

• Brilho baixo e alto
• Modo escuro (se existir)
• Ambiente externo (simulação: aumente brilho e reduza saturação mentalmente; melhor ainda, teste no celular)

Erros comuns de contraste

• Usar cinza claro para texto secundário (fica ilegível em telas medianas).
• Placeholder quase invisível (usuário não entende o formato esperado).
• Texto branco em amarelo/laranja (quase sempre falha).
• Texto vermelho em fundo branco muito “vivo” sem escurecer o vermelho (pode falhar em 4.5:1).

Combinações seguras (texto sobre fundos e alertas)

Abaixo estão padrões de combinação que costumam ser seguros quando você valida contraste e mantém a lógica “fundo claro + texto escuro” para mensagens longas.

Texto sobre fundos neutros

Links e ações no meio do texto

Para links em parágrafos, não dependa só da cor: use sublinhado ou mudança de peso.

• Seguro: texto neutro + link em primário com sublinhado.
• Evite: link apenas por cor em um texto já colorido ou em cinza claro.

Alertas e banners (sucesso/alerta/erro/info)

Para mensagens, um padrão robusto é: fundo bem claro (tint) + texto escuro + ícone + borda/stripe na cor semântica. Isso reduz dependência de contraste extremo entre cor viva e branco.

Exemplos de combinações a evitar (e alternativas)

• Evitar: texto branco em fundo amarelo/laranja saturado. Alternativa: fundo âmbar claro + texto neutro escuro.
• Evitar: texto vermelho claro em fundo branco. Alternativa: vermelho mais escuro para texto ou use texto neutro escuro + indicador vermelho (ícone/borda).
• Evitar: placeholder em cinza muito claro. Alternativa: placeholder em neutro médio com contraste suficiente e label visível.

Checklist rápido para aplicar no seu app

• Tenho neutros suficientes para fundo, superfície, borda e texto?
• Minha cor primária aparece só onde há ação principal?
• Estados (pressed, focused, disabled) estão definidos e consistentes?
• Sucesso/alerta/erro/info têm fundo e texto próprios (não só uma cor)?
• Nenhuma informação depende exclusivamente de cor (há texto/ícone/forma)?
• Contraste foi verificado para texto normal (4.5:1) e ícones essenciais (3:1)?