Cores para capas e banners

Para um banner ou uma capa de rede social funcionar, use poucas cores, deixe o texto com bastante contraste em relação ao fundo e guarde a cor de destaque para uma coisa só, como o botão ou a oferta. O erro mais comum é colocar letra sobre foto sem preparar o fundo, e o resultado é um texto que ninguém consegue ler.

O que um banner precisa fazer

Banner e capa têm um trabalho curto: dizer quem você é ou o que oferece em poucos segundos. Quem passa por ali não vai estudar a imagem. Por isso, as cores precisam fazer três coisas.

1. Deixar o texto legível.
2. Combinar com a marca.
3. Apontar para um ponto de atenção, como o nome, a oferta ou o botão.

Contraste do texto

Contraste é a diferença de brilho entre a letra e o fundo. A WCAG, o conjunto de diretrizes de acessibilidade do W3C (a versão 2.2, de outubro de 2023, manteve os valores de contraste), pede 4,5 para 1 em texto normal e 3 para 1 em texto grande. O que conta como grande está em contraste em texto grande e texto pequeno. Em banners, o texto costuma ser grande, então o mínimo de 3 para 1 é o piso. Para frases pequenas, como prazo ou endereço, mire em 4,5 para 1 ou mais.

O documento do WCAG também lista como falha usar imagem de fundo sem contraste suficiente com o texto sobre ela, e a medida é feita contra a cor atrás da letra. Com foto, o fundo muda de ponto a ponto. Então não basta olhar o centro da foto: confira a região exata onde cada palavra vai ficar.

Na paleta de exemplo deste artigo, medindo pela fórmula do WCAG:

Texto	Fundo	Razão
#FFFFFF	#3B1F6B	13,17 para 1
#FF9EB5	#3B1F6B	6,78 para 1
#FFFFFF	#FF9EB5	1,94 para 1

Branco no roxo-escuro e rosa no roxo-escuro passam bem. Branco sobre rosa falha, mesmo que a combinação pareça “alegre” na miniatura. Para texto sobre o rosa, use o roxo quase preto #1E0F38, que dá 9,16 para 1.

Banner de uma loja de brinquedos, passo a passo

A Dani tem uma loja de brinquedos e quer uma capa para a página do negócio e um banner para o site.

1. Defina a mensagem. “Toca do Brinquedo. Troca de presente sem pressa.” Duas linhas, no máximo.
2. Escolha o fundo. Um roxo-escuro liso, #3B1F6B. Fundo liso é o jeito mais seguro de garantir leitura.
3. Escolha o texto. Nome em branco #FFFFFF. A frase de apoio também em branco.
4. Reserve o destaque. O rosa #FF9EB5 fica só no botão “Ver novidades” ou na faixa da oferta. O texto do botão vai em #1E0F38.
5. Posicione com folga. Deixe margem em volta do texto. Em capas, o aplicativo corta ou cobre partes da imagem, e a foto de perfil costuma ficar sobre um canto. Veja no próprio aplicativo onde ela aparece e deixe aquela região livre de texto.
6. Teste no celular. Veja a arte no tamanho real, com brilho médio. Se precisar apertar os olhos, aumente a letra ou o contraste.

Quando o fundo é uma foto

Foto de fundo é comum em banner de site e em capa de página. Para o texto continuar legível, há quatro caminhos.

• Camada escura transparente. Coloque um retângulo preto com 40% a 60% de opacidade sobre a foto e depois o texto branco. Ajuste até medir o contraste necessário.
• Faixa sólida atrás do texto. Um retângulo da cor da marca, só atrás das palavras. Costuma ser o mais seguro.
• Escolher uma foto com área calma. Céu, parede lisa ou desfoque, onde o texto cabe sem competir.
• Texto fora da foto. A foto de um lado e um bloco de cor liso do outro.

Em todos os casos, confira o contraste no ponto exato do texto. Se a pessoa alterar a foto no futuro, confira de novo.

Banner de oferta e capa de perfil não são a mesma coisa

A capa de perfil fica no ar por meses e apresenta o negócio. Prefira cores calmas, a paleta da marca e uma frase que não envelheça. O banner de oferta vale por poucos dias e pode usar mais destaque: a cor de apoio em uma faixa, um número grande e o botão. Quando a oferta acabar, o banner sai e a identidade continua intacta no resto do material.

Paleta enxuta para a arte

Três ou quatro bastam: uma de fundo, uma de texto, uma de destaque e talvez um neutro. A paleta vem da identidade visual básica do negócio. Se ainda não existe uma, comece por como escolher a cor de uma marca. Para postagens do dia a dia, a mesma lógica aparece em paleta de cores para o feed do Instagram.

Falhas que estragam uma capa

• Texto sobre foto sem tratamento. É o erro número um. Use camada, faixa ou área calma.
• Letra fina em fundo colorido. Fontes finas perdem contraste visual. Prefira peso médio ou negrito.
• Cores demais no mesmo banner. Se há três destaques, nenhum se destaca.
• Texto no canto cortado. Cada plataforma corta de um jeito. Mantenha o essencial no centro.
• Esquecer quem não distingue as cores. Não use só a cor para diferenciar uma oferta. Acompanhe com texto ou forma.
• Usar a cor de outra marca por parecer boa. Sua capa precisa ser reconhecida como sua.

Conferência antes de postar a capa

• O texto principal passa de 3 para 1 de contraste (ou 4,5 para 1 se for pequeno).
• Há uma só cor de destaque.
• A região do texto está livre da foto de perfil e dos cortes do aplicativo.
• Olhei no celular, com o brilho médio.
• Salvei os códigos HEX para repetir na próxima arte.

Para começar, abra a sua última arte, escolha só a palavra mais importante e meça o contraste dela contra o fundo exatamente naquele ponto.