Deixe seu site mais legível

Sofia Emelianova
Sofia Emelianova

Textos com baixo contraste tornam o site menos legível para todos os usuários, principalmente para aqueles com deficiência visual. O DevTools pode encontrar automaticamente problemas de baixo contraste e sugerir cores melhores para ajudar a corrigi-los.

Use o DevTools para:

Descobrir textos de baixo contraste

Para descobrir textos de baixo contraste:

  1. Abra o DevTools na página. Neste tutorial, use esta página de demonstração.
  2. Confira uma lista de todos os problemas de contraste usando um dos três painéis:

Problemas de contraste no painel "Visão geral do CSS"

Para ter uma visão geral:

  1. Abra a Visão geral de CSS.
  2. Capturar uma visão geral.
  3. Abra a seção Cores, role até Problemas de contraste e clique em um problema, se houver.
  4. Na tabela Problemas de contraste, passe o cursor sobre um elemento e clique no link ao lado dele.

    Lista de problemas de contraste na Visão geral de CSS.

  5. Corrija o problema conforme descrito na seção Corrigir textos de baixo contraste.

(Pré-lançamento) Problemas de contraste na guia "Problemas"

Para conferir uma lista de problemas:

  1. Ative a geração de relatórios de problemas de contraste na guia Problemas:
    1. Abra Configurações > Experimental.
    2. Na barra de filtro, pesquise contrast issue.
    3. Marque a opção Ativar o relatório de problemas de contraste automático no painel de problemas. Ative o relatório de problemas de contraste.
    4. Clique em Reload DevTools no prompt na parte de cima.
  2. Abra a guia "Problemas".
  3. Abra as questões de contraste encontradas pelas Ferramentas do desenvolvedor, abra a tabela de elementos e clique em um link ao lado do elemento.

    Tabela de elementos com problemas de contraste na guia "Problemas".

  4. Corrija o problema conforme descrito na seção Corrigir textos de baixo contraste.

Problemas de contraste em um relatório do Lighthouse

Para gerar um relatório:

  1. No DevTools, abra Mais guias. Mais guias > Lighthouse.
  2. Gere um relatório do Lighthouse com as seguintes configurações:
    • Modo: navegação (padrão)
    • Categorias: acessibilidade
    • Dispositivo: computador Relatório do Lighthouse com as configurações de navegação, acessibilidade e computador.
  3. Clique em Analisar a carga da página e aguarde o Lighthouse gerar o relatório.
  4. Role para baixo até a seção Contraste e, na lista de elementos, clique em um link para um elemento afetado. A seção "Contraste" do relatório do Lighthouse com uma lista de elementos que têm problemas de contraste.
  5. Corrija o problema conforme descrito na seção Corrigir textos de baixo contraste.

Corrigir texto de baixo contraste

Para corrigir um problema de baixo contraste:

  1. Encontre um problema de contraste e clique em um link para um elemento afetado no painel Visão geral de CSS, na guia Issues ou no relatório Lighthouse. As ferramentas de desenvolvimento levam você ao painel Elements e selecionam o elemento correspondente. Um elemento com um problema de contraste selecionado no painel "Elementos". Por exemplo, na página de demonstração, o primeiro elemento afetado é h1.line1.
  2. Clique em Inspecionar. Inspect no canto superior direito do DevTools e passe o cursor sobre o elemento na viewport. As ferramentas do desenvolvedor mostram uma dica para esse elemento.

    A dica mostra um sinal de aviso ao lado do valor de contraste.

    Observe o sinal de aviso Aviso. ao lado do valor da proporção de contraste na dica. A taxa de contraste mede a diferença de brilho entre as cores do primeiro plano (cor do texto) e do plano de fundo.

  3. Abra o Seletor de cores ao lado da declaração de cor do texto do elemento e, no Seletor de cores, abra a seção Taxa de contraste.

    A seção "Taxa de contraste" do seletor de cores.

    O seletor de cores informa que a proporção de contraste não atende aos níveis AA ou AAA das diretrizes do WebAIM.

  4. Clique no botão Usar a cor sugerida. Use suggested color ao lado do nível AAA. O seletor de cores aplica a cor do texto que obedece às diretrizes de taxa de contraste.

    A cor aplicada obedece às diretrizes.

  5. Como alternativa, para escolher uma cor manualmente, arraste o círculo na visualização das tonalidades. Para manter o nível AA ou AAA, escolha uma cor abaixo da linha superior ou inferior, respectivamente.

    Escolha uma tonalidade abaixo da linha de base para manter o nível AAA.

  6. Da mesma forma, corrija todos os problemas de contraste encontrados com o painel de visão geral do CSS, a guia "Issues" ou o relatório do Lighthouse.

Salve as alterações.

Para salvar as mudanças feitas nas Ferramentas do desenvolvedor:

A seguir

Saiba mais: