{"id":9,"date":"2026-07-06T19:34:00","date_gmt":"2026-07-06T22:34:00","guid":{"rendered":"https:\/\/grupomelvor.com.br\/blog\/?p=9"},"modified":"2026-09-09T19:47:35","modified_gmt":"2026-09-09T22:47:35","slug":"por-que-a-gente-mede-o-contraste-em-vez-de-confiar-no-olho","status":"publish","type":"post","link":"https:\/\/grupomelvor.com.br\/blog\/por-que-a-gente-mede-o-contraste-em-vez-de-confiar-no-olho\/","title":{"rendered":"Por que a gente mede o contraste em vez de confiar no olho"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Tem uma frase que aparece em toda reuni\u00e3o de aprova\u00e7\u00e3o de layout: <strong>&#8220;acho que d\u00e1 para ler.&#8221;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 uma frase honesta e \u00e9 uma frase in\u00fatil. Quem a diz est\u00e1 olhando para uma tela boa, num escrit\u00f3rio com luz controlada, sabendo de antem\u00e3o o que est\u00e1 escrito ali. Nenhuma dessas tr\u00eas coisas vale para quem vai visitar o site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O problema de olhar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Legibilidade n\u00e3o \u00e9 opini\u00e3o. \u00c9 uma raz\u00e3o entre a luminosidade do texto e a luminosidade do fundo, e existe um n\u00famero para ela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A conta \u00e9 a mesma que a W3C usa nas diretrizes de acessibilidade: voc\u00ea calcula a lumin\u00e2ncia relativa das duas cores e divide uma pela outra. O resultado sai como uma propor\u00e7\u00e3o \u2014 4,5:1, 7:1, 2,1:1. Quanto maior, mais o texto se descola do fundo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A refer\u00eancia pr\u00e1tica:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>4,5:1<\/strong> \u00e9 o m\u00ednimo para texto corrido<\/li>\n\n\n\n<li><strong>3:1<\/strong> \u00e9 o m\u00ednimo para texto grande, de t\u00edtulo<\/li>\n\n\n\n<li><strong>7:1<\/strong> \u00e9 o n\u00edvel confort\u00e1vel, o que a gente busca<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Um texto a 2:1 n\u00e3o \u00e9 &#8220;um pouco dif\u00edcil&#8221;. Ele \u00e9 ileg\u00edvel para uma parcela grande de gente \u2014 quem tem baixa vis\u00e3o, quem est\u00e1 no sol, quem tem o brilho da tela no m\u00ednimo para economizar bateria, quem j\u00e1 passou dos cinquenta. N\u00e3o \u00e9 um p\u00fablico de nicho. \u00c9 a maior parte de quem compra.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Onde isso quebra de verdade<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fundo s\u00f3lido \u00e9 f\u00e1cil: voc\u00ea mede uma vez e acabou.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O problema aparece quando o texto est\u00e1 <strong>sobre uma imagem<\/strong> \u2014 e \u00e9 justamente o que todo site bonito faz. A\u00ed o fundo muda a cada cent\u00edmetro. A mesma frase branca que se destaca sobre a parte escura da foto desaparece quando passa por cima do c\u00e9u.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pior: se for <strong>v\u00eddeo<\/strong>, o fundo muda a cada quadro. O texto que estava perfeito no segundo 3 pode sumir no segundo 8, quando a n\u00e9voa clareia a cena inteira.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Foi exatamente isso que aconteceu com a gente. Num projeto com texto sobre v\u00eddeo, tudo parecia certo enquanto test\u00e1vamos com um v\u00eddeo de rascunho, escuro do come\u00e7o ao fim. Quando entrou a filmagem real, uma das linhas caiu para <strong>1,9:1<\/strong> \u2014 praticamente invis\u00edvel \u2014 num trecho em que a n\u00e9voa atravessava o quadro. Ningu\u00e9m tinha visto. Todo mundo tinha olhado.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">O que a gente faz em vez de olhar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Trocamos a pergunta. Em vez de <em>&#8220;d\u00e1 para ler?&#8221;<\/em>, perguntamos <em>&#8220;qual \u00e9 o pior quadro?&#8221;<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O processo \u00e9 simples e \u00e9 automatiz\u00e1vel:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Extrair os quadros do v\u00eddeo, ou os pontos da imagem, onde cada bloco de texto aparece<\/li>\n\n\n\n<li>Para cada quadro, calcular a cor m\u00e9dia da \u00e1rea que fica <strong>atr\u00e1s do texto<\/strong> \u2014 n\u00e3o da imagem inteira<\/li>\n\n\n\n<li>Calcular a raz\u00e3o de contraste entre essa cor e a cor do texto<\/li>\n\n\n\n<li>Guardar <strong>o pior resultado de todos<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">O pior quadro \u00e9 o que importa. De nada adianta a m\u00e9dia ser 6:1 se existe um segundo e meio em que a frase some \u2014 \u00e9 nesse segundo e meio que algu\u00e9m vai estar olhando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se o pior quadro reprova, a corre\u00e7\u00e3o n\u00e3o \u00e9 aumentar a fonte. Costuma ser uma destas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Escurecer o fundo atr\u00e1s do texto<\/strong> com um v\u00e9u \u2014 um gradiente escuro por cima da imagem, s\u00f3 na regi\u00e3o do texto<\/li>\n\n\n\n<li><strong>Clarear o texto<\/strong>, mas isso tem limite: branco puro sobre foto cansa a vista<\/li>\n\n\n\n<li><strong>Mover o texto<\/strong> para a regi\u00e3o que j\u00e1 \u00e9 escura por natureza<\/li>\n\n\n\n<li><strong>Trocar o trecho do v\u00eddeo<\/strong>, quando nada disso resolve<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Por que isso \u00e9 assunto de cliente, e n\u00e3o s\u00f3 de designer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Porque cada uma dessas decis\u00f5es custa dinheiro se for descoberta tarde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descobrir na medi\u00e7\u00e3o, antes de aprovar, custa vinte minutos de ajuste. Descobrir depois de o site estar no ar custa uma rodada nova de aprova\u00e7\u00e3o, um refazer de arte e, no meio disso, um per\u00edodo em que gente de verdade visitou a p\u00e1gina e n\u00e3o conseguiu ler a sua proposta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E h\u00e1 o custo que ningu\u00e9m contabiliza: <strong>a pessoa que n\u00e3o conseguiu ler n\u00e3o reclama<\/strong>. Ela sai. Voc\u00ea n\u00e3o recebe um e-mail avisando que o seu contraste est\u00e1 em 1,9:1. Voc\u00ea recebe um n\u00famero de visitas que parece bom e um n\u00famero de contatos que parece ruim, e passa tr\u00eas meses culpando o tr\u00e1fego.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O princ\u00edpio, para al\u00e9m do contraste<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Contraste \u00e9 s\u00f3 o exemplo mais f\u00e1cil de explicar. O princ\u00edpio serve para o resto:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Quando existe um n\u00famero, use o n\u00famero.<\/strong> Velocidade de carregamento tem n\u00famero. Tamanho de arquivo tem n\u00famero. \u00c1rea de toque de um bot\u00e3o tem n\u00famero \u2014 44 pixels, e abaixo disso o dedo erra. Taxa de sa\u00edda tem n\u00famero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Opini\u00e3o \u00e9 para as coisas que n\u00e3o t\u00eam n\u00famero: se o tom da marca combina, se a foto passa a sensa\u00e7\u00e3o certa, se o texto soa arrogante. Essas s\u00e3o discuss\u00f5es leg\u00edtimas e a gente as tem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O que n\u00e3o faz sentido \u00e9 discutir por opini\u00e3o algo que uma conta de dois minutos resolve. Isso n\u00e3o \u00e9 rigor por rigor \u2014 \u00e9 economia de reuni\u00e3o.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Texto sobre imagem parece leg\u00edvel na tela do designer e some na tela do cliente. A diferen\u00e7a entre &#8220;achamos que d\u00e1&#8221; e &#8220;sabemos que d\u00e1&#8221; \u00e9 uma conta que leva dois minutos.<\/p>\n","protected":false},"author":1,"featured_media":12,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bastidores"],"_links":{"self":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":4,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions\/16"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/media\/12"}],"wp:attachment":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}