Analisar o contraste de cores em uma página web

Hoje vamos te dar uma dica bem simples que vai ajudar melhorar o rankeamento do seu site no Web Vitals e ainda, vai ajudar a melhorar a qualidade do visual das suas páginas.

Vou pular toda a parte de teoria sobre as cores, mas o designer precisa sempre escolher uma paleta de cores e policiar os desenvolvedores, afim de garantir que a página está seguindo os padrões propostos.

Ter uma página com elementos de baixa taxa de contraste dificulta a legibilidade do conteúdo para o usuário final e com isso, a nota do site diminui nas métricas de accessibility (acessibilidade).

O que é Taxa de contraste

Taxa de contraste nada mais é do que a diferença entre a cor mais clara e a mais escura. Quanto maior a taxa de contraste, melhor, assim todos os usuários conseguirão visualizar o conteúdo da imagem.

Ferramenta para análise de contraste

Agora que a gente entendeu a importância de ter elementos com uma alta taxa de contraste, vamos ver como analisar as cores e suas informações diretamente pelas ferramentas dos desenvolvedor, para isso, vamos usar a nossa home page como base para essa análise.

Antes de qualquer coisa, precisamos abrir a ferramenta do desenvolvedor. Clique com o botão direito do mouse na página, em seguida, clique na opção Inspecionar elemento.

Na janela que vai se abrir, clique na opção Select an Element, conforme mostra a imagem abaixo. Agora basta clicar no texto ou elemento que você deseja analisar o contraste, nesse caso, selecionamos um texto.

Agora na aba Styles, você verá o código da cor, seja em hexadecimal, nomeada, RGBA, RGB, entre outras. Clique sobre a caixinha referente a cor.

A ferramenta de Color Picker irá surgir, nela contém o texto Cosntrast ratio, note que na frente desse texto, temos dois sinais de “okays” na cor verde, indicando um ótimo contraste, ou então:

• Ícone em vermelho indicando que está péssimo;
• Um ícone verde indicando que está aceitável;
• Dois ícones verdes indicando que está ótimo.

Em alguns momentos poderá aparecer a mensagem No contrast information available (nenhuma informação de contraste está disponível), isso ocorre quando o navegador não consegue identificar a cor de fundo.

Parece complicado para você? A ferramenta do desenvolvedor é algo que fará parte das suas rotinas no desenvolvimento web. 

Agora que você conhece essa funcionalidade, analise seus sites, verifique os pontos de melhoria e suba o deploy de correção.

Lembre-se sempre de medir o desempenho das páginas mais importantes no Web Vitals.