Cor do botão: o que realmente importa

Não existe uma cor de botão que funcione melhor em todo site. O que faz o botão ser clicado é ele se destacar do resto da página, ter texto legível e deixar claro o que acontece depois do clique. A cor em si, vermelho, verde ou laranja, pesa menos do que a diferença entre o botão e o que está ao redor dele.

Por que “a melhor cor” não existe

É comum ouvir que o botão laranja vende mais ou que o verde converte melhor. Essas frases circulam porque alguém testou numa loja e viu um resultado. Só que o resultado vale para aquela loja, com aquele fundo, aquele público e aquela oferta. Mudar o fundo da página já muda o efeito da mesma cor.

A pesquisa científica também não dá base para uma regra geral. A revisão de Andrew Elliot, de 2015, afirma que todo efeito de cor depende de condições como cultura, idade e tipo de tarefa, e que muitos estudos têm amostras pequenas. Ele pede cautela antes de transformar achados em receita de aplicação. Por isso, este artigo não indica uma cor. Indica o que você pode controlar.

O que realmente importa

1. Contraste com o fundo

O botão precisa ser visto. O WCAG, o padrão do W3C para acessibilidade na web, pede que os componentes de interface, como botões e campos, tenham contraste de pelo menos 3 para 1 com as cores ao lado (critério 1.4.11, nível AA). Contraste é a diferença de brilho entre duas cores. Na prática: se o botão verde #2F6B4F fica sobre um fundo cinza-esverdeado claro #F1F5F2, a razão é 5,72 para 1, que passa com folga.

2. Texto legível dentro do botão

O texto do botão segue a regra de texto: 4,5 para 1 para texto normal e 3 para 1 para texto grande (critério 1.4.3). O que conta como texto grande está em contraste em texto grande e texto pequeno. Branco #FFFFFF sobre o verde #2F6B4F dá 6,29 para 1. Já branco sobre laranja #F28C38 dá só 2,45 para 1 e falha, mesmo parecendo “bonito” no desenho. Com texto escuro #2B2118 sobre o mesmo laranja, a razão sobe para 6,44 para 1.

Se o botão laranja ou amarelo é a cor da sua marca, a saída não é abandonar a cor. É trocar a cor da letra.

3. Hierarquia: um botão principal por tela

Se três botões têm a mesma força visual, a pessoa não sabe qual é o caminho. Defina o botão principal com a cor cheia, o secundário só com contorno e o terciário como link de texto. O principal deve aparecer uma vez por tela, com a ação que você mais quer que alguém faça.

4. Texto que diz a ação

“Enviar” diz pouco. “Pedir orçamento” e “Baixar o catálogo” dizem o que vem depois. Um botão com a cor perfeita e um texto vago perde para um botão simples com um texto claro.

5. Estados do botão

O botão muda ao passar o mouse, ao receber foco do teclado e quando está desativado. O WCAG pede que o indicador de foco tenha contraste de 3 para 1 com as cores vizinhas. O efeito de mouse por cima não precisa atingir esse número, mas não pode fazer o botão perder contraste. O botão desativado é isento da regra.

6. Não depender só da cor

O critério 1.4.1 do WCAG, nível A, diz que a cor não pode ser o único meio de passar uma informação. Se o botão “Cancelar” é vermelho e o “Confirmar” é verde, mas os dois têm o mesmo formato e texto parecido, quem não distingue vermelho de verde tem dificuldade. O texto do botão resolve: ele deve dizer a ação por si.

Roteiro de seis passos para escolher o botão

1. Pegue a cor principal da sua paleta do site.
2. Coloque o botão sobre os fundos reais onde ele vai aparecer: branco, cinza-claro, foto.
3. Meça o contraste do botão com o fundo (mínimo 3 para 1) e da letra com o botão (mínimo 4,5 para 1).
4. Escolha uma cor diferente das usadas em links e títulos, para que o botão não se confunda com eles.
5. Defina o aspecto do foco, do mouse por cima e do desativado.
6. Olhe a página com os olhos meio fechados. Se o botão principal ainda aparece, está bom.

Para os detalhes de contraste em ícones e campos, veja contraste em botões, ícones e campos.

Exemplo: a página de uma costureira

Pense na página de uma costureira que recebe pedidos de ajustes. O fundo é branco #FFFFFF. O título e o texto são escuros, #2B2118. O botão principal, “Pedir orçamento”, é verde #2F6B4F com letra branca, e fica logo depois da explicação do serviço. Mais abaixo, “Ver trabalhos anteriores” aparece só como um contorno verde, sem preenchimento, porque é uma ação secundária. No rodapé, “Falar no WhatsApp” é um link simples.

O olhar da visitante vai direto ao único bloco verde cheio da página. Não foi a cor verde que fez isso. Foi o fato de ele ser o único elemento preenchido com cor forte sobre um fundo claro.

Erros que fazem o botão passar despercebido

• Copiar a “cor que converte” de um artigo. Sem teste no seu site, é só palpite.
• Botão da mesma cor do fundo da marca. Se o fundo já é verde e o botão também, ele some.
• Letra branca sobre cor clara. Parece elegante, mas muita gente não consegue ler.
• Vários botões com destaque total. Sem hierarquia, ninguém sabe onde clicar.
• Esquecer o celular. Teste ao ar livre, no sol, e também com o brilho baixo.

Quando testar de verdade

Se você tem visitas suficientes, pode comparar duas versões do botão num teste A/B, que mostra cada versão para metade dos visitantes. Mude uma coisa só por vez e deixe o teste rodar até ter um número razoável de cliques. Sem tráfego suficiente, o resultado oscila e engana. Nesse caso, invista o tempo em contraste, texto e hierarquia, que têm base sólida.

O resultado de um teste vale para o seu site naquele momento. Refaça o teste quando mudar o fundo, a oferta ou o público.