Paletas de Cores para Modo Escuro
Como escolher cores que funcionam bem em fundo escuro mantendo a legibilidade e o impacto visual. Inclui exemplos de combinações que passam em testes de contraste.
Ler ArtigoModo Escuro e Modo Claro em Portugal
Design de temas visuais, gestão de contraste e interfaces adaptáveis. Descobre como criar experiências que funcionam nos dois modos.
Artigos e Guias
Aprende tudo sobre design de temas duais, contraste e acessibilidade visual.
Ratios de Contraste WCAG Explicados
Entende o que significam 4.5:1, 7:1 e 3:1. Aprende a testar contraste e garante que o teu design é acessível para todos.
Ler Artigo
Adaptar Ícones e Ilustrações
Técnicas para criar ícones que funcionam em ambos os temas sem parecerem genéricos. Inclui dicas sobre peso de traço e detalhes que mudam.
Ler Artigo
Design do Toggle de Preferências
Como desenhar e implementar o botão de mudança de tema. Discute posicionamento, ícones intuitivos e transições suaves entre modos.
Ler ArtigoPrincípios Fundamentais
1
Contraste Primeiro
Nunca comeces com cores bonitas. Começa com ratios de contraste que passam em testes WCAG AA ou AAA. O design bonito vem depois da acessibilidade estar garantida.
2
Não Inverte Tudo
Modo escuro não é só inverter as cores. Alguns tons ficam desagradáveis quando invertidos. Ajusta saturação e luminância separadamente.
3
Testa Ambos os Modos
Não podes desenhar um tema e depois ajustar o outro. Precisa de trabalhar em paralelo. Abre ambos os temas lado a lado enquanto designs.
4
Respeita a Preferência do Utilizador
Lê a preferência do SO. Se alguém ativou modo escuro no telefone, a tua app deve respeitar isso automaticamente na primeira visita.
Ferramentas Úteis
Recursos que usamos e recomendamos para testar e desenhar temas duais.
WebAIM Contrast Checker
Testa ratios de contraste entre duas cores. Mostra-te logo se passes em AA ou AAA.
Coolors.co
Gera paletas de cores e deixa-te ajustar rapidamente. Tem modo de simulação de daltonismo incorporado.
Chrome DevTools
Usa o renderizador de media queries para prefers-color-scheme. Testa modo escuro direto no navegador.
Figma Color Variables
Define variáveis de cor que mudam entre temas. Sincroniza automaticamente em todo o projeto.