Site em modo escuro: como escolher cores e contraste sem errar

Sites em tema escuro passam sensação de sofisticação e combinam com produtos de tecnologia, IA, jogos e criatividade. Mas um tema escuro mal feito cansa os olhos, esconde o texto e deixa tudo achatado. Veja como acertar.

Não use preto puro

O preto absoluto (#000000) cria um contraste duro com o texto branco e faz as letras parecerem vibrar. Prefira um quase preto levemente colorido, como um cinza muito escuro com um toque de azul ou de marrom. Isso suaviza a leitura e dá mais refinamento.

Use tons de fundo em camadas: um mais escuro para a página, um pouco mais claro para os cartões e outro para as partes elevadas, como janelas e menus. A diferença sutil entre eles cria profundidade sem precisar de sombras pesadas.

Cuide do contraste do texto

Texto branco puro sobre fundo escuro também cansa. Use um branco levemente acinzentado para o texto principal e tons mais escuros de cinza para o texto secundário. A regra de acessibilidade pede um contraste mínimo entre texto e fundo, que na prática é fácil de conferir com ferramentas gratuitas de verificação de contraste.

Cuidados:

• Texto secundário muito escuro some. Teste em telas diferentes e em ambiente claro.
• Textos pequenos pedem mais contraste do que títulos.
• Cores saturadas sobre fundo escuro vibram. Reduza um pouco a saturação.

Escolha uma cor de destaque só

No tema escuro, uma única cor de destaque funciona melhor que várias. O laranja, o violeta e o verde-limão se destacam bem. Use-a para o botão principal, links e pequenos detalhes, e deixe o resto em tons neutros. Se tudo brilha, nada se destaca.

Um acento forte pode ganhar uma ajuda de movimento: um botão com brilho orbital chama atenção para a ação principal sem outras cores.

Use luz como textura

No escuro, o brilho vira ferramenta de design. Alguns recursos funcionam muito bem:

• Degradês sutis de cor nas bordas ou no fundo.
• Fundos com textura, como uma malha de pontos que reage ao mouse, discretos e sem competir com o texto.
• Bordas iluminadas em cartões, como os Cards Holofote.
• Destaques em degradê em palavras do título, como o Texto Aurora.

A regra é dosar: um ou dois efeitos por tela bastam.

Evite os erros comuns

• Imagens claras demais sobre o fundo escuro, que gritam. Ajuste o brilho ou use molduras.
• Sombras escuras que não aparecem. No escuro, use bordas finas e luz, em vez de sombra.
• Bordas muito fortes. Prefira linhas translúcidas, bem finas.
• Fundos animados pesados atrás de todo o texto, que prejudicam a leitura e o desempenho.
• Ignorar o modo claro quando o público espera escolha. Se oferecer os dois, teste os dois.

Fontes e espaçamento

Texto claro sobre fundo escuro parece mais fino do que o contrário. Dê um pouco mais de peso e de espaçamento entre linhas, e evite fontes muito finas em tamanho pequeno. Títulos grandes e bem espaçados são uma marca do visual escuro bem executado.

Como pedir para a IA

Aplique um tema escuro ao site: fundo quase preto (não use preto puro),
cartões num tom um pouco mais claro com borda fina e translúcida, texto
principal em branco acinzentado e secundário em cinza médio.
Use laranja como única cor de destaque. Verifique o contraste de todos
os textos e mantenha os efeitos de luz discretos.

Em resumo

Um bom tema escuro depende de camadas de cinza, texto levemente suave, uma só cor de destaque e luz usada com moderação. Veja exemplos nos fundos e nos cards da biblioteca, e confira também as dicas de animações leves e acessíveis.