Deixe seu site mais legível

Sofia Emelianova

GitHub

Importante:o texto de baixo contraste é o principal problema de acessibilidade na Web. Em fevereiro de 2022, 83,9% dos milhões de páginas iniciais tiveram esse problema. Confira o relatório "WebAIM Million 2022" (em inglês) para saber mais.

Os textos de baixo contraste tornam o site menos legível para todos os usuários, ainda mais para usuários 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 problemas de contraste. Use o painel Visão geral do CSS, a guia Problemas (pré-lançamento) ou um relatório do Lighthouse para conferir uma lista de todos os problemas.
• Corrigir problemas de contraste. Confira os problemas com uma dica no modo do inspetor e selecione as cores que o seletor de cores sugere para corrigir a taxa de contraste.
• Emule deficiências visuais. Veja seu site como os usuários o veem.

Descubra textos de baixo contraste

Para descobrir textos de baixo contraste:

1. Abra o DevTools na sua página. Neste tutorial, use esta página de demonstração.

2. Veja uma lista de todos os problemas de contraste usando um dos três painéis:

   • Visão geral do CSS
   • (Prévia) Problemas
   • Farol

Problemas de contraste no painel CSS Overview

Para ter uma visão geral:

1. Abra Visão geral do CSS.
2. Ter 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.

   

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

(Visualização) Problemas de contraste na guia "Issues"

Observação:esse é um recurso em fase de pré-lançamento desativado por padrão.

Para ver uma lista de problemas, faça o seguinte:

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 automático de problemas de contraste no painel "Problemas".
   4. Clique em Reload DevTools no prompt da parte superior.
2. Abra a guia "Problemas".

3. Abra os problemas de contraste encontrados pelo DevTools, abra a tabela de elementos e clique em um link ao lado do elemento.

   

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

Problemas de contraste em um relatório do Lighthouse

Para executar um relatório:

1. No DevTools, abra Mais guias > Lighthouse.
2. Gere um relatório do Lighthouse com as seguintes configurações:
   • Modo: navegação (padrão)
   • Categorias: Acessibilidade
   • Dispositivo: computador
3. Clique em Analisar o carregamento de página e aguarde até que o Lighthouse gere 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.
5. Corrija o problema conforme descrito na seção Corrigir texto 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 CSS Overview, Issues ou no relatório Lighthouse. O DevTools leva você ao painel Elementos e seleciona o elemento correspondente. Por exemplo, nesta página de demonstração, o primeiro elemento afetado é h1.line1.

2. Clique em Inspect no canto superior direito do DevTools e passe o cursor sobre o elemento na janela de visualização. O DevTools mostra uma dica para esse elemento.

   

   Observe o sinal de alerta ao lado do valor da taxa de contraste na dica. A taxa de contraste mede a diferença no 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, expanda a seção Taxa de contraste.

   

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

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

   

5. Para escolher uma cor manualmente, arraste o círculo na visualização das nuances. Para permanecer no nível AA ou AAA, escolha uma cor abaixo da linha superior ou inferior, respectivamente.

   

6. Da mesma forma, corrija todos os problemas de contraste encontrados no painel CSS Overview, na guia Problemas ou no relatório Lighthouse.

Salve as alterações.

Para salvar as mudanças feitas no DevTools:

• Copie todas as alterações de CSS de uma só vez e cole-as no seu código.
• Considere configurar um espaço de trabalho que permita que o DevTools salve arquivos diretamente nas origens.

A seguir

Saiba mais:

• Saiba mais sobre acessibilidade em geral
• Acessibilidade específica de cor e contraste