Dark mode e acessibilidade: como construir interfaces inclusivas sem comprometer o design

O tema escuro virou expectativa: muita gente usa o celular e o computador em modo escuro o dia todo. Mas inverter as cores não basta. Texto cinza sobre fundo quase preto, vermelho de erro que some, foco invisível — o dark mode mal feito exclui justamente quem mais precisa de conforto visual.

Não use preto puro

Fundo #000 com texto branco puro cria um contraste agressivo que cansa a vista. Prefira um grafite (como o fundo deste site) e texto levemente quebrado, nunca branco absoluto.

Contraste mínimo, medido

A diretriz WCAG pede contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande e elementos de interface. Texto secundário em cinza é o que mais falha — veja como medir rápido em Contraste de cores e WCAG: como checar em cinco minutos.

Cores de estado precisam de outra versão

O verde de sucesso e o vermelho de erro do tema claro costumam ficar escuros demais no tema escuro. Cada cor de estado precisa de uma variante própria, testada sobre o fundo escuro.

Respeite o sistema, mas deixe escolher

:root { --bg: #fff; --text: #111; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a1a; --text: #ededE6; }
}

Use variáveis (tokens) para as cores — é a base de um design system (Design System na prática: como padronizar a UX/UI de produtos digitais ao nível Apple/Stripe) — e ofereça a troca manual para quem quiser.

O que mais quebra

• Foco invisível: o anel de foco precisa aparecer no escuro também (Navegação por teclado e focus-visible: o detalhe que separa sites amadores).
• Imagens e logos: PNGs com fundo branco viram retângulos estranhos; tenha versões para fundo escuro.
• Sombras: no escuro elas somem; use bordas sutis e camadas mais claras para dar profundidade.

No app também

O mesmo cuidado vale no iOS e no Android, com particularidades de cada sistema — tema de Dark mode no app: tema do sistema, contraste e imagens.

Interfaces acessíveis fazem parte do padrão dos sites e apps da We Codex. Fale com a gente.