Bastidores

Por que a gente mede o contraste em vez de confiar no olho

Texto sobre imagem parece legível na tela do designer e some na tela do cliente. A diferença entre "achamos que dá" e "sabemos que dá" é uma conta que leva dois minutos.

admin 5 min de leitura

Tem uma frase que aparece em toda reunião de aprovação de layout: “acho que dá para ler.”

É uma frase honesta e é uma frase inútil. Quem a diz está olhando para uma tela boa, num escritório com luz controlada, sabendo de antemão o que está escrito ali. Nenhuma dessas três coisas vale para quem vai visitar o site.

O problema de olhar

Legibilidade não é opinião. É uma razão entre a luminosidade do texto e a luminosidade do fundo, e existe um número para ela.

A conta é a mesma que a W3C usa nas diretrizes de acessibilidade: você calcula a luminância relativa das duas cores e divide uma pela outra. O resultado sai como uma proporção — 4,5:1, 7:1, 2,1:1. Quanto maior, mais o texto se descola do fundo.

A referência prática:

  • 4,5:1 é o mínimo para texto corrido
  • 3:1 é o mínimo para texto grande, de título
  • 7:1 é o nível confortável, o que a gente busca

Um texto a 2:1 não é “um pouco difícil”. Ele é ilegível para uma parcela grande de gente — quem tem baixa visão, quem está no sol, quem tem o brilho da tela no mínimo para economizar bateria, quem já passou dos cinquenta. Não é um público de nicho. É a maior parte de quem compra.

Onde isso quebra de verdade

Fundo sólido é fácil: você mede uma vez e acabou.

O problema aparece quando o texto está sobre uma imagem — e é justamente o que todo site bonito faz. Aí o fundo muda a cada centímetro. A mesma frase branca que se destaca sobre a parte escura da foto desaparece quando passa por cima do céu.

Pior: se for vídeo, o fundo muda a cada quadro. O texto que estava perfeito no segundo 3 pode sumir no segundo 8, quando a névoa clareia a cena inteira.

Foi exatamente isso que aconteceu com a gente. Num projeto com texto sobre vídeo, tudo parecia certo enquanto testávamos com um vídeo de rascunho, escuro do começo ao fim. Quando entrou a filmagem real, uma das linhas caiu para 1,9:1 — praticamente invisível — num trecho em que a névoa atravessava o quadro. Ninguém tinha visto. Todo mundo tinha olhado.

O que a gente faz em vez de olhar

Trocamos a pergunta. Em vez de “dá para ler?”, perguntamos “qual é o pior quadro?”.

O processo é simples e é automatizável:

  1. Extrair os quadros do vídeo, ou os pontos da imagem, onde cada bloco de texto aparece
  2. Para cada quadro, calcular a cor média da área que fica atrás do texto — não da imagem inteira
  3. Calcular a razão de contraste entre essa cor e a cor do texto
  4. Guardar o pior resultado de todos

O pior quadro é o que importa. De nada adianta a média ser 6:1 se existe um segundo e meio em que a frase some — é nesse segundo e meio que alguém vai estar olhando.

Se o pior quadro reprova, a correção não é aumentar a fonte. Costuma ser uma destas:

  • Escurecer o fundo atrás do texto com um véu — um gradiente escuro por cima da imagem, só na região do texto
  • Clarear o texto, mas isso tem limite: branco puro sobre foto cansa a vista
  • Mover o texto para a região que já é escura por natureza
  • Trocar o trecho do vídeo, quando nada disso resolve

Por que isso é assunto de cliente, e não só de designer

Porque cada uma dessas decisões custa dinheiro se for descoberta tarde.

Descobrir na medição, antes de aprovar, custa vinte minutos de ajuste. Descobrir depois de o site estar no ar custa uma rodada nova de aprovação, um refazer de arte e, no meio disso, um período em que gente de verdade visitou a página e não conseguiu ler a sua proposta.

E há o custo que ninguém contabiliza: a pessoa que não conseguiu ler não reclama. Ela sai. Você não recebe um e-mail avisando que o seu contraste está em 1,9:1. Você recebe um número de visitas que parece bom e um número de contatos que parece ruim, e passa três meses culpando o tráfego.

O princípio, para além do contraste

Contraste é só o exemplo mais fácil de explicar. O princípio serve para o resto:

Quando existe um número, use o número. Velocidade de carregamento tem número. Tamanho de arquivo tem número. Área de toque de um botão tem número — 44 pixels, e abaixo disso o dedo erra. Taxa de saída tem número.

Opinião é para as coisas que não têm número: se o tom da marca combina, se a foto passa a sensação certa, se o texto soa arrogante. Essas são discussões legítimas e a gente as tem.

O que não faz sentido é discutir por opinião algo que uma conta de dois minutos resolve. Isso não é rigor por rigor — é economia de reunião.

Continue o rastro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *