Cor e Contraste no Design Mobile: Um Guia para Iniciantes

Cor e Contraste no Design Mobile: Um Guia para Iniciantes

Por que Cor e Contraste Importam?

Imagine que você está lendo um livro em uma sala escura com uma lanterna fraca. Se o texto for cinza claro em um fundo branco, você terá dificuldade em ler. Mas se o texto for preto em branco, você consegue ler facilmente. Isso é contraste — a diferença entre cores que torna o conteúdo visível.

Em design mobile, o contraste é ainda mais crítico porque:

• Telas de celular são menores que computadores
• Pessoas usam seus telefones em diferentes ambientes (sol, sombra, dentro de casa)
• Nem todos enxergam cores da mesma forma (daltonismo afeta ~8% dos homens)

Entendendo Contraste: A Razão de Contraste

Designers usam um número chamado razão de contraste para medir se duas cores funcionam bem juntas. É como um "score" de 1 a 21:

• 1:1 = cores idênticas (impossível ler)
• 4.5:1 = mínimo aceitável para texto pequeno
• 7:1 = excelente (recomendado para acessibilidade)
• 21:1 = máximo (preto puro em branco puro)

Pense na razão de contraste como o "volume" da diferença entre cores. Quanto maior o número, mais fácil é ver a diferença.

Como Escolher uma Paleta de Cores

Uma paleta de cores é como uma caixa de tintas que você escolhe para seu app. Aqui está um processo simples:

Passo 1: Escolha uma cor primária
Esta é a cor principal do seu app. Por exemplo, azul para um app de produtividade ou verde para um app de saúde. Escolha uma cor que você goste e que faça sentido para o propósito do app.

Passo 2: Escolha cores de contraste
Você precisa de cores que funcionem bem com sua cor primária. Uma técnica simples é usar cores opostas na roda de cores (chamadas cores complementares). Se sua cor primária é azul, a cor complementar é laranja.

Passo 3: Teste em diferentes condições
Abra seu app em um celular real e veja como fica:

• Dentro de casa com luz artificial
• Ao ar livre sob o sol
• Em um ambiente escuro

Exemplo Prático: Cores Boas vs. Ruins

❌ Combinação Ruim:

// Texto cinza claro em fundo branco
const badDesign = {
  textColor: '#CCCCCC',      // cinza muito claro
  backgroundColor: '#FFFFFF'  // branco
};
// Razão de contraste: ~1.2:1 (muito baixa!)

✅ Combinação Boa:

// Texto preto em fundo branco
const goodDesign = {
  textColor: '#000000',       // preto
  backgroundColor: '#FFFFFF'  // branco
};
// Razão de contraste: 21:1 (perfeita!)

✅ Combinação Boa (com cor):

// Texto branco em fundo azul escuro
const colorfulDesign = {
  textColor: '#FFFFFF',       // branco
  backgroundColor: '#003366'  // azul escuro
};
// Razão de contraste: ~10:1 (excelente!)

Dicas para Diferentes Condições de Iluminação

Em ambientes claros (sol direto):

• Use cores escuras para texto
• Evite cores muito saturadas (muito vibrantes) que podem causar cansaço visual
• Aumente o contraste em relação ao normal

Em ambientes escuros:

• Use um fundo escuro com texto claro (modo noturno)
• Evite branco puro (muito brilhante) — use cinza claro em vez disso
• Reduza o brilho geral da interface

Ferramentas Úteis

Você não precisa calcular razões de contraste manualmente. Existem ferramentas online gratuitas onde você coloca duas cores e ela diz se o contraste é bom. Procure por "contrast checker" ou "WCAG contrast ratio calculator".

Resumo Rápido

Lembre-se: cores bonitas não servem de nada se ninguém conseguir ler seu app! Sempre teste suas cores em um celular real, em diferentes ambientes, e certifique-se de que o contraste é suficiente para que qualquer pessoa consiga usar seu app confortavelmente.