Contraste: porque é que algumas cores não se leem
O que quer dizer 4,5:1, porque é que o verde «brilha» mais e como saber se uma cor se lê, com exemplos reais do meu próprio site.
Imagina que alguém te deixa um bilhete escrito a lápis cinzento-claro numa folha branca. Consegues ler, mas tens de aproximar o papel dos olhos. Agora imagina o mesmo bilhete escrito a caneta preta: lês logo, sem esforço. A diferença entre os dois chama-se contraste, o quanto o texto se destaca do fundo.
Nos sites e nas apps passa-se exatamente o mesmo. Uma cor pode ser linda e, mesmo assim, difícil de ler. Por isso, antes de usar uma cor, faço sempre a mesma pergunta: consegue-se ler?
E isto não é só para quem vê mal. Toda a gente perde contraste quando usa o telemóvel ao sol, com o brilho no mínimo ou num ecrã mais fraco. E, com a idade, os olhos também passam a precisar de mais contraste.
O que quer dizer «4,5 : 1»
O contraste mede-se com um número, como se fosse uma régua. Essa régua vai do 1 ao 21:
- 1:1 é contraste nenhum, como branco sobre branco. Não se vê nada.
- 21:1 é o máximo possível: preto sobre branco.
- Tudo o resto fica pelo meio. Quanto maior o número, mais fácil é ler.
Lê-se «4,5 para 1» e quer dizer, mais ou menos, que a cor clara é 4,5 vezes mais luminosa do que a escura, tal como os nossos olhos a sentem.
Porque é que o verde «brilha» mais
Aqui entra uma coisa curiosa: os nossos olhos não sentem todas as cores da mesma maneira. São muito mais sensíveis ao verde do que ao vermelho ou ao azul. Por isso, quando se calcula o contraste, o verde conta cerca de 72%, o vermelho 21% e o azul só 7%.
É por isso que um verde vivo parece quase tão claro como o branco, e um azul vivo parece escuro. Repara no texto branco em cima de cada um:
Para quem quiser a conta completa: contraste = (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminosidade da cor mais clara e L2 a da mais escura. Não precisas de a fazer à mão; no fim mostro as ferramentas que a fazem por ti.
As regras: AA e AAA
Existe um conjunto de regras internacionais para a web ser usável por toda a gente, chamado WCAG. Pensa nelas como as estrelas de segurança de um carro: há o mínimo que todos devem ter e há o nível máximo.
- AA é o mínimo que qualquer site deve cumprir. É também o nível que a lei europeia de acessibilidade usa como referência.
- AAA é o nível mais exigente.
Os números a decorar são poucos:
- Texto normal: 4,5:1 para AA, 7:1 para AAA.
- Texto grande (a partir de 24 px, ou 18,66 px em negrito): 3:1 para AA, 4,5:1 para AAA.
- Peças da interface e gráficos (ícones, a borda de um campo, as linhas de um gráfico): 3:1 em relação ao que está à volta.
Porque é que o texto grande pode ter menos contraste? Pela mesma razão que lês um cartaz ao longe mas não lês as letras pequeninas de um contrato: letras grandes e grossas são mais fáceis de distinguir. O contrário também é verdade: texto pequeno e fino precisa de mais contraste do que parece.
E não é só o texto. A borda da caixa onde escreves o email, um ícone, a linha de um gráfico: tudo isso também tem de se ver. Se a borda de um campo é quase invisível, a pessoa nem percebe onde tem de escrever. E o texto de exemplo dentro do campo também é texto, por isso precisa dos mesmos 4,5:1.
Contraste não é uma questão de gosto. É a diferença entre alguém conseguir ler o teu site ou desistir dele.
Um caso real: o laranja deste site
O laranja deste site é o #D4861A. É ótimo para destaques, mas como texto pequeno sobre o fundo creme dá só 2,76:1. Chumba.
Por isso, nos títulos pequenos (como o «PORTFOLIO» em maiúsculas por cima dos títulos grandes), eu usava um laranja mais escuro, o #AD6012. Sobre branco dava 4,71:1 e parecia resolvido. Mas, enquanto escrevia este post, medi-o sobre os fundos verdadeiros do site: no creme dava 4,48:1 e no cinzento claro 4,20:1. Ficava por um triz abaixo do mínimo, e eu nunca teria reparado só a olhar.
A solução não foi trocar de cor. Foi escurecer um bocadinho o mesmo laranja: agora é o #A0570E, com 5,16:1 no creme. Sobre o azul escuro faço o contrário e uso um laranja mais claro, o #F6C27A (7,07:1). É sempre «o laranja», só ajustado a cada fundo, como quem sobe ou baixa o volume consoante o barulho da sala.
Medir uma cor sobre branco não chega. Mede-a sobre os fundos onde ela vai mesmo aparecer.
Os números das cores deste site
Antes de desenhar, meço as combinações que vou usar mais vezes. É como provar a sopa antes de a servir. No modo claro:
- Texto principal #0D0D1C sobre o fundo #FAF9F7: 18,29:1
- Texto secundário #40405A sobre o mesmo fundo: 9,51:1
- Texto branco sobre o azul da marca #1E3A5F, nos botões: 11,50:1
O modo escuro não é só trocar o branco pelo preto. O azul da marca, que fica ótimo em fundo claro, sobre o fundo escuro dá apenas 1,40:1: praticamente desaparece. Por isso, no modo escuro passa a ser um azul mais claro, o #4A90D9 (4,82:1). E em vez de branco puro sobre preto puro, que encandeia, uso um cinzento muito claro sobre um fundo cinza-azulado.
- Texto principal #EDEEF2 sobre #1E2128: 13,90:1
- Texto secundário #A0A4AE: 6,46:1
- Azul de destaque #4A90D9: 4,82:1
A cor nunca deve trabalhar sozinha
Cerca de 1 em cada 12 homens tem algum tipo de daltonismo (nas mulheres, é perto de 1 em cada 200). A confusão mais comum é entre o vermelho e o verde. E repara: são exatamente as cores que usamos para «está tudo bem» e «correu mal».
A regra é simples: se tirasses a cor toda, a informação devia continuar lá. Um erro leva uma mensagem escrita, não só uma borda vermelha. Os links no meio do texto levam sublinhado. Num gráfico, as linhas levam nomes, não só cores diferentes.
Como verifico na prática
- No Figma, com um plugin de contraste, logo quando escolho as cores e antes de desenhar ecrãs.
- No browser, as ferramentas de programador do Chrome mostram o contraste ao inspecionar um texto, e o Lighthouse aponta os que falham.
- Online, o WebAIM Contrast Checker: metes duas cores e dá-te o número em segundos.
- Dois testes rápidos: ver o design a preto e branco (se deixas de perceber o que é importante, estava tudo dependente da cor) e abri-lo no telemóvel com o brilho no mínimo.
Em resumo
- O contraste vai de 1 a 21. Quanto maior, mais fácil é ler.
- 4,5:1 para texto normal; 3:1 para texto grande e peças da interface.
- Cinzento claro sobre branco é o erro mais comum. O #767676 é o limite.
- Ajusta a cor a cada fundo, mais clara ou mais escura, e mede-a nos fundos reais.
- Nunca uses só a cor para dizer alguma coisa.
- Mede sempre: os olhos enganam, os números não.
Bom contraste não deixa o design mais feio. Deixa-o mais fácil de usar para toda a gente, incluindo tu, ao sol, com o brilho do telemóvel no mínimo.