O modo escuro se tornou o padrão em quase todos os sites e aplicativos – os usuários adoram, ele economiza bateria em telas OLED e às vezes é até visto como “mais acessível”. Mas mudar para uma paleta de cores escuras, se feito sem pensar cuidadosamente, pode prejudicar a acessibilidade. Este artigo explica como fazer isso direito.
Resumindo – o que este artigo cobre
Quando o modo escuro ajuda na acessibilidade
Para usuários com sensibilidade à luz (fotofobia), enxaquecas ou cansaço visual digital, um fundo escuro pode reduzir significativamente o desconforto durante o uso prolongado, especialmente em um ambiente escuro. Alguns usuários com dislexia também relatam uma leitura mais confortável em um fundo escuro.
Quando realmente dói
Por outro lado, para usuários com astigmatismo (uma deficiência visual comum), o texto claro em um fundo escuro cria um efeito de "halation" que faz as letras parecerem desfocadas - às vezes, um fundo claro com texto escuro é na verdade mais confortável para eles lerem. Resultado: não existe uma resposta certa para todos, e é por isso que a melhor solução é deixar o usuário escolher, e não forçar um modo a ele.
💡 Um ponto importante
Mais importante: nunca confie apenas na configuração automática do sistema (`prefers-color-scheme`) sem dar ao usuário uma maneira de alternar manualmente no próprio site — nem todo mundo cujo sistema está no modo escuro deseja que o site fique escuro e vice-versa.
O contraste no modo escuro é diferente do modo claro
Um erro comum: tirar as mesmas cores do texto do modo claro e simplesmente mudar o fundo para escuro, sem verificar novamente as taxas de contraste. O preto puro (#000000) sobre branco puro proporciona um contraste máximo de 21:1 — mas o inverso, branco puro sobre preto puro, cria um efeito de "halation" especialmente forte que cansa os olhos. É melhor usar um fundo cinza escuro (por exemplo #121212) em vez de preto puro e texto esbranquiçado (por exemplo #e8e8e8) em vez de branco puro - isso ainda atende aos requisitos de contraste das WCAG (explicados em detalhes em nosso guia sobrecontraste de cor), mas é significativamente mais agradável à vista.
Regras práticas
- Verifique o contraste separadamente em cada modo — claro e escuro — e não apenas uma vez.
- Evite cores especialmente saturadas (vermelho brilhante ou azul) em um fundo escuro — elas tendem a "vibrar" visualmente e dificultam a leitura.
- Mantenha uma alternância manual no site, não apenas confie na configuração do sistema.
- Verifique imagens e logotipos projetados para um fundo claro — às vezes eles precisam de uma versão separada para o modo escuro para permanecerem legíveis.
Seus documentos também estão prontos para o modo escuro?
Muitos arquivos PDF hoje são abertos no modo escuro de aplicativos de leitura — nossa ferramenta verifica se o contraste do texto em seus documentos atende ao padrão em todos os modos.
Examine seu site gratuitamente ←Após a digitalização, você também pode tornar os documentos encontrados acessíveis direta e gratuitamente viaAccessiDoc.