Verifique o contraste da cor do texto no estado padrão usando a ferramenta Inspecionar

Verifique o contraste da cor do texto no estado padrão usando a ferramenta Inspecionar . A sobreposição de informações da ferramenta Inspecionar na página da Web tem uma seção de Acessibilidade que inclui informações de Contraste .

Para elementos que têm texto, a sobreposição de informações da ferramenta Inspecionar mostra o seguinte:

  • A taxa de contraste do texto versus as cores da tela de fundo.
  • Um ícone de marca de seleção verde para elementos com contraste suficiente.
  • Um ícone de alerta amarelo para elementos que não têm contraste suficiente.

Em alguns casos, o contraste é afetado pela configuração do navegador como tema claro ou tema escuro.

Por exemplo, na página da Web de demonstração de teste de acessibilidade, os links azuis do menu de navegação da barra lateral têm contraste suficiente, mas o link verde Cães na seção status de doação não tem contraste suficiente. Examine esses elementos usando a ferramenta Inspecionar , da seguinte maneira:

  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. Clique no botão Inspecionar (botão Inspecionar) no canto superior esquerdo do DevTools para que o ícone seja realçado (azul).

  4. Na página da Web renderizada, passe o mouse sobre o link azul Gatos do menu de navegação da barra lateral. A sobreposição de informações da ferramenta Inspecionar é exibida. Na seção Acessibilidade da sobreposição de informações, uma marca de seleção verde aparece na linha Contraste , indicando que esse elemento tem contraste suficiente entre a cor do texto e a cor da tela de fundo:

    Os itens de menu têm contraste suficiente, como mostrado na ferramenta Inspecionar

  5. Na página da web renderizada, na seção Status da doação , passe o mouse sobre o link Cães . A sobreposição de informações da ferramenta Inspecionar mostra um ponto de exclamação laranja na linha Contraste , indicando que esse elemento não tem contraste suficiente de texto em relação às cores da tela de fundo:

    Um elemento que não tem contraste suficiente, como mostrado pelo aviso na ferramenta Inspecionar

Opções diferentes para inspecionar o contraste da cor do texto no DevTools

Use os seguintes recursos do DevTools para inspecionar o contraste da cor do texto:

  • Use a ferramenta Inspecionar (como uma sobreposição de informações na página da Web) para marcar se um elemento de página individual tem contraste de cor de texto suficiente. A sobreposição de informações da ferramenta Inspecionar inclui uma seção Acessibilidade que tem uma linha de informações de Contraste . A ferramenta Inspecionar mostra apenas informações de contraste de texto para o estado atual. Essa abordagem é descrita no artigo atual.

  • A ferramenta Issues relata automaticamente qualquer problema de contraste de cor para toda a página da Web, quando o texto e a cor da tela de fundo não contrastam o suficiente. Essa abordagem é descrita em Verifique se as cores do texto têm contraste suficiente.

  • Emular um estado não padrão, como o hover estado. Para fazer isso, clique no botão Alternar estado do elemento (:hov) no painel Estilos , que exibe a seção Forçar estado do elemento . Esse recurso é descrito em Verificar a acessibilidade de todos os estados dos elementos.

Confira também

  • Last updated on