Deixe seu site mais legível

Sofia Emelianova

Textos de baixo contraste tornam seu site menos legível para todos os usuários, ainda mais para aqueles com deficiências visuais. 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 receber uma lista de todos os problemas.
• Corrigir problemas de contraste. Visualize os problemas com uma dica de ferramenta no modo de inspetor e selecione as cores que o Seletor de cores sugere para corrigir a taxa de contraste.
• Emular deficiências visuais. Confira seu site da maneira como os usuários o veem.

Descobrir texto de baixo contraste

Para descobrir texto de baixo contraste:

1. Abra o DevTools na sua página.

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

   • Visão geral do CSS
   • (Pré-lançamento) Problemas
   • Lighthouse

Você pode fazer um teste abrindo nosso CodePen (link em inglês).

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

Para ter uma visão geral:

1. Abra a Visão geral do CSS.
2. Capture uma visão geral.
3. Abra a seção Cores, acesse 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.

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

Para receber 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 filtros, pesquise contrast issue.
   3. Selecione Ativar a geração automática de relatórios de problemas de contraste pelo painel "Problemas".
   4. Clique em Recarregar o DevTools no prompt na parte de cima.
2. Abra a guia Problemas.

3. Expanda os problemas de contraste encontrados pelo DevTools, depois 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 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 carregamento de página e aguarde o Lighthouse gerar o relatório.

4. Acesse a seção Contraste. 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 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, na nossa demonstração inacessível do CodePen, o primeiro elemento afetado é h1.line1.

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

   

   Observe o sinal de aviso ao lado do valor da taxa de contraste na dica de ferramenta. A taxa de contraste mede a diferença de brilho entre as cores de primeiro plano (cor do texto) e de 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 Usar a cor sugerida ao lado do nível AAA. O Seletor de cores aplica a cor do texto que está em conformidade com as diretrizes de taxa de contraste.

   

5. Como alternativa, para escolher uma cor manualmente, arraste o círculo na visualização de tons. 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 com o painel **Visão geral do CSS**, a guia **Problemas** , ou o relatório do **Lighthouse** .

Salvar as mudanças

Para salvar as mudanças feitas no DevTools:

• Copie todas as mudanças de CSS de uma só vez e cole-as no seu código.
• Configure um espaço de trabalho para permitir que o DevTools salve arquivos diretamente nas suas fontes.

A seguir

Saiba mais:

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