Dicas do DevTools: descobrir e corrigir texto de baixo contraste

Sofia Emelianova
Sofia Emelianova
GitHub

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.

O Chrome DevTools permite descobrir todos os problemas de contraste rapidamente e corrigi-los com um clique.

Assista ao vídeo para saber como:

  • Confira as taxas de contraste na dica do modo do inspetor e os valores de taxa recomendados no seletor de cores.

    As taxas de contraste estão disponíveis em uma dica, com um seletor de cores para medir a proporção de cores alternativas. As classificações AA e AAA da proporção estão disponíveis.

  • No Seletor de cores, selecione as cores sugeridas ou escolha uma cor abaixo das linhas da taxa de contraste para obedecer às diretrizes do WebAIM.

    As linhas recomendadas para a taxa de contraste estão disponíveis na visualização de tonalidades do seletor de cores.

  • Descubra todos os problemas de contraste nos painéis Visão geral do CSS e Problemas (visualização)

    Problemas de contraste listados no painel "Visão geral do CSS" e na guia "Problemas".

  • Emule deficiências visuais para entender como a página é exibida para todos os usuários.

    Visão borrada selecionada na guia "Renderização" e emulada na janela de visualização.

Para uma experiência de aprendizado mais prático, consulte o tutorial Tornar seu site mais legível.

Para saber mais, veja: