Não inverta sua paleta clara. Um tema escuro funciona quando o fundo é um cinza escuro e não preto puro, o texto é um branco suavizado e não branco puro, as cores de destaque são mais claras e menos saturadas que as versões do modo claro, e cada par de texto e fundo é medido de novo, porque passar em um tema não diz nada sobre o outro.
Por que inverter uma paleta clara dá errado?
A inversão vira a luminosidade de cabeça para baixo e deixa todo o resto igual, e várias coisas de uma paleta não sobrevivem a isso. Um azul médio que era a coisa mais escura numa página branca vira a mais apagada numa preta. Um tom pálido usado em estados de hover e fundos de cartões vira um quase preto que some na página. Uma sombra, que era uma mancha escura sob um cartão branco, não tem o que escurecer.
O melhor enquadramento é que um tema escuro é uma segunda paleta que compartilha matizes com a primeira. Você mantém o matiz de cada cor para a marca continuar reconhecível, e escolhe de novo luminosidade e saturação para o novo fundo. Se sua paleta clara foi construída com uma escala de passos do muito claro ao muito escuro, o tema escuro em grande parte escolhe outros passos da mesma escala.
Branco puro sobre preto puro é um problema?
É o contraste máximo que a fórmula permite, 21:1, e é por isso que pode ser uma escolha ruim. Grandes áreas de texto branco sobre preto dão as letras mais brilhantes possíveis contra o fundo mais escuro possível. Alguns leitores, entre eles pessoas com astigmatismo, relatam que texto brilhante sobre um fundo muito escuro parece brilhar e borrar nas bordas. Quão comum isso é, e o quanto importa para uma pessoa e um ambiente específicos, não está resolvido, então trate como um motivo para testar e não como uma regra.
O remédio habitual é barato. Um cinza escuro como #121212 para a página e um branco suavizado como #E6E6E6 para o texto do corpo ainda dão 15,0:1, bem acima do nível 7:1 da faixa mais rigorosa da WCAG. Branco sobre #121212 é 18,7:1. Você abre mão de pouquíssimo contraste e tira a aspereza. Uma página de preto puro tem um argumento real a favor: em algumas telas OLED os pixels pretos ficam desligados. Se isso importa para você é uma questão de bateria, não de legibilidade.
Por que cores saturadas parecem erradas sobre fundo escuro?
Porque uma cor que parecia calma sobre branco parece estridente sobre escuro. Um azul ou vermelho vivo contra um fundo quase preto vibra, e o mesmo valor hex parece mais intenso quando está cercado de escuridão. A solução a que os designers recorrem é clarear o destaque e tirar um pouco de saturação, para que ele recue em vez de saltar para a frente. Isso se faz cor por cor a olho, e se confere depois, porque clarear muda o número que você está prestes a medir.
Um efeito colateral a esperar: a versão escura de uma cor de marca é outro valor hex, mesmo devendo ser reconhecivelmente a mesma cor. Isso significa dois valores para manter em cada cor que você usa, o mesmo custo que vem com um segundo espaço de cor mais amplo. Um conversor de cores ajuda aqui porque o HSL deixa você manter o matiz e mover só a luminosidade e a saturação, e depois entrega o código hex para colar.
As razões de contraste do modo claro se mantêm?
Não. A fórmula da WCAG é simétrica, então os limites são os mesmos nos dois temas: 4,5:1 para texto do corpo e 3:1 para texto grande e componentes de interface. O que muda é quais das suas cores os alcançam. Estes são cálculos reais contra #121212:
| Cor do texto | Sobre branco | Sobre #121212 |
|---|---|---|
#1D4ED8 (azul) | 6,70:1, passa | 2,80:1, falha |
#93B4FF (azul mais claro) | cerca de 2,1:1, falha | 9,11:1, passa |
#DC2626 (vermelho) | 4,83:1, passa | 3,88:1, falha para texto do corpo |
#6B7280 (cinza) | 4,83:1, passa | 3,88:1, falha para texto do corpo |
O azul é a linha instrutiva. É uma cor de link perfeitamente boa numa página branca e ilegível na escura, e seu substituto mais claro tem o perfil oposto. Nenhum está errado; pertencem a temas diferentes. O texto secundário costuma ser a baixa, já que um cinza apagado escolhido para ser discreto sobre branco muitas vezes é a primeira coisa a cair abaixo de 4,5:1 quando a página escurece.
Para testar um par, cole os dois valores hex num verificador de contraste. Se a cor do texto falhar, o botão de ajuste move a luminosidade da sua cor, mantendo matiz e saturação, até chegar a 4,5:1, e informa o novo hex. Sobre um fundo escuro ele clareia, que é a direção que você quer. Os limites e o que conta como texto grande estão em que razão de contraste você precisa para um texto legível.
Como mostrar profundidade quando sombras não funcionam?
Uma sombra escura sobre uma página escura é quase invisível, então falta a forma habitual de dizer que uma superfície está acima de outra. Um substituto comum é deixar as superfícies elevadas um pouco mais claras que a página: um cartão um ou dois passos mais claro que o fundo, um menu mais claro que o cartão. É uma convenção que muitos sistemas de design usam, não um padrão, e tem um limite. Se você empilha níveis demais, a superfície mais clara começa a parecer outro tema. Dois ou três passos costumam bastar, e cada um é mais um fundo contra o qual seu texto precisa passar.
Cada cor de superfície multiplica os pares que você precisa conferir. Teste suas cores de texto contra a superfície mais escura e a mais clara em que vão ficar, e se passarem nas duas pontas, passam no meio.
O que as ferramentas daqui podem e não podem fazer
O verificador de contraste aceita só códigos hex de seis ou três dígitos. Ele não lê strings rgb(), hsl() ou oklch(), ignora a transparência, então uma cor de texto semitransparente precisa ser achatada sobre o fundo antes do teste, e implementa a WCAG 2, não a APCA. Ele confere um par que você fornece. Não gera um tema escuro, e não avisa que uma cor parece áspera. O conversor de cores converte uma cor sRGB entre HEX, RGB e HSL e nada mais. As duas rodam inteiramente no seu navegador, e nada do que você digita é enviado.
Qual formato usar para escrever seus tokens é outra pergunta, tratada em qual formato de cor usar. A luminosidade do HSL não é brilho percebido, então uma luminosidade que funciona para um matiz não funcionará para outro. Meça cada cor.
Com uma paleta escura em mãos, passe cada par de texto e superfície pelo verificador de contraste, e use o conversor de cores para levar um valor hex ao HSL e de volta enquanto ajusta. As duas trabalham com as cores que você cola e as mantêm no seu navegador.
Se você ainda está decidindo de quantas cores a paleta precisa, como escolher uma paleta de cores que funciona trata de neutros e estados, nos quais um tema escuro se apoia mais que um claro.
Perguntas frequentes
O modo escuro deve usar preto puro no fundo?
Normalmente um cinza bem escuro como #121212 funciona melhor. O preto puro com texto branco puro dá o contraste máximo de 21:1, que alguns leitores acham áspero em trechos longos. O único argumento a favor do preto puro é que algumas telas OLED desligam os pixels pretos, o que é uma questão de bateria e não de legibilidade.
Por que minhas cores parecem brilhantes demais no modo escuro?
A mesma cor saturada parece mais intensa cercada de escuridão do que sobre branco. A solução habitual é usar no tema escuro uma versão mais clara e menos saturada de cada destaque, mantendo o matiz para a marca continuar reconhecível. Meça o resultado depois, porque mudar a luminosidade muda a razão de contraste.
As regras de contraste da WCAG valem para o modo escuro?
Sim, com os mesmos limites: 4,5:1 para texto do corpo e 3:1 para texto grande e componentes de interface. A fórmula é simétrica, então trocar texto e fundo dá a mesma razão. Uma cor que passa sobre fundo branco pode falhar sobre um escuro, então cada tema é conferido separadamente.
Posso simplesmente inverter meu tema claro para ter um escuro?
Dá um ponto de partida utilizável e um resultado fraco. A inversão vira só a luminosidade, então destaques de tom médio perdem contraste, tons pálidos viram fundos quase pretos que somem e as sombras deixam de funcionar. Trate o tema escuro como uma segunda paleta com os mesmos matizes e luminosidade e saturação escolhidas de novo.
Última atualização 5 de outubro de 2026
