Dicas do DevTools: descobrir e corrigir texto de baixo contraste

Sofia emelianova
Sofia Emelianova
GitHub

O texto de baixo contraste é o principal problema de acessibilidade na Web. Em fevereiro de 2022, 83,9% das principais páginas iniciais tiveram esse problema. Saiba mais no relatório da WebAIM Milan 2022 (em inglês).

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 proporção recomendados no Seletor de cores.

    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 taxa de contraste para seguir as diretrizes da WebAIM (em inglês).

    As linhas recomendadas de 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 (visualização) Problemas.

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

  • Emule deficiências visuais para entender como sua 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ática, consulte o tutorial Tornar seu site mais legível.

Para saber mais, veja: