Pedido para não forçar o uso do modo escuro

• Por favor, não forcem o modo escuro

  • Este é um pedido aos designers de sites para que não forcem o modo escuro aos usuários.
  • Se o modo escuro faz parte da identidade da marca, deve-se escolher uma proporção de contraste confortável para o texto.
  • Muitos sites são projetados apenas em modo escuro, o que muitas vezes dificulta a leitura.

• Meus olhos! Meus olhos! 😵‍💫

  • Ler em modo escuro causa esforço visual e, mesmo depois da leitura, deixa imagens residuais na visão.
  • Depois de ler textos longos, há incômodos como enxergar listras horizontais.

• Qual é o verdadeiro problema do modo escuro?

  • O verdadeiro problema do modo escuro é a proporção de contraste entre o texto e o fundo.
  • A proporção de contraste entre texto branco puro e fundo preto é de 21:1, o que sobrecarrega os olhos.
  • Em contrapartida, texto em cinza claro sobre fundo cinza escuro é mais confortável para os olhos, com uma proporção de contraste de 4.34:1.

• Não existe nenhuma diretriz sobre isso?

  • As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 recomendam uma proporção de contraste mínima de 4.5:1 para texto comum, mas não há diretriz sobre proporção máxima.
  • Atualmente, não existe padrão nem diretriz para altas proporções de contraste no modo escuro.
  • O futuro WCAG 3.0 adiciona um novo requisito exploratório sobre "contraste máximo de texto" e espera-se que isso ajude a resolver o problema das altas proporções de contraste no modo escuro.

• Quando aproveito o modo escuro

  • Em telas OLED, ao ler em um quarto escuro, especialmente antes de dormir no celular, há preferência pelo modo escuro.
  • A maioria das IDEs já vem com um modo escuro que oferece, por padrão, uma proporção de contraste confortável.
  • O modo escuro é agradável quando os sites oferecem uma proporção de contraste confortável nesse modo.

• Referência: Este texto gerou uma discussão ativa e perspicaz no Hacker News, com diferentes pontos de vista, experiências pessoais e questões de acessibilidade sendo debatidos. Para compreender plenamente as nuances desse tema, vale não deixar passar as perspectivas valiosas compartilhadas na thread do Hacker News.

[GN⁺]

Opiniões no Hacker News

• Os primeiros monitores de computador usavam texto claro sobre fundo escuro. Foi incômodo quando o Microsoft Windows mudou para texto preto sobre fundo branco. É bom ver a volta do modo escuro, e também são necessárias opções de modo claro que não sejam excessivamente brilhantes

• Se um site oferece apenas modo escuro, então esse é o tema do site. Para existir modo escuro, precisa haver modo claro. Não se deve forçar a manutenção dos dois modos

• O modo claro sem possibilidade de configuração padrão durou por muito tempo. O modo escuro só é melhor quando a tela é a única fonte de luz em um quarto escuro. O modo escuro é uma solução temporária, e o modo claro é difícil de ler em ambientes claros

• Um certo blog ignora a configuração do dispositivo e força o modo claro. O problema não é o modo escuro, mas o contraste de cores

• Não se deve impor uma taxa de contraste baixa. Nem todo usuário vê conteúdo em ambientes claros. É preciso aproveitar a gama de cores SDR

• Espero que os sites respeitem as configurações do sistema do usuário. Os navegadores deram controle demais aos desenvolvedores. As configurações do usuário deveriam ter prioridade

• Muitos desenvolvedores web definem o modo escuro como padrão e ignoram a preferência do usuário. É possível usar a propriedade CSS color-scheme para indicar em qual esquema de cores um elemento pode ser renderizado

• Como usuário de macOS, misturo modo escuro e modo claro conforme a situação. É possível mudar o tema pelas configurações do sistema

• O exemplo de "texto fácil de ler" do blog é difícil de ler. Isso acontece por causa do baixo contraste

• Pessoalmente, prefiro o modo claro, mas em IDEs ou no terminal uso tema escuro com o brilho no máximo. O modo escuro cansa mais os olhos e dificulta a concentração

• É possível usar a Web API para verificar se o usuário está em modo escuro. Também é possível aplicar regras de CSS com @media (prefers-color-scheme: dark)