Como montar a paleta de cores de um site

A paleta de um site funciona melhor quando você escolhe papéis para as cores antes de escolher as cores. Em vez de procurar “cores bonitas”, defina quatro papéis: uma cor de fundo, uma cor de texto, uma cor de ação (para botões e links) e uma ou duas cores de apoio. Depois você testa se o texto se lê em cima do fundo. Com isso, a paleta de um site pequeno fica pronta em uma tarde.

Quatro papéis para decidir antes de abrir o seletor de cor

Imagine o site de uma floricultura de bairro. A pessoa que entra quer ver os buquês, o horário e como encomendar para entrega. Cada cor da página precisa ajudar nisso.

• Fundo: a cor que ocupa a maior parte da tela. Em sites de texto, costuma ser clara. Um rosado muito claro como #FBF3F0 fica mais quente que o branco puro e dá personalidade.
• Texto: a cor das letras. Quase nunca é preto puro. Um cinza-ameixa bem escuro, como #2E2A33, lê bem e fica mais suave.
• Cor de ação: a cor dos botões e dos links. É a cor que diz “clique aqui”. Deve aparecer pouco, para chamar atenção quando aparece.
• Cor de apoio: detalhes, faixas, ícones, títulos de seção.

Essa divisão evita o erro mais comum de quem monta a primeira paleta: usar cinco cores fortes com o mesmo peso, sem hierarquia. Se você quiser entender melhor quantas cores cabem, leia quantas cores usar em uma paleta.

Montando a paleta da floricultura em cinco passos

Você pode digitar cada código HEX (o código de seis caracteres que identifica uma cor na internet, como #FBF3F0) no editor do Tom a Tom e acompanhar.

1. Escolha a cor que representa o negócio. Na floricultura, pensamos nas pétalas das peônias: um rosa, #D9708A.
2. Escolha o fundo. Um rosado quase branco, #FBF3F0, combina com o rosa e deixa as fotos dos buquês aparecerem.
3. Escolha o texto. Um cinza-ameixa escuro, #2E2A33, para os parágrafos e títulos.
4. Escolha a cor de ação. Aqui entra o roxo #5B3F8C, que se destaca do rosa sem brigar com ele.
5. Reserve o branco. O #FFFFFF serve para cartões, campos de formulário e para o texto em cima dos botões roxos.

Repare que a cor que “representa o negócio” nem sempre é a melhor cor de botão. É por isso que separamos os papéis.

Medindo o contraste antes de se apaixonar pelas cores

Contraste, aqui, é a diferença de claridade entre o texto e o fundo. Quanto maior a diferença, mais fácil de ler. Ele é medido em uma razão: 1:1 significa nenhuma diferença, 21:1 é preto sobre branco.

A WCAG (as Diretrizes de Acessibilidade para Conteúdo Web, do W3C) pede, no nível AA, razão de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O que conta como texto grande está em contraste em texto grande e texto pequeno. Para ver isso na prática, use um verificador como o da WebAIM, que mostra o resultado para os níveis AA e AAA.

Aplicando à nossa paleta, com os números que calculei pela fórmula da WCAG:

Combinação	Razão	Uso
#2E2A33 sobre #FBF3F0	12,83:1	texto do site, passa com folga
#FFFFFF sobre #5B3F8C	8,29:1	texto do botão, passa até no AAA
#D9708A sobre #FFFFFF	3,17:1	só serve para texto grande
#2E2A33 sobre #D9708A	4,44:1	fica por pouco abaixo de 4,5:1

O rosa, que era a “cor do negócio”, não serve para texto pequeno sobre o branco, e com letra escura por cima ainda fica por pouco abaixo do mínimo. A solução foi usá-lo em títulos grandes, faixas e detalhes, e dar o botão ao roxo. Quem testa depois de pronto precisa refazer a página inteira. Quem testa na hora só troca uma cor.

Bordas, ícones e botões também precisam ser vistos

Botões, bordas de campos e ícones também precisam ser percebidos. O critério 1.4.11 da WCAG, que trata de contraste de elementos que não são texto, pede 3:1 entre o componente e a cor ao redor, para o que é necessário entender a interface. Um campo de formulário com borda cinza muito clara sobre fundo branco some para muita gente. Meça a borda contra o fundo: o mínimo é 3:1.

Quatro tropeços comuns ao escolher cores de site

Usar a cor da marca em tudo. Se o logo é rosa, não precisa de fundo rosa, botão rosa e título rosa. Deixe a cor forte em um ou dois lugares.

Escolher no monitor do computador e esquecer o celular. O brilho e a tela mudam a cor. Olhe a paleta no seu telefone, ao ar livre e com o brilho no meio. Como testar uma paleta antes de usar detalha esse passo.

Deixar o cinza fazer todo o trabalho. Cinza puro costuma ficar sem vida ao lado de uma cor quente. Escolha cinzas e beges com um leve tom da paleta, como o rosado do fundo.

Esquecer o modo escuro. Muitos celulares estão configurados para tema escuro, e o navegador informa isso ao site. Se o seu site vai respeitar essa preferência, pense nas duas versões desde o início, como explicado em paleta para modo claro e modo escuro.

A receita final: cada cor com o seu papel anotado

Quando as cores estiverem decididas, anote cada uma com o papel dela:

• Fundo: #FBF3F0
• Cartões e campos: #FFFFFF
• Texto: #2E2A33
• Ação: #5B3F8C
• Destaque: #D9708A

Essa lista vira a “receita” do site. Quem for mexer nele depois, seja você, seja um freelancer, vai saber qual cor entra em qual lugar. Um site com cinco cores bem definidas parece mais profissional do que um com quinze cores soltas.

Cinco perguntas para fazer antes de publicar o site

• O texto principal passa de 4,5:1 sobre o fundo?
• O botão principal se destaca de todo o resto da página?
• Os links se distinguem do texto ao redor, e não só pela cor?
• Você olhou o site em uma tela pequena e em uma tela grande?
• Cada cor tem um papel anotado?

Se a resposta for sim para tudo, a paleta está pronta para ir ao ar. Se alguma for não, comece por ela: um tom mais escuro aqui, um fundo um pouco mais claro ali costumam bastar.