Teste e corrija o contraste de cores do seu site (WCAG)

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

A WCAG (Web Content Accessibility Guidelines) é um conjunto de diretrizes sobre acessibilidade para conteúdos disponíveis na internet, que apresenta recomendações para tornar o conteúdo acessível aos usuários, principalmente portadores de necessidades especiais.

Uma das recomendações diz que elementos de texto devem ter contraste de cores suficiente em relação ao plano de fundo. Muitas vezes é difícil ter certeza se o contraste está correto, por isso é importante testar.

Se preferir, acesse "Teste e corrija o contraste de cores do seu site (WCAG)" no YouTube.

Como testar e corrigir o contraste de cores

Você pode usar a ferramenta Google Lighthouse para analisar o contraste dos textos, identificando possíveis itens fora da recomendação WCAG, além de fazer uma auditoria completa de outros itens relacionados com acessibilidade.

Com os itens do site identificados, o próximo passo é pegar exatamente as cores usadas e seus códigos em Hexadecimal. Cada tom de cor tem um código relacionado, por exemplo, #3FB50D é um tom de verde.

Você pode usar o navegador Chrome para identificar os códigos. Clique com o botão direito do mouse no elemento do site e depois em Inspecionar. Irá aparecer uma janela com as propriedades do elemento, inclusive sua cor.

Com os códigos das cores identificadas, você pode fazer simulações para corrigir o contraste. Uma ferramenta que permite isso é a Color Contrast Analyzer, disponível no site da Deque University.

É só informar as cores de fundo e texto até chegar na configuração ideal de contraste.

Com as novas cores em mãos, basta alterar o código-fonte do site e garantir acessibilidade para leitura de texto por pessoas com limitações físicas ou leitores de tela.