Ratios de Contraste WCAG Explicados
Entende o que significam 4.5:1, 7:1 e 3:1. Aprende a testar contraste e garante…
Ler maisPaletas de Cores para Modo Escuro
Como escolher combinações de cores que funcionam bem em fundos escuros, mantendo legibilidade e impacto visual. Inclui exemplos práticos que passam nos testes de contraste WCAG.
Por que as cores importam no modo escuro
Desenhar para modo escuro não é apenas inverter as cores do teu design claro. É uma abordagem completamente diferente. Os mesmos tons que funcionam brilhantemente durante o dia podem parecer desgastados ou até invisíveis à noite.
O grande desafio? Manter a legibilidade sem sacrificar a estética. Precisas de cores vibrantes o suficiente para destacarem-se contra fundos escuros, mas não tão saturadas que causem fadiga visual. É um equilíbrio delicado, e é por isso que muitos designers lutam com isto.
Entender contraste é fundamental
Antes de escolheres qualquer cor, precisas compreender ratios de contraste. A WCAG 2.1 estabelece padrões claros: texto normal precisa de pelo menos 4.5:1 de contraste para ser acessível. Texto grande (18pt+) pode funcionar com 3:1.
Isto significa que em modo escuro, cores muito claras funcionam melhor. Um azul pálido (#a8d5ff) sobre preto (#000000) dá-te um racio de 7.8:1 — excelente. Mas um azul mais saturado pode cair para 4.2:1, deixando margem mínima para erro.
A boa notícia? Há ferramentas. WebAIM, Contrast Ratio, e até extensões de browser fazem isto rapidamente. Não precisas de calcular manualmente.
Combinações que funcionam bem
Estas paletas foram testadas e passam facilmente nos requisitos WCAG.
Azul Minimalista
Fundo muito escuro com texto branco e acentos azuis. É simples, profissional, e o azul funciona bem para ações e destaques.
Ciano Energético
Ciano brilhante contra fundo escuro cria contraste forte (8.2:1). Ótimo para CTAs e elementos interativos que precisam atenção imediata.
Verde Equilibrado
Verde esmeralda (#10b981) oferece contraste de 6.1:1 contra fundo escuro. Transmite sucesso e é menos agressivo que ciano.
Técnicas práticas para implementação
Escolher cores é uma coisa. Implementá-las bem é outra. Existem três abordagens principais que funcionam:
1. Variáveis CSS com temas
Define variáveis CSS para modo claro e modo escuro. Muda o :root baseado numa classe body.dark-mode. Isto torna tudo escalável e fácil de manter.
2. Teste antes de publicar
Usa ferramentas como o Contrast Ratio ou a extensão WebAIM para cada combinação. Não confies apenas na tua perceção visual — as ferramentas não mentem.
3. Ajusta para diferentes contextos
Cores em botões, links, e avisos precisam de tratamento diferente. Um link em azul pode funcionar, mas precisa de contraste adequado contra o fundo.
Erros comuns a evitar
Vemos estes problemas constantemente em modo escuro. O primeiro erro? Usar cores demasiado saturadas. Um vermelho vibrante (#ff0000) pode parecer agressivo contra fundo preto. Ajusta para #ff6b6b — mantém o impacto, reduz a fadiga.
O segundo erro é esquecer o contraste em elementos secundários. Apenas porque o texto principal tem 7:1 de contraste não significa que os rótulos de formulário podem ter 3:1. Todos os elementos de texto precisam do mesmo cuidado.
O terceiro erro é não testar em diferentes condições de iluminação. Testa a tua paleta num quarto escuro, numa sala bem iluminada, e até ao ar livre. A mesma cor comporta-se diferente consoante a luz ambiente.
Ferramentas que recomendamos
Estas aplicações tornam a seleção de cores muito mais rápida e confiável.
WebAIM Contrast Checker
Insere dois valores hexadecimais e obtém o racio exato. Gratuito e fiável.
Coolors.co
Gera paletas harmónicas automaticamente e verifica contraste para ti.
Axe DevTools
Extensão de browser que analisa problemas de acessibilidade em tempo real.
ColorOracle
Simula como as cores aparecem para pessoas com daltonismo.
O próximo passo: testa a tua paleta
Não esperes até publicar para descobrir que as tuas cores não funcionam. Testa agora com uma das ferramentas acima. Verifica cada combinação — fundo com texto, fundo com ícones, fundo com elementos interativos.
O modo escuro não é apenas uma tendência. É uma necessidade para muitos utilizadores. Quando fizeres bem, o teu design não apenas fica bonito — fica acessível. E isso importa.
Informação importante
Este artigo é um guia educacional sobre seleção de cores para modo escuro. As recomendações baseiam-se em padrões WCAG 2.1 e melhores práticas da indústria. Os requisitos de acessibilidade específicos podem variar consoante a jurisdição e o tipo de conteúdo. Para projetos críticos, consulta com um especialista em acessibilidade.
Artigos relacionados
