Analisar o contraste de cores em uma página web

Gunnar CorreaGunnar Correa30/09/2021 - 208 acessos

Utilizando as ferramentas do desenvolvedor, podemos verificar o contrate das cores.


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.

No quadrado da esquerda vemos que a legibilidade é muito ruim, enquanto a da direita é ótima.

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.

Inspecionando elementos do site.

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.

Selecionando elementos de um site.

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.

Visualizar cor utilizada em texto ou elemento da página.

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.

Obter taxa de contraste no Color Picker.

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.

Texto sem informações de contraste.

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.



html web vitals google contrate cores ferramentas do desenvolvedor melhorar site ajuste site acessibilidade do site

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com