Modo escuro: cuidados com o contraste

No modo escuro valem os mesmos mínimos de contraste do modo claro: 4,5:1 para texto comum e 3:1 para texto grande, ícones e bordas de campos. A WCAG, as diretrizes de acessibilidade do W3C, não tem uma regra à parte para o tema escuro, e a versão atual, a WCAG 2.2 (outubro de 2023), manteve os valores de contraste. O que muda é onde as pessoas erram: cinzas que sobram no claro faltam no escuro, e cores vivas se comportam de outro jeito.

Este artigo cobre os cuidados de acessibilidade. A construção das duas paletas, passo a passo, está em paleta para modo claro e modo escuro.

A conta é a mesma, o resultado muda

A razão de contraste compara o brilho da cor mais clara com o da mais escura. Ela não liga para qual das duas é o texto. Por isso, a fórmula serve igual nos dois temas. Mas as cores que você usou no tema claro não funcionam por simples inversão.

Veja um cinza de texto secundário, #6B7280:

• Sobre branco #FFFFFF: cerca de 4,83:1. Passa no AA para texto comum.
• Sobre o fundo escuro #121212: cerca de 3,88:1. Não passa para texto comum.

A mesma cor, nos dois temas, deu resultados opostos. No tema escuro, o texto secundário precisa de um cinza mais claro, como #9CA3AF, que sobre #121212 dá cerca de 7,38:1.

Três cinzas de texto sobre o fundo #121212

Medidos sobre o fundo #121212:

Uso	Cor	Contraste
Texto principal	#E5E7EB	cerca de 15,13:1
Texto secundário	#9CA3AF	cerca de 7,38:1
Cinza que reprova no texto comum	#6B7280	cerca de 3,88:1

Branco puro sobre preto puro é o máximo possível: 21:1. Isso não significa que seja a melhor escolha. A WCAG só estabelece mínimos, e muitos projetos preferem um cinza muito escuro de fundo e um cinza claro de texto. Já a página do critério 1.4.8 lembra que pessoas com certas deficiências visuais ou cognitivas às vezes precisam de combinações incomuns ou de contraste mais baixo para ler com conforto. Por isso, o ideal é seguir a preferência do próprio usuário.

Cores vivas sobre fundo escuro

Cores saturadas, usadas em links, botões e destaques, mudam muito de contraste quando o fundo escurece.

• Um azul #2563EB sobre o fundo escuro #121212 dá cerca de 3,62:1. Não passa para texto comum.
• Um azul mais claro, #60A5FA, sobre o mesmo fundo dá cerca de 7,37:1. Passa com sobra.
• O âmbar #F59E0B sobre #121212 dá cerca de 8,72:1.

A regra prática é que, no tema escuro, as cores de destaque costumam precisar de uma versão mais clara que a do tema claro. Guarde as duas versões como pares aprovados.

O W3C faz um alerta específico: cores de comprimento de onda longo, como o vermelho, sobre fundo escuro podem ser difíceis para quem tem protanopia (um tipo de daltonismo). A página aconselha evitar vermelho sobre preto. O vermelho #FF0000 sobre preto dá cerca de 5,25:1, o que passa na conta mas é justamente o tipo de par que o W3C desaconselha. Para erros, prefira um vermelho mais claro e dessaturado, junto com texto e ícone. Detalhes em vermelho e verde: avisos sem confusão.

Bordas, ícones e foco

Os 3:1 de componentes de interface continuam valendo. No fundo #121212, uma borda de campo #6B7280 tem cerca de 3,88:1 e passa nesse critério, ainda que não sirva para texto. Confira também o anel de foco do teclado, que precisa ser visível no escuro. Mais sobre isso em contraste em botões, ícones e campos.

Cartões e painéis: cada fundo é uma nova medida

No tema escuro é comum usar tons de fundo diferentes: um para a página e outro, um pouco mais claro, para cartões e painéis. O texto que passava sobre a página pode não passar sobre o cartão. Sobre um cartão #252A31, os cinzas anteriores ficam assim:

• #E5E7EB: cerca de 11,66:1. Passa.
• #9CA3AF: cerca de 5,69:1. Passa no AA, mas fica abaixo do AAA.
• #6B7280: cerca de 2,99:1. Não passa para texto comum.

Por isso, meça o texto contra cada fundo em que ele aparece, e não contra um fundo “médio”.

Como oferecer o modo escuro do jeito certo

Há duas formas de entrar no escuro: por escolha do usuário em um botão do site, ou automaticamente, pela preferência do sistema operacional. A segunda é feita no CSS com o recurso prefers-color-scheme. Segundo a documentação do MDN, ele detecta se a pessoa pediu um tema claro ou escuro, a partir de uma configuração do sistema ou do navegador. O valor light indica que a pessoa pediu o tema claro ou não manifestou preferência, e dark indica que pediu o escuro.

Um esqueleto de CSS:

body { background: #FFFFFF; color: #202124; }

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #E5E7EB; }
}

Respeitar essa preferência é o caminho mais simples para quem depende do tema escuro para ler com conforto. O ideal é também deixar a pessoa trocar manualmente.

Do tema claro ao escuro: o site de uma livraria

1. Liste as cores do tema claro: fundo, texto, texto secundário, link, borda, botão.
2. Defina o fundo escuro, por exemplo #121212.
3. Escolha o texto principal e meça: #E5E7EB dá 15,13:1.
4. Ajuste o texto secundário até passar de 4,5:1. O #9CA3AF já resolve.
5. Clareie o link e o botão de destaque, como o #60A5FA, e meça de novo.
6. Meça as bordas e o foco contra o fundo, com meta de 3:1.
7. Olhe a página real. Aplicando a lição de como testar uma paleta antes de usar, teste com texto longo e em tela pequena.

Três falhas ao ligar o modo escuro

Inverter as cores automaticamente. Trocar claro por escuro de forma mecânica não garante que os pares passem.

Esquecer das imagens. Logos escuros em fundo escuro somem. Mantenha uma versão clara. Logos têm isenção de contraste para texto, mas a perda de visibilidade é um problema de uso.

Medir só o texto principal. Texto secundário, placeholders, bordas e ícones costumam falhar primeiro.

Próximo passo: abra o seu site no tema escuro, escolha os três cinzas mais usados e meça cada um contra o fundo da página e contra o fundo dos cartões.