Boas Práticas para Paletas de Cores em Modo Escuro

O primeiro tema escuro que publiquei foi, vendo agora, um desastre. Agarrei na nossa UI clara, passei todas as cores por um filtro de "inversão", ajustei alguns valores à mão e dei o dia por encerrado. Parecia ótimo no Figma. Depois chegaram os pedidos de apoio: texto que "zumbia", botões de marca que brilhavam como rebuçados radioativos, cartões que se fundiam todos numa única folha plana de escuridão. A lição ficou. Uma boa paleta de cores em modo escuro não é uma paleta clara virada do avesso. É um problema de design por direito próprio, com regras próprias, e a maioria dessas regras contraria os seus instintos.

É isto que eu gostava que alguém me tivesse dito antes daquela primeira tentativa.

O modo escuro não é uma inversão

Quando inverte um tema claro, todas as relações que o faziam funcionar ficam baralhadas. Texto branco sobre um botão azul-marinho pode ser perfeito, a 8:1 de contraste, no modo claro; inverta-o e pode acabar num botão pálido com texto cinzento que falha por completo a acessibilidade. As sombras, que carregam grande parte da profundidade nas UIs claras, basicamente desaparecem num fundo escuro — uma sombra de preto a 10% sobre uma superfície quase preta é invisível. Cores saturadas que parecem confiantes e simpáticas no branco tornam-se agressivas e vibrantes no preto.

Por isso, o modelo mental que uso é este: um tema escuro é um conjunto separado de decisões de design que, por acaso, partilha o mesmo layout e a mesma marca. Está a voltar a resolver contraste, hierarquia, profundidade e cor de acento a partir do zero, sobre uma tela escura. Se as suas ferramentas lhe permitem manter dois conjuntos de cores (os tokens semânticos são a forma limpa de o fazer — mais sobre isso no nosso artigo sobre tokens de cor para design systems), é neste momento que isso compensa.

Use cinzento escuro, não preto puro

Este é o erro mais comum de todos, e vale a pena perceber porque é que o preto puro falha, em vez de simplesmente lhe dizerem para o evitar.

O preto puro (#000000) combinado com texto branco puro (#FFFFFF) pontua tecnicamente 21:1 — o rácio de contraste máximo possível. Pensaria que o contraste máximo é o objetivo. Não é. Essa diferença extrema de luminância provoca halação: num fundo escuro, a pupila dilata-se para deixar entrar mais luz, e o texto claro espalha-se e esborrata-se nas margens. Para pessoas com astigmatismo — uma fatia grande da população — o efeito transforma parágrafos numa papa luminosa e cansativa. Sessões longas de leitura tornam-se genuinamente desconfortáveis.

Há um segundo problema, mais prático. Se a sua camada base for #000000, não tem para onde ir para baixo. Não consegue tornar uma superfície mais escura do que o preto, por isso qualquer sensação de profundidade recuada desaparece, e as sombras não têm onde cair.

A solução é começar a partir de um cinzento muito escuro. O Material Design da Google recomenda #121212 como superfície escura de base e, depois de anos a construir estas coisas, acho que está perto da perfeição. É escuro o suficiente para ser lido como "modo escuro", mas deixa margem em ambas as direções. Para o texto, troque o branco puro por um branco-sujo na faixa #E0E0E0 a #F2F2F2. Branco sobre #121212 a esse nível continua a ultrapassar a WCAG com folga, ao mesmo tempo que mata o brilho da halação.

Uma paleta neutra de partida a que recorro com frequência:

• Fundo base: #121212
• Texto principal: #E6E6E6 (ênfase alta)
• Texto secundário: #A8A8A8 (ênfase média, ainda bem acima de 4.5:1)
• Texto desativado / de sugestão: à volta de #6E6E6E

Um truque subtil: dê aos seus cinzentos escuros uma ligeiríssima tonalidade na direção da matiz da sua marca, em vez de usar cinzentos puramente neutros. Uma base de #131316 com um toque de azul, ou #14110F com um pouco de calor, parece intencional e com marca, em vez de um tema por omissão. Mantenha-o subtil — alguns pontos de saturação, no máximo.

Transmita elevação com superfícies mais claras, não com sombras

No modo claro, um cartão flutua acima da página por causa da sua sombra. No modo escuro, as sombras quase não se notam, por isso invertemos a lógica: quanto mais elevada estiver uma superfície, mais clara fica. Um modal é mais claro do que o cartão que cobre, que é mais claro do que a página atrás dele.

O Material formaliza isto como uma sobreposição de elevação — uma camada branca semitransparente aplicada por cima da superfície base, ficando mais opaca à medida que a elevação aumenta (cerca de 0% na base até por volta de 16% no nível mais alto). Não tem de implementar literalmente a matemática da sobreposição; pode simplesmente cozer os resultados em tokens discretos. Uma escala que já publiquei e em que confio:

• Nível 0 (página): #121212
• Nível 1 (cartões): #1E1E1E
• Nível 2 (menus, painéis elevados): #242424
• Nível 3 (caixas de diálogo, modais): #2C2C2C
• Nível 4 (popovers, folhas superiores): #333333

Cada passo é apenas uns quantos pontos mais claro, e essa contenção importa — os saltos devem ser sentidos, não anunciados. Usado de forma consistente, isto dá à sua interface profundidade real sem uma única sombra, e resolve a queixa do "está tudo a fundir-se" que assolou a minha primeira tentativa. Pode ainda sobrepor uma sombra ténue para uma separação extra, mas é a mudança de luminosidade que faz o trabalho pesado.

Dessature as suas cores de acento

Agarre na cor-estrela da sua marca — digamos, um azul vibrante de SaaS como #2563EB — e largue-o sobre um fundo #121212. Vibra. Cores muito saturadas contra um campo escuro produzem um zumbido ótico, e muitas vezes falham no contraste para texto ou ícones, ainda que pareçam estridentes.

A solução é contraintuitiva: puxe a saturação para baixo e a luminosidade para cima. A orientação do Material é usar tons mais claros (pense na faixa 200–50 de uma escala de cor) e dessaturá-los até passarem os 4.5:1 contra a superfície escura. Na prática, dessaturo as cores de marca em cerca de 20–40% para o modo escuro e clareio-as, e depois verifico o número.

Concretamente, esse #2563EB pode tornar-se algo como #7AA2F7 no modo escuro — mais suave, mais claro e muito mais legível contra a superfície escura. O seu acento do modo claro e o seu acento do modo escuro são irmãos, não o mesmo valor. É exatamente este tipo de exploração emparelhada claro/escuro para que o gerador de paletas de cores foi feito: escolha a sua matiz e depois ajuste a saturação e a luminosidade enquanto vê o número de contraste atualizar-se ao vivo.

Algumas ressalvas honestas:

• Mantenha as cores semânticas reconhecíveis. O vermelho de erro, o verde de sucesso e o âmbar de aviso ainda precisam de ser lidos como vermelho, verde e âmbar depois de os dessaturar. Clareie e suavize, mas não desvie a matiz tão longe que um erro deixe de parecer perigo.
• Grandes preenchimentos de cor são diferentes de texto. Um grande banner de destaque saturado aguenta mais saturação do que uma pequena etiqueta, porque não está a pedir a ninguém que leia texto miúdo a partir dele.
• Não aplique sobreposições de elevação a superfícies coloridas. Um botão com a cor primária mantém a sua cor ao longo dos níveis de elevação; só as suas superfícies neutras clareiam à medida que sobem.

Mantenha o contraste WCAG — em ambas as direções

Os objetivos de acessibilidade não mudam no escuro. A WCAG 2.1 exige 4.5:1 para texto corrido normal e 3:1 para texto grande (e para componentes de UI e ícones relevantes). O que muda é que as falhas são mais traiçoeiras.

A armadilha que vejo com mais frequência é o texto cinzento de tom médio — algo como #888888 sobre #121212 — que parece elegante e falha em silêncio para texto secundário. Calcule sempre os números reais. A referência oficial é a orientação de contraste da WCAG do W3C, e qualquer verificador de contraste (incluindo o que está integrado no nosso gerador de paletas de cores) dá-lhe o rácio em segundos.

Duas coisas a saber enquanto testa. Primeira, "mais contraste é sempre melhor" é falso no modo escuro — o branco puro maximiza o número mas desencadeia a halação que descrevi, por isso está a otimizar para uma legibilidade confortável, não para o rácio mais alto possível. Segunda, a próxima geração da norma, a WCAG 3.0, substitui o rácio simples pelo APCA (o Advanced Perceptual Contrast Algorithm), que modela como o olho realmente perceciona texto claro e escuro e lida muito melhor com a polaridade. Ainda está em rascunho, por isso publique hoje em conformidade com a WCAG 2.1, mas se quiser preparar-se para o futuro, passe a sua paleta escura por um verificador APCA como teste de sanidade — é notavelmente mais honesto em relação a fundos escuros.

Teste-o onde as pessoas o usam de verdade

Uma paleta escura pode passar todas as verificações no Figma e ainda assim falhar no mundo real. A variável que mais subestimei no início foi o próprio ecrã: os painéis OLED apresentam #000000 com píxeis verdadeiramente desligados e um contraste brutal contra o texto iluminado, enquanto os LCD mais baratos clareiam os pretos e esbatem os seus passos de elevação cuidadosamente afinados. A paleta que parece estratificada no seu monitor pode parecer plana no portátil económico de outra pessoa.

A minha lista de verificação de testes, aprendida da maneira difícil:

• Veja num telemóvel OLED real, com brilho baixo, à noite. É aqui que a halação e a saturação excessiva se revelam. Se for confortável aqui, é confortável em todo o lado.
• Confira os passos de elevação num LCD barato. Se os seus cartões desaparecerem no fundo, os seus passos são demasiado subtis.
• Alterne ao vivo entre claro e escuro. Flashes bruscos de luminosidade costumam indicar que a sua base escura é demasiado clara ou a sua base clara demasiado cinzenta.
• Olhe para ela com imagens e conteúdo de utilizador. Fotos reais, avatares e media incorporado assentam nas suas superfícies e podem chocar de formas que um mockup limpo nunca mostra.
• Confirme que os estados de foco e as molduras sobrevivem. Molduras subtis de 1px que definiam campos no modo claro muitas vezes desaparecem no escuro e precisam de um valor mais claro.

A versão curta

Se tivesse de comprimir tudo num punhado de movimentos: comece a partir de #121212, nunca de #000000. Use texto branco-sujo, não branco puro. Mostre profundidade clareando as superfícies elevadas, já que as sombras quase não existem aqui. Dessature e clareie os seus acentos até deixarem de zumbir e começarem a passar no contraste. Mantenha a linha nos 4.5:1 para texto corrido, mas resista à tentação de perseguir o máximo. E teste num ecrã OLED real, numa sala escura, porque esse é o único ambiente que os seus mockups nunca conseguirão simular.

Feito como deve ser, um tema escuro não é apenas uma opção simpática para os notívagos — é uma versão mais calma e focada do seu produto. Só exige que o trate como o problema de design distinto que é de facto.