Deixe seu site mais legível

Sofia Emelianova

Importante:o texto com baixo contraste é o principal problema de acessibilidade na Web. Em fevereiro de 2022, 83,9% das milhões de páginas iniciais mais acessadas tinham esse problema. Confira o relatório WebAIM Million 2022 para saber mais.

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:

• Descubra problemas de contraste. Use o painel CSS Overview, a guia Issues (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 de inspeção e selecione as cores sugeridas pelo Seletor de cores para corrigir a taxa de contraste.
• Emular deficiências visuais. Analise seu site da mesma forma que seus usuários.

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:

   • Visão geral do CSS
   • (Pré-lançamento) Issues
   • Farol

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.

   

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

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

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

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.
   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.

   

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 > 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 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.
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. Por exemplo, na 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 viewport. As ferramentas do desenvolvedor mostram uma dica para esse elemento.

   

   Observe o sinal de 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.

   

   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 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.

   

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.

   

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:

• Copiar todas as mudanças de CSS de uma só vez e colar no código
• Considere configurar um espaço de trabalho que permita que as Ferramentas do desenvolvedor salvem arquivos diretamente nas suas fontes.

A seguir

Saiba mais:

• Saiba mais sobre acessibilidade em geral
• Acessibilidade de cor e contraste em particular