Contraste de cores: o erro que deixa seu site ilegível

Sabe aquele texto cinza-clarinho num fundo branco que fica elegante na tela do designer? Pois é: pra uma parte grande dos seus clientes ele é quase invisível. A pessoa força a vista, não consegue ler direito, se irrita e fecha a página. Não foi falta de interesse no seu produto. Foi falta de contraste — e você nunca fica sabendo da venda que escapou.

O que é contraste, sem termo difícil

Contraste é a diferença entre a cor do texto e a cor do fundo. Quanto maior a diferença, mais fácil de ler. Letra preta no branco tem contraste altíssimo — lê qualquer um. Letra cinza-claro no branco, ou amarelo no branco, tem contraste baixo: só lê bem quem tem visão ótima, numa tela boa, sem reflexo.

O problema é que quem cria o site quase sempre testa em condição perfeita: monitor caro, ambiente com luz controlada, visão jovem. O cliente real está no celular, no sol, com a vista cansada. A experiência que importa é a dele, não a do designer.

Um detalhe que engana muita gente: o cinza-claro parece "suave e moderno" na tela grande do computador, onde tudo é nítido e o ambiente é escuro. Mas basta levar esse mesmo texto pra um celular comum, no meio da rua, pra ele praticamente desaparecer. O que era elegante no escritório vira ilegível na vida real — e é na vida real que o cliente decide se compra.

Por que isso espanta cliente de verdade

Texto de baixo contraste não atrapalha só "um caso ou outro". Pense em quem faz parte do seu público:

• Pessoas mais velhas, cuja visão naturalmente perde a capacidade de distinguir tons claros — e que muitas vezes são quem tem dinheiro pra comprar.
• Quem está no celular sob luz forte, com a tela lavada pela claridade. Praticamente todo mundo, em algum momento do dia.
• Pessoas com baixa visão ou daltonismo, pra quem certas combinações de cor somem completamente.
• Telas mais simples, que não reproduzem cores com a mesma fidelidade do monitor do designer.

Em todos esses casos o resultado é o mesmo: a pessoa não lê seu preço, sua oferta, seu botão de contato. E vai embora.

A regra que os especialistas usam (traduzida)

Existe um padrão técnico de acessibilidade, o WCAG, que mede contraste por números. A regra prática que você precisa lembrar é simples: texto comum precisa de contraste 4,5 pra 1; texto grande, pelo menos 3 pra 1. Você não precisa calcular isso na mão — ferramentas grátis fazem a conta. Mas a ideia por trás é só uma: o texto tem que se destacar claramente do fundo. Na dúvida, escureça o texto ou clareie o fundo.

No Brasil isso também conversa com a lei. A Lei Brasileira de Inclusão (LBI) exige que sites de empresas sejam acessíveis — e contraste legível é um dos pontos mais básicos disso. Site ilegível não é só ruim de venda: é risco de reclamação.

Como acertar o contraste hoje

1. Use texto bem escuro em fundo claro (ou o contrário). Preto ou cinza-bem-escuro no branco resolve a maioria dos casos sem drama.
2. Fuja do cinza-claro pra texto. Ele combina com tudo e some com tudo. Guarde o cinza-claro pra detalhes, nunca pra informação que o cliente precisa ler.
3. Cuidado com texto em cima de foto. Aquela frase por cima da imagem de capa costuma ficar ilegível na parte clara da foto. Use uma faixa escura por trás do texto pra garantir.
4. Não conte só com a cor. "O link em vermelho" não ajuda quem não distingue vermelho. Sublinhe, deixe em negrito, dê outra pista além da cor.
5. Teste com ferramenta grátis. Sites como o WebAIM Contrast Checker dizem na hora se suas cores passam. Cole as duas cores e ele te dá o veredito.

Bonito de menos, legível de mais

Dá pra ter um site bonito E legível — não precisa escolher. O erro é deixar a estética mandar sozinha e esquecer que o objetivo do texto é ser lido. Cor suave fica linda no portfólio do designer, mas é o cliente quem precisa enxergar o preço e o botão. Quando bater a dúvida entre "fica mais bonito assim" e "lê melhor assim", fique com a leitura. Beleza que ninguém consegue ler não vende nada.

Comece pelo texto mais importante da sua página — o que vende, o preço, o botão de contato — e garanta que ele salte aos olhos. O resto você ajusta com calma.

E não pare no texto principal. Os lugares onde o contraste costuma falhar sem ninguém notar são justamente os mais perigosos: o texto dentro dos botões (que precisa ser lido pra pessoa clicar), as mensagens de erro de formulário (que ficam em vermelho-claro e somem), e o rodapé com seu telefone e endereço. Se o cliente não lê o botão, ele não clica. Se não lê o erro, ele desiste de preencher. Se não lê o rodapé, ele não acha como te chamar. Cada um desses pontos cinza-claro é uma venda travada por um motivo bobo.

Para ir além, veja por que acessibilidade é lei e vende mais e como deixar seu site usável por qualquer pessoa.