Como escolher a cor principal sem perder contraste

Uma cor principal pode deixar a loja alegre, elegante ou acolhedora. Ela também precisa trabalhar bem com textos, botões e fundos. No layout SaaS, uma escolha feliz é aquela que destaca ações importantes sem dificultar a leitura de quem está comprando pelo celular.

Função

Use este guia para escolher ou revisar a cor principal da loja antes de aplicá-la em botões, links, títulos destacados e outros pontos oferecidos pelo layout. A meta é manter a personalidade da marca e proteger o contraste entre conteúdo e fundo.

Este artigo não cria um visual novo nem altera a estrutura do website. Ele ajuda a decidir uma cor dentro das opções do layout SaaS. Para organizar a identidade completa, veja Como configurar a marca da loja no painel com nome e identidade.

Como chegar

1. Entre no painel Interago e confirme o website em Meus websites.
2. Abra a área de identidade visual ou o editor de tema que o painel apresentar.
3. Quando a cor estiver aplicada em conteúdo de página, abra Menu → Páginas.
4. Para um bloco específico, use Menu → Editar Blocos ou o atalho Blocos dentro da página.
5. Use Testar para observar a cor em uma prévia antes de publicar.

Os nomes das áreas podem variar. Não procure uma ferramenta de edição estrutural que o seu painel não oferece. Escolha somente cores e campos apresentados pelo layout atual.

Passo a passo feliz

1. Comece pela cor que representa a marca

Escolha uma cor principal presente na identidade aprovada da loja. Se a marca tiver várias cores, selecione uma para ações principais e deixe as outras como apoio. Uma paleta curta facilita a manutenção e deixa a página respirar.

Registre a escolha em uma nota simples da equipe:

• cor principal para botões e ações;
• cor de apoio para pequenos destaques;
• cor de fundo preferida;
• cor do texto sobre fundo claro e sobre fundo escuro.

Não escolha somente pela aparência de uma amostra. A cor precisa funcionar no botão, no link, no título e na leitura de uma página inteira.

2. Veja texto e fundo juntos

Faça quatro testes com o seletor que o painel oferecer:

Se o texto parecer fraco, não resolva apenas aumentando a saturação. Teste uma variação mais escura, um fundo mais claro ou a combinação de texto que o próprio layout sugerir.

3. Proteja a leitura em situações reais

Confira a cor em tela clara, em tela pequena e sobre imagens que o layout permita usar. Não coloque texto colorido sobre uma foto movimentada sem o apoio visual oferecido pelo bloco. Evite usar somente a cor para indicar erro, sucesso ou seleção. Sempre que a tela oferecer texto, ícone ou rótulo, mantenha esse apoio.

Uma conferência rápida:

• leia um título a uma distância confortável;
• toque no botão pelo celular e identifique sua ação;
• compare link visitado e link não visitado, quando o layout mostrar os dois;
• veja se a cor não parece um aviso de erro;
• peça a outra pessoa para apontar a ação principal sem explicação.

4. Aplique com moderação

Use a cor principal nos pontos que merecem atenção: ação principal, link importante, selo ou pequeno destaque. Não pinte todos os blocos. Quando tudo chama atenção, nada guia a visita.

Se um bloco permitir escolher sua própria cor, compare-o com o restante da página. Prefira o padrão do layout quando ele já mantém contraste e espaçamento equilibrados.

5. Salve, teste e publique

1. Salve a configuração ou o bloco.
2. Use Testar em tela grande e pequena.
3. Abra a Home, uma página institucional e uma página de conteúdo.
4. Clique nos botões e links principais.
5. Publique quando a leitura estiver aprovada.
6. Acesse Menu → Atualizar → Páginas quando o painel indicar essa ação.
7. Confira a loja pública como visitante.

Sinais de uma boa escolha

• A ação principal aparece sem gritar.
• O texto continua nítido sobre o fundo.
• Os links são reconhecidos sem depender apenas da cor.
• O botão continua fácil de tocar no celular.
• Fotos, logo e cor parecem parte da mesma marca.
• A cor funciona em páginas diferentes, não somente na Home.

Checklist final

• [ ] A cor vem da identidade aprovada da loja.
• [ ] Existe uma cor principal e poucas cores de apoio.
• [ ] Botões, links, títulos e fundos foram testados juntos.
• [ ] A leitura foi conferida em tela grande e pequena.
• [ ] A ação principal não depende somente da cor.
• [ ] A cor não esconde texto sobre imagens.
• [ ] A configuração foi salva, publicada e atualizada quando necessário.
• [ ] Home e páginas internas foram abertas como visitante.

Artigos relacionados

• Como configurar a marca da loja no painel com nome e identidade
• Como atualizar logo e favicon pela Galeria de Mídias
• Como manter a consistência visual nas páginas SaaS
• Layout no painel: páginas e blocos (SaaS)
• Montar e ajustar páginas com blocos