Dicas do DevTools: descobrir e corrigir texto de baixo contraste

Sofia Emelianova
Sofia Emelianova
GitHub

Textos com baixo contraste são 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.

Com as Ferramentas para Desenvolvedores do Chrome, você descobre todos os problemas de contraste rapidamente e os corrige com um clique.

Assista ao vídeo para saber como:

  • Confira as taxas de contraste na dica de ferramenta do modo de inspeção e os valores de proporção 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 de proporção de contraste para obedecer às diretrizes do WebAIM.

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

  • Descubra todos os problemas de contraste nos painéis CSS Overview e Issues (pré-lançamento).

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

  • Emular deficiências visuais para entender como sua página fica para todos os usuários.

    Visão embaçada selecionada na guia "Rendering" e emulada na viewport.

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

Para saber mais, veja: