Verifique se há problemas de contraste com o tema escuro e o tema claro

Ao testar a acessibilidade das cores, pode haver diferentes temas de cores de exibição que você precisa testar quanto a problemas de contraste.

A maioria dos sistemas operacionais vem com um modo escuro e um modo claro. Sua página da Web pode reagir a essa configuração do sistema operacional usando uma consulta de mídia CSS. Você pode testar esses temas e testar sua consulta de mídia CSS sem precisar alterar a configuração do sistema operacional, usando a seção Emular mídia CSS prefers-color-scheme na ferramenta Renderização .

Como exemplo, a página da Web de demonstração de teste de acessibilidade inclui um tema claro e um tema escuro. A página de demonstração herda a configuração de tema claro ou escuro do sistema operacional. Se usarmos o DevTools para simular o sistema operacional sendo definido para um esquema leve e, em seguida, atualizarmos a página da Web de demonstração , a ferramenta Problemas mostrará seis problemas de contraste de cores em vez de dois. (Você pode ver números diferentes.)

Para emular a seleção de um usuário do tema de cores preferido:

  1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

  2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

  3. Pressione Esc para abrir o painel Visualização Rápida na parte inferior do DevTools.

  4. Na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas (o ícone Mais ferramentas) e selecione Renderização. A ferramenta Renderização é aberta no painel Visualização Rápida .

  5. Role para baixo até a lista suspensa Emular CSS media feature prefers-color-scheme e selecione prefers-color-scheme: light. A página da Web é renderizada novamente usando light-theme.css:

    Usando a ferramenta Renderização para simular um modo claro e disparar o outro tema do documento

  6. No painel Visualização rápida , selecione a ferramenta Problemas e expanda a seção Acessibilidade . Dependendo de vários fatores, você pode receber Insufficient color contrast avisos. Na seção RECURSOS AFETADOS do problema, há 6 elementos com contraste de cor insuficiente:

    Novos problemas de contraste detectados devido à alteração do tema claro

    Na página de demonstração, a seção de status de doação da página não pode ser lida no modo claro e precisa ser alterada:

    A seção Status da doação tem problemas de contraste no modo claro

  7. No DevTools, abra a ferramenta Elementos e pressione Ctrl+F no Windows/Linux ou Command+F no macOS. A caixa de texto Localizar é exibida para pesquisar na árvore HTML DOM:

    A caixa de texto Localizar da árvore DOM na ferramenta Elementos

  8. Insira o esquema. As seguintes consultas de mídia CSS são encontradas e os arquivos CSS correspondentes agora podem ser atualizados:

    <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
<link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">

Confira também

  • Last updated on