Design em modo escuro: fundos, cor e contraste

Design em modo escuro significa construir um conjunto separado de valores para superfícies, texto, acentos e imagens, e não inverter as cores do modo claro. Os fundos escuros mudam o comportamento da cor: os matizes saturados parecem mais pesados, as sombras desaparecem, o texto branco brilhante encadeia e os gradientes suaves criam faixas. A boa notícia é que as mesmas propriedades tornam os temas escuros bonitos quando bem tratadas: a cor brilha, a profundidade parece feita de camadas e o conteúdo fica calmamente à frente.

Porque 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 espalhar-se ou vibrar sobre preto puro, sobretudo em passagens longas. O preto também não deixa nada mais escuro para onde ir, e por isso não dá para mostrar uma superfície abaixo de outra. E nalguns telemóveis OLED, o conteúdo que se desloca sobre preto verdadeiro pode deixar um rasto breve quando os píxeis acendem. As diretrizes do Material Design da Google usam #121212 como superfície escura de base por estas razões.

Mostrar 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 se vê. Por isso os temas escuros invertem a lógica: quanto mais perto de quem vê está uma superfície, mais clara é. A página é a mais escura, os cartões são um degrau mais claros, os menus e diálogos mais claros ainda. Mantém os degraus pequenos e coerentes e junta uma borda fina num tom ligeiramente mais claro onde duas superfícies parecidas se encontram.

Cor do texto e contraste no modo escuro

Usa um branco-sujo como #e6e8ec no texto corrido em vez de branco puro. Continua a dar um contraste muito alto, 15:1 sobre #121417, e encadeia menos. O texto secundário pode descer para um cinzento médio, mas verifica: #9aa1ad mantém 7,1:1 sobre a mesma superfície e 5,5:1 sobre um cartão mais claro. A WCAG pede pelo menos 4,5:1 para texto normal, seja qual for o tema; o guia de contraste de cor explica como verificar.

Dessaturar as cores de acento

Um violeta forte como #7c3aed funciona como botão sobre branco. Numa superfície escura parece pesado e mede apenas 3,2:1, baixo demais para ligações em texto. O seu tom mais claro #a78bfa mede 6,8:1 sobre o mesmo fundo e lê-se como a mesma cor da marca. A regra geral: passa os acentos para mais claros e um pouco menos saturados nos temas escuros, mantendo o matiz.

Gradientes no design em modo escuro

Os 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 néon aparecem tantas vezes sobre quase preto. Mantém a maior parte da superfície escura e deixa a cor aparecer em um ou dois sítios: um brilho por trás de um cabeçalho, uma margem em gradiente num cartão em destaque, uma mancha suave no topo de uma página.

O problema são as faixas. Os desvanecimentos escuros e lentos usam poucos tons distintos num ecrã de 8 bits, e os degraus tornam-se visíveis. Uma camada leve de grão esconde-os; vê faixas em gradientes e, para a web, textura de ruído em CSS. Para fundos construídos por inteiro no escuro, os fundos com gradiente escuro têm paletas.

Construir o modo escuro em CSS

Define as cores uma vez como propriedades personalizadas e troca os valores por tema. O color-scheme diz ao navegador para desenhar os seus próprios controlos e barras de deslocação 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);
  }
}

Dá às pessoas um interruptor manual além de seguir a definição do sistema, e lembra-te de tudo o que fica para além da interface: gráficos, ilustrações, logótipos e email precisam de ser verificados nos dois temas. Os gradientes em email explicam como as apps de correio tratam o modo escuro.

Uma lista de verificação do modo escuro

• Superfícies em cinzento escuro, não preto puro, com um degrau claro de luminosidade por elevação.
• Texto corrido em branco-sujo com contraste alto; texto secundário sempre acima de 4,5:1.
• Acentos 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 sítios, não em todo o lado.
• Grão nos gradientes escuros grandes para evitar faixas.
• Logótipos com uma versão clara para fundos escuros; vê o logótipo sobre um fundo em gradiente.
• Os dois temas revistos num telemóvel real, numa sala com pouca luz e à luz do dia.