Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
Durante a maior parte da história da tipografia em tela houve uma única superfície de leitura: texto escuro sobre fundo claro, imitando o papel. O modo escuro mudou isso. Em poucos anos, ele passou de preferência de nicho entre desenvolvedores a configuração de sistema em todos os grandes sistemas operacionais, e os leitores agora chegam a uma página já tendo dito ao dispositivo qual polaridade desejam. A tipografia precisa responder em ambas as superfícies.
O que diz a pesquisa sobre polaridade
A polaridade de exibição — se o texto é escuro-sobre-claro (polaridade positiva) ou claro-sobre-escuro (polaridade negativa) — é estudada desde a era dos CRTs, e os achados têm sido bastante consistentes. Para leitura prolongada em iluminação comum, a polaridade positiva costuma medir melhor: estudos de revisão de texto, acuidade visual e velocidade de leitura tendem a favorecer texto escuro sobre fundo claro. A explicação predominante é fisiológica. Uma superfície clara contrai a pupila, e uma pupila menor produz uma imagem retiniana mais nítida, com maior profundidade de campo. Texto claro-sobre-escuro dilata a pupila e suaviza a imagem.
Esse é o caso geral, não o universal. O modo escuro conquista seu lugar em pelo menos três situações:
- Pouca luz ambiente. Uma página branca e brilhante em um quarto escuro ofusca, perturba a adaptação ao escuro e pode ser genuinamente desconfortável. Em ambientes de pouca luz, a polaridade negativa reduz o descompasso entre a tela e o entorno.
- Fotofobia e sensibilidade à luz. Leitores com sensibilidade à luz associada a enxaquecas, certos sintomas pós-concussão ou condições que tornam campos claros dolorosos frequentemente dependem de temas escuros para conseguir ler.
- Algumas condições de baixa visão. Leitores afetados por dispersão de luz — por cataratas ou meios oculares turvos, por exemplo — podem enxergar com mais clareza quando a luz total emitida pela página é reduzida. Usuários de lupas de tela e de alto contraste sempre incluíram um contingente claro-sobre-escuro exatamente por essa razão.
Halação e o problema do astigmatismo
A falha característica dos temas escuros é a halação: texto claro sobre fundo escuro parece brilhar, vazando para fora e borrando a letra. O efeito é mais forte com branco puro sobre preto puro, e é pior para leitores com astigmatismo — uma condição refrativa muito comum — cuja óptica imperfeitamente focada espalha ainda mais os traços claros. Os tipos finos sofrem mais, porque o halo consome uma parcela maior do traço.
Os remédios são diretos:
- Nunca use texto branco puro sobre preto puro. Suavize ambos os extremos: um cinza-claro sobre um cinza muito escuro reduz drasticamente o brilho, mantendo contraste amplo.
- Compense o peso aparente. Texto claro sobre fundo escuro parece mais encorpado do que o mesmo tipo invertido, porque os traços claros se espalham. O texto composto em tema escuro muitas vezes pode ser um pouco mais leve no peso — ou, com uma fonte variável, ajustado pelo grade (veja o capítulo seguinte), de modo que a correção não cause refluxo do texto.
- Não se limite a inverter a paleta clara. Um tema escuro projetado por negação costuma ter contraste demais no texto e de menos na interface. Ele deve ser projetado como composição própria, com seus próprios valores de contraste testados.
Respeitando a escolha do leitor
A media query prefers-color-scheme informa a preferência do leitor no sistema operacional, e honrá-la é a linha de base moderna. Um leitor que escolheu o modo escuro no nível do sistema expressou uma preferência — às vezes uma necessidade médica —, e um site que o atinge com uma página branca a atropelou. O inverso também vale: forçar um tema escuro sobre leitores que escolheram o claro é igualmente presunçoso. Ofereça um seletor na própria página, se quiser, mas adote como padrão a configuração do sistema, e lembre-se de definir ambos os temas por completo: um modo escuro estilizado pela metade, com texto escuro herdado sobre superfície escura, é pior do que nenhum.
O hardware sob a página
A própria tela é parte da superfície de leitura. Em telas OLED, pixels pretos ficam simplesmente desligados, o que significa que temas em preto absoluto economizam bateria — um benefício legítimo —, mas o chaveamento por pixel pode produzir um leve arrasto do texto claro durante a rolagem em alguns painéis, mais um argumento a favor do quase-preto em vez do preto absoluto. As telas de e-ink estão no outro extremo: são reflexivas, como o papel, não emitem luz e renderizam bem quase exclusivamente a polaridade positiva. Conteúdo com probabilidade de ser lido em e-readers jamais deve depender de um tema escuro para sua legibilidade.
Por que este capítulo é novo
Em 2005, telas escuras pertenciam aos terminais e à ficção científica; a web era branca, e a polaridade era uma questão resolvida porque os leitores não tinham como expressar uma preferência. Não havia configuração escura em todo o sistema, nem prefers-color-scheme, nem OLED no bolso do leitor. O modo escuro como superfície de leitura mainstream e controlada pelo usuário é um desenvolvimento da última década, e transformou a polaridade de nota de rodapé histórica em responsabilidade viva de design.
Em CSS
/* Design the dark theme; don't just invert the light one */
@media (prefers-color-scheme: dark) {
:root {
--paper: #171310; /* near-black — never #000 */
--ink: #ece5d6; /* off-white — never #fff (halation) */
}
img { filter: brightness(0.9); } /* dim plates to the surface */
}Recomendações
- Mantenha escuro-sobre-claro como superfície padrão para leitura longa; as evidências de leitura prolongada a favorecem.
- Honre
prefers-color-schemeem ambas as direções — trate a configuração do sistema como decisão do leitor. - Em temas escuros, evite branco puro sobre preto puro; suavize ambos os valores para controlar a halação.
- Reduza levemente o peso do tipo (ou baixe o grade) em temas escuros para compensar o encorpamento aparente.
- Projete a paleta escura de forma independente e verifique suas razões de contraste; não inverta o tema claro.
- Prefira superfícies quase pretas ao preto absoluto em OLED para limitar o arrasto na rolagem, a menos que a economia de bateria seja o objetivo explícito.
- Suponha que leitores de e-ink veem polaridade positiva; nunca torne o modo escuro estrutural.