Design em modo escuro: fundos, cor e contraste

Design em modo escuro significa criar um conjunto separado de valores para superfícies, texto, destaques e imagens, e não inverter as cores do modo claro. Fundos escuros mudam o comportamento da cor: matizes saturados parecem mais pesados, as sombras somem, o texto branco forte ofusca e os gradientes lisos fazem banding. A boa notícia é que as mesmas propriedades deixam os temas escuros lindos quando bem tratadas: a cor brilha, a profundidade parece em camadas e o conteúdo fica calmo à frente.

Por que evitar fundos de preto puro

O preto puro, #000000, com texto branco puro dá o contraste máximo possível de 21:1. Parece ideal, mas muitas vezes é desconfortável: muitos leitores veem o texto claro estourar ou vibrar contra o preto puro, sobretudo em trechos longos. O preto também não deixa lugar mais escuro para ir, então você não consegue mostrar uma superfície abaixo da outra. E em alguns celulares OLED, o conteúdo que rola sobre preto verdadeiro pode deixar um rastro breve quando os pixels ligam. Por esses motivos, as diretrizes do Material Design do Google usam #121212 como superfície escura de base.

Mostrando elevação com luminosidade

No modo claro, as sombras separam um cartão da página. Num fundo escuro, uma sombra escura quase não aparece. Por isso os temas escuros invertem a lógica: quanto mais perto de quem vê, mais clara é a superfície. A página é a mais escura, os cartões são um degrau mais claros, menus e diálogos ainda mais claros. Mantenha os degraus pequenos e constantes e acrescente uma borda fina num tom um pouco mais claro onde duas superfícies parecidas se encontram.

Cor do texto e contraste no modo escuro

Use um off-white como #e6e8ec no texto corrido em vez de branco puro. Ele ainda dá contraste altíssimo, 15:1 sobre #121417, e ofusca menos. O texto secundário pode descer a um cinza-médio, mas confira: #9aa1ad fica em 7,1:1 na mesma superfície e em 5,5:1 num cartão mais claro. A WCAG pede pelo menos 4,5:1 para texto normal, seja qual for o tema; o contraste de cores explica como conferir.

Dessaturando as cores de destaque

Um violeta forte como #7c3aed funciona como botão sobre branco. Numa superfície escura ele parece pesado e mede só 3,2:1, baixo demais para links de texto. O tom mais claro #a78bfa mede 6,8:1 sobre o mesmo fundo e continua lendo como a mesma cor da marca. A regra geral: deixe os destaques mais claros e um pouco menos saturados nos temas escuros e mantenha o matiz.

Gradientes no design em modo escuro

Fundos escuros são onde os gradientes brilham. Um fundo profundo faz a cor parecer luz e não tinta, e é por isso que brilhos, auroras e misturas neon aparecem tanto sobre quase-preto. Mantenha a maior parte da superfície escura e deixe a cor surgir em um ou dois lugares: um brilho atrás do herói, uma borda de gradiente num cartão em destaque, uma lavagem suave no topo da página.

O problema é o banding. Esmaecimentos escuros e lentos usam poucos tons distintos numa tela de 8 bits, então os degraus ficam visíveis. Uma camada leve de grão os esconde; veja o banding em gradientes e, para a web, a textura de ruído em CSS. Para fundos construídos inteiramente no escuro, os fundos de gradiente escuros trazem paletas.

Construindo o modo escuro em CSS

Defina as cores uma vez como propriedades personalizadas e troque os valores por tema. O color-scheme diz ao navegador para renderizar os próprios controles e barras de rolagem no tema correspondente, e a função light-dark() escolhe entre dois valores conforme o esquema ativo.

:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}

Ofereça um botão manual além de seguir a configuração do sistema e lembre de tudo que vai além da interface: gráficos, ilustrações, logotipos e e-mail precisam ser conferidos nos dois temas. Os gradientes em e-mail mostram como os apps de e-mail tratam o modo escuro.

Uma checklist de modo escuro

• Superfícies em cinza-escuro, não preto puro, com um degrau claro de luminosidade por elevação.
• Texto corrido off-white com alto contraste; texto secundário ainda acima de 4,5:1.
• Destaques mais claros e suaves, mantendo o matiz da marca.
• Bordas, e não sombras, para separar superfícies parecidas.
• Cor usada como luz em poucos lugares, não em todos.
• Grão em gradientes escuros grandes para evitar o banding.
• Logotipos com uma versão clara para fundos escuros; veja o logotipo sobre fundo de gradiente.
• Os dois temas revisados num celular de verdade, numa sala escura e à luz do dia.