Esses dias um cliente me mandou um print do site dele aberto no celular, no meio da rua, e a mensagem era curta: "não consigo ler nada". Eu abri, fiquei encarando, e ele estava certíssimo. Aquele cinza-claro lindo sobre branco que parecia tão elegante no meu monitor calibrado, dentro de casa, simplesmente sumia sob o sol. E olha, eu poderia fingir que a culpa era do celular dele. Mas a verdade é mais incômoda: o erro era meu, e eu já tinha cometido ele antes.
Demorei pra cair a ficha de uma coisa que hoje considero óbvia: contraste não é questão de gosto, é matemática. Existe uma fórmula, ela tem nome (WCAG), e ela não está nem aí pro quão sofisticado você acha que aquele cinza ficou. Ou o texto passa, ou não passa. Deixa eu te contar como cheguei aí — e no fim tem um checador ao vivo pra você ver a conta acontecendo.
O cinza-claro lindo que ninguém lê
Existe um vício estético muito comum entre quem gosta de design "clean": baixar a opacidade do texto. Aquele #999 sobre branco, ou um opacity: 0.6 no parágrafo inteiro, dá uma sensação de leveza, de respiro, de coisa cara. O problema é que essa leveza é um privilégio de quem está olhando numa tela boa, num ambiente controlado, com visão perfeita.
Tira esse mesmo texto do laboratório: coloca sob o sol, numa tela barata de brilho baixo, ou na frente de alguém com 50 anos e a famosa "vista cansada" (presbiopia), ou daltonismo, ou baixa visão. De repente aquele cinza elegante vira uma névoa ilegível. E aqui está o número que me assustou: cerca de 1 em cada 12 homens tem alguma deficiência na percepção de cores. Não é um caso raro de canto — é uma fatia enorme dos seus visitantes.
A grande sacada: nossos olhos não enxergam "brilho" de forma justa
Aqui está a parte que mudou minha cabeça. Quando o navegador mostra a cor #2563eb (o azul da minha marca), ele está misturando três canais: vermelho, verde e azul. Mas o nosso olho não dá o mesmo peso pra esses três. Somos muito mais sensíveis ao verde, razoavelmente sensíveis ao vermelho, e bem pouco sensíveis ao azul.
É por isso que um amarelo (que é cheio de verde e vermelho) parece luminoso, enquanto um azul puro, mesmo "vibrante", parece escuro pros nossos olhos. A WCAG captura isso numa fórmula chamada luminância relativa: ela pega o RGB, "desfaz" o ajuste de gama que as telas aplicam, e então faz uma média ponderada — ~21% do vermelho, ~72% do verde, ~7% do azul. Repara que o verde sozinho domina quase três quartos da percepção de brilho.
Com a luminância das duas cores em mãos, a razão de contraste é só uma divisão:
(L_clara + 0,05) / (L_escura + 0,05). O resultado vai de 1:1 (mesma cor, invisível) até 21:1 (preto puro no branco puro). Esse 0,05 ali é um truque pra simular a luz ambiente que sempre bate na tela — sem ele, preto no preto daria divisão por zero.
Os números que valem como lei
A WCAG transforma essa razão em metas concretas. Não precisa decorar a fórmula, mas vale guardar os limites:
- 4,5:1 — o mínimo para texto normal passar no nível AA. É a régua que a maioria das leis de acessibilidade do mundo (e a LGPD, por tabela, quando exige acessibilidade) usa como referência.
- 3:1 — basta para texto grande (a partir de ~24px, ou ~18.7px se for negrito). Letras maiores perdoam um contraste menor.
- 7:1 — o nível AAA para texto normal, o ideal de excelência. 4,5:1 já libera o AAA para texto grande.
O detalhe lindo disso: são regras objetivas. Acabou a discussão de "mas ficou bonito assim". Ou a conta dá 4,5 ou não dá. Isso me libertou de muita briga improdutiva com clientes e comigo mesmo.
Duas curiosidades que eu carrego comigo
- Cor sozinha nunca é informação. Aquele clássico "campos em vermelho são obrigatórios" exclui quem não distingue vermelho de verde. A regra de ouro: a cor pode reforçar, mas a informação precisa existir também em texto, ícone ou forma. Vermelho + um "x" + a palavra "erro". Nunca só a cor.
- O contraste não enxerga matiz, só brilho. Isso surpreende todo mundo: um vermelho e um verde que parecem brigar aos seus olhos podem ter quase a mesma luminância — e portanto contraste péssimo entre si, mesmo sendo cores "opostas". Por isso confiar no olho engana; a conta, não.
Minha opinião honesta, depois de errar
Hoje eu trato contraste como trato segurança: não é um "extra bonito" que entra no fim do projeto, é um pré-requisito que anda junto com a escolha das cores. Acessibilidade e estética não são inimigas — essa é a desculpa preguiçosa. Dá pra ter um site lindo, sofisticado, e legível ao sol. Só dá mais trabalho pensar nisso desde o começo do que jogar um cinza-claro e seguir a vida.
E tem o lado que mais me importa, como alguém que constrói coisas pra converter: um texto que ninguém lê não vende nada. O CTA mais lindo do mundo, se some no fundo, é dinheiro jogado fora. Legibilidade é, antes de tudo, respeito pelo visitante — e respeito converte.
Chega de teoria — brinca com a conta 👇
Montei um checador de contraste ao vivo, vanilla, sem nenhuma biblioteca. Escolhe a cor do texto e a do fundo (pelos seletores ou digitando o hex), e veja a razão de contraste sendo calculada na hora, com os selos AA e AAA acendendo verde ou vermelho. Mexe nos controles de luminância pra sentir como o verde pesa mais que o azul, e use o botão de "sugerir cor acessível" quando o seu par reprovar. É a fórmula da WCAG rodando na sua frente.