Compartilhar via

Verificar o contraste da cor do texto no estado predefinido com a ferramenta Inspecionar

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

Para elementos com texto, a sobreposição de informações da ferramenta Inspecionar mostra o seguinte:

  • A proporção de contraste do texto em comparação com as cores de fundo.
  • Um ícone de marca de marcar 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 definição do browser como tema claro ou tema escuro.

Por exemplo, na página Web de demonstração de teste de acessibilidade, as ligações azuis do menu de navegação da barra lateral têm contraste suficiente, mas a ligação Cães verdes na secção Doação status não tem contraste suficiente. Examine esses elementos com a ferramenta Inspecionar , da seguinte forma:

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

  4. Na página Web composta, paire o cursor sobre a ligação Gatos azul do menu de navegação da barra lateral. É apresentada a sobreposição de informações da ferramenta Inspecionar . Na secção Acessibilidade da sobreposição de informações, é apresentada uma marca de verificação verde na linha Contraste , indicando que este elemento tem contraste suficiente entre a cor do texto e a cor de fundo:

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

  5. Na página Web composta, na secção Estado da Doação , paire o cursor sobre a ligação Cães . A sobreposição de informações da ferramenta Inspecionar mostra um ponto de exclamação laranja na linha Contraste , indicando que este elemento não tem contraste suficiente de texto versus cores de fundo:

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

Diferentes opções para inspecionar o contraste de cor do texto em DevTools

Utilize as seguintes funcionalidades de DevTools para inspecionar o contraste entre cores de texto:

  • Utilize a ferramenta Inspecionar (como uma sobreposição de informações na página 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 secçã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. Esta abordagem é descrita no artigo atual.

  • A ferramenta Problemas comunica automaticamente quaisquer problemas de contraste de cores para toda a página Web, quando o texto e a cor de fundo não contrastam o suficiente. Esta abordagem é descrita em Verificar se as cores de texto têm contraste suficiente.

  • Emular um estado não predefinido, como o hover estado . Para tal, clique no botão Ativar /Desativar Estado do Elemento (:hov) no painel Estilos , que apresenta a secção Forçar estado do elemento . Esta funcionalidade está descrita em Verificar a acessibilidade de todos os estados dos elementos.

Confira também