Deixe seu site mais legível

Sofia Emelianova

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.

Textos de baixo contraste tornam seu 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 (visualização) ou o 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 escolha as cores que o seletor de cores sugere para corrigir a taxa de contraste.
• Emule deficiências visuais. Analise o site como seus usuários o veem.

Descobrir 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. Confira 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 "Visão geral de CSS"

Para ter uma visão geral:

1. Abra a Visão geral do CSS.
2. Tenha 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 "Problemas"

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

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

1. Ative o relatório de problemas de contraste na guia Problemas:
   1. Abra Configurações > Experimental.
   2. Na barra de filtro, pesquise por contrast issue.
   3. Marque a opção Ativar os relatórios automáticos de problemas de contraste pelo painel "Problemas".
   4. Clique em Reload DevTools no comando na parte de cima.
2. Abra a guia "Problemas".

3. Expanda os problemas de contraste encontrados pelo DevTools, expanda 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 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 no link de 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 Visão geral do CSS, na guia Problemas ou no relatório do 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 aviso ao lado do valor da taxa 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, expanda a seção Taxa de contraste.

   

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

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

   

5. Como alternativa, para escolher uma cor manualmente, arraste o círculo na visualização das sombras. Para manter o 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 Issues ou no relatório Lighthouse.

Salve as alterações.

Para salvar as mudanças feitas no DevTools:

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

Qual é a próxima etapa?

Saiba mais:

• Aprender sobre acessibilidade em geral
• Acessibilidade de cor e contraste em particular