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.
