Gerador de paleta para modo escuro
Crie um tema escuro com funções explícitas: fundo, superfície elevada, texto legível e destaque. Comece pelo exemplo CSS e confira as combinações que serão realmente usadas.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
Defina funções para as cores
Um tema escuro precisa de uma hierarquia própria. Separe o fundo das superfícies elevadas e teste texto e controles nos dois. Preserve o significado das cores de estado e ofereça uma forma clara de escolher o tema.
Uma paleta escura para experimentar em CSS
Visão geral do projeto
A superfície elevada separa este conteúdo do fundo. O texto principal, o secundário e a ação usam tokens de cores distintos.
Verificar as cores da ação:root[data-theme="dark"] {
--canvas: #111827;
--surface: #1F2937;
--text: #F9FAFB;
--text-secondary: #9CA3AF;
--accent: #93C5FD;
--on-accent: #111827;
}
body { background: var(--canvas); color: var(--text); }
.panel { background: var(--surface); }
.panel p { color: var(--text-secondary); }
.action { background: var(--accent); color: var(--on-accent); }Esta paleta é um ponto de partida, não uma certificação da interface inteira. O exemplo fixa as cores de texto e fundo para que você possa reproduzir as verificações.
Confira estes pares de texto e fundo
No nível AA das WCAG, texto normal geralmente precisa de 4,5:1 e texto grande de 3:1. Gráficos significativos e a informação visual necessária para reconhecer controles geralmente precisam de 3:1 em relação às cores adjacentes. Separadores decorativos não estão automaticamente sujeitos ao mesmo requisito.
Adapte a paleta à sua interface
- Gere tons a partir de #93C5FD e compare os estados de foco e de passagem do cursor.
- Use superfícies mais claras para separar seções quando fizer sentido. O modo escuro não exige preto puro nem proíbe branco puro.
- Confira texto, links e os limites necessários para identificar controles nos fundos reais. Teste novamente quando mudar cores ou transparências.
- Visualize a página real em diferentes tamanhos e com as preferências de tema do usuário. Acrescente rótulos e outras indicações às cores de estado.
Posso apenas inverter uma paleta clara?
A inversão pode alterar o significado das cores de estado e produzir destaques de baixo contraste. Escolha as cores por função, preserve o significado e meça os pares reais.
Texto branco puro é proibido no modo escuro?
Não. As WCAG não proíbem texto branco nem fundo preto. Escolha uma combinação adequada ao conteúdo e permita o uso do tema preferido. O contraste, sozinho, não resume o conforto de leitura.
Uma taxa alta de contraste torna todo o tema acessível?
Não. A verificação de contraste cobre pares de cores, não a navegação por teclado, os rótulos, a visibilidade do foco ou o restante da interface. Confira o produto final junto com seus tokens.