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 Guia
Design Acessível em Portugal
Modo Escuro e Claro:
Modo Escuro e Claro:
Tudo o que Precisas Saber
Cria interfaces que funcionam em ambos os temas, mantendo contraste perfeito e acessibilidade garantida.
4.5:1
Ratio Contraste Mínimo
7:1
Ratio para Texto Pequeno
50+
Combinações Testadas
O Conceito
Por Que Modo Escuro e Modo Claro Importam
Não é apenas uma tendência de design — é acessibilidade, usabilidade e preferência do utilizador tudo junto.
Desafios Reais do Design Dual
Criar dois temas que funcionam bem não é só copiar e inverter cores. As paletas precisam de ser pensadas — uns tons que parecem perfeitos no escuro ficam pálidos no claro, e vice-versa.
Depois há os ícones. Uma ilustração que fica linda em branco sobre preto pode ficar invisível em branco sobre cinzento. O peso do traço, os detalhes pequenos, tudo muda.
E não te esqueças dos ratios de contraste. A WCAG não é sugestão — é standard. 4.5:1 para texto normal, 7:1 para texto pequeno, 3:1 para elementos gráficos. Se não cumpres, o site não é acessível.
- Paletas que funcionam em ambos os temas
- Ícones e ilustrações adaptáveis
- Contraste WCAG garantido
- Preferências do utilizador respeitadas
O Que Aprenderás Aqui
Guias práticos, exemplos reais e técnicas que podes usar já nos teus projetos.
Paletas de Cores
Como escolher tons que funcionam em claro e escuro. Incluindo combinações testadas e ferramentas para testar as tuas.
Ratios de Contraste
Entende 4.5:1, 7:1, 3:1. O que significam, quando usá-los, e como testá-los com ferramentas online gratuitas.
Ícones Adaptáveis
Técnicas para criar ícones que não ficam invisíveis num tema nem parecem estranhos noutro. Peso de traço, detalhes, tudo.
Preferências do Utilizador
Como respeitar prefers-color-scheme no CSS. Dá ao utilizador controlo — e fá-lo feliz com a experiência.
Testes Prácticos
Ferramentas gratuitas para verificar contraste, simular daltonismo e testar os teus designs antes de enviar.
Implementação CSS
Código pronto a usar. CSS variables, media queries, toggle de tema — tudo documentado e explicado.
Como Começar com Temas Dual
Quatro passos simples para implementar modo escuro e claro no teu projeto.
01
Planifica a Paleta
Começa por definir 5-7 cores principais que funcionam em ambos os temas. Testa cada combinação contra WCAG antes de começares a programar.
02
Define CSS Variables
Usa CSS variables para cores, não hardcoded. –color-bg-primary, –color-text-primary, etc. Muda tudo com uma linha de código.
03
Adapta Ícones e Ilustrações
Revê cada ícone nos dois temas. Alguns precisam de traço mais grosso, outros de detalhes ajustados. Não é preguiça — é bom design.
04
Testa e Itera
Usa ferramentas de contraste, pede feedback de utilizadores, testa em diferentes dispositivos. O detalhe faz a diferença.
Perguntas Frequentes sobre Contraste
Respostas rápidas para as dúvidas mais comuns sobre ratios e acessibilidade.
O que significa 4.5:1 em contraste?
É o ratio entre a luminância da cor de texto e a cor de fundo. 4.5:1 significa que o texto é 4.5 vezes mais luminoso (ou escuro) que o fundo. É o mínimo WCAG AA para texto normal. Não é complicado — usa uma ferramenta como WebAIM para testar.
Por que 7:1 para texto pequeno?
Texto pequeno é mais difícil de ler. Precisa de mais contraste. Se o teu corpo de texto é 12px ou menos, vai para 7:1. Se é 18px+ em bold ou 24px+ normal, 4.5:1 é suficiente.
Como testo contraste online?
Existem ferramentas gratuitas: WebAIM Contrast Checker, Coolors, Color Contrast Checker do TPGi. Copia a cor hex, cola a cor de fundo, e a ferramenta diz-te o ratio. Demora 30 segundos.
Ícones também precisam de 4.5:1?
Não exatamente. Elementos gráficos (ícones, linhas, bordas) precisam de 3:1. Mas é melhor ir mais alto se conseguires — deixa a interface mais clara para todos.
E se a minha cor favorita não passa?
Muda um bocado — torna o fundo mais escuro ou o texto mais claro. Ajustes pequenos fazem grande diferença. A acessibilidade não é castigo — é design bom.
prefers-color-scheme funciona em todos os browsers?
Sim. Funciona em Chrome, Firefox, Safari, Edge desde 2019. Podes usá-lo sem medo. E mesmo que alguém tenha um browser velho, a cor padrão vai funcionar — não quebra nada.
Guias Detalhados
Lê os guias completos e fica expert em design de temas escuros e claros.
Paletas
Acessibilidade
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 Guia
Design de Ícones
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 GuiaUsado por Designers em Portugal
Estúdios e equipas que confiam nestes princípios para criar interfaces acessíveis.
Design Studio
Digital Agency
Tech Startup
Creative Team
UI Workshop
Code Academy
Pronto para Dominar Design Dual?
Lê os guias, segue os passos, e cria interfaces que toda a gente consegue usar confortavelmente — em claro ou escuro.
Contacta-nos