Partilhar via

Verificar se existem problemas de contraste com tema escuro e tema claro

Ao testar a acessibilidade de cores, pode haver temas de cor de apresentação diferentes que precisa de testar para problemas de contraste.

A maioria dos sistemas operativos inclui um modo escuro e um modo claro. A sua página Web pode reagir a esta definição do sistema operativo através de uma consulta de multimédia CSS. Pode testar estes temas e testar a sua consulta de multimédia CSS sem ter de alterar a definição do sistema operativo ao utilizar a secção Emular multimédia CSS prefers-color-scheme na ferramenta Composição .

Por exemplo, a página Web de demonstração de teste de acessibilidade inclui um tema claro e um tema escuro. A página de demonstração herda a definição de tema escuro ou claro do sistema operativo. Se utilizarmos DevTools para simular o sistema operativo que está a ser definido para um esquema de luz e, em seguida, atualizar a página Web de demonstração, a ferramenta Problemas mostra seis problemas de contraste de cores em vez de dois. (Poderá ver números diferentes.)

Para emular a seleção de um utilizador do tema de cores preferencial:

  1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

  2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

  3. Prima Esc para abrir o painel Vista Rápida na parte inferior de DevTools.

  4. Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas (o ícone Mais Ferramentas) e, em seguida, selecione Composição. A ferramenta de Composição é aberta no painel Vista Rápida .

  5. Desloque-se para baixo até à lista pendente Emular multimédia CSS prefers-color-scheme e, em seguida, selecione prefers-color-scheme: light. A página Web é re-composta com light-theme.css:

    Utilizar a ferramenta de Composição para simular um modo de luz e acionar o outro tema do documento

  6. No painel Vista Rápida , selecione a ferramenta Problemas e, em seguida, expanda a secção Acessibilidade . Dependendo de vários fatores, poderá receber Insufficient color contrast avisos. Na secção RECURSOS AFETADOS do problema, existem 6 elementos com contraste de cor insuficiente:

    Novos problemas de contraste detetados devido à alteração ao tema claro

    Na página Web de demonstração, a secção Doação status da página é ilegível no modo claro e tem de ser alterada:

    A secção Estado da Doação tem problemas de contraste no modo claro

  7. Em DevTools, abra a ferramenta Elementos e, em seguida, prima Ctrl+F no Windows/Linux ou Comando+F no macOS. É apresentada a caixa de texto Localizar , para procurar na árvore DOM HTML:

    A caixa de texto Localizar para a árvore DOM na ferramenta Elementos

  8. Introduza o esquema. Foram encontradas as seguintes consultas de multimédia CSS e os ficheiros CSS correspondentes podem agora 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