Para testar as suas cores enquanto lê, abra o verificador de contraste: ele calcula a razão e diz se a combinação passa em cada nível.
O Que É a Razão de Contraste
A relação de contraste compara o quanto de luz cada cor emite na tela, a luminância relativa. A conta é (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância da cor mais clara e L2 a da mais escura. Na luminância, o verde pesa muito mais que o vermelho, e o azul pesa pouco, porque o olho humano é mais sensível ao verde. Por isso um azul puro é escuro o bastante para texto sobre branco, e um amarelo puro não é.
O resultado vai de 1:1, quando as duas cores são iguais, a 21:1, o máximo, que é preto no branco. Ele não depende de qual cor fica na frente: texto preto em fundo amarelo tem o mesmo contraste que texto amarelo em fundo preto.
Os Níveis da WCAG
A WCAG (Diretrizes de Acessibilidade para Conteúdo Web, do W3C) define dois níveis de contraste para texto, AA e AAA:
| O que é | Nível AA | Nível AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (a partir de 18 pt, ou 14 pt em negrito; cerca de 24 px e 18,7 px) | 3:1 | 4,5:1 |
| Ícones, bordas de campos e partes de gráficos | 3:1 | — |
O nível AA é o mais usado como meta em sites e aplicativos. O AAA é mais exigente e nem sempre possível em todo o conteúdo. Logotipos e textos decorativos, ou de botões desativados, não têm exigência de contraste.
Exemplos Calculados
A tabela mostra combinações comuns, com o contraste calculado pelo site. “AA” e “AAA” são para texto normal; a última coluna vale para texto grande e para ícones.
| Amostra | Texto sobre fundo | Contraste | AA | AAA | Texto grande (3:1) |
|---|---|---|---|---|---|
| Texto | Preto sobre Branco | 21,0:1 | passa | passa | passa |
| Texto | #767676 (perto de Níquel) sobre Branco | 4,5:1 | passa | não passa | passa |
| Texto | Cinza sobre Branco | 3,9:1 | não passa | não passa | passa |
| Texto | Vermelho sobre Branco | 4,0:1 | não passa | não passa | passa |
| Texto | Azul sobre Branco | 8,6:1 | passa | passa | passa |
| Texto | Laranja sobre Branco | 2,0:1 | não passa | não passa | não passa |
| Texto | Preto sobre Laranja | 10,6:1 | passa | passa | passa |
| Texto | Branco sobre Verde | 5,1:1 | passa | não passa | passa |
| Texto | Branco sobre Azul Furtivo | 3,2:1 | não passa | não passa | passa |
| Texto | Azul-Marinho sobre Dourado | 11,4:1 | passa | passa | passa |
| Texto | Vermelho sobre Verde | 1,3:1 | não passa | não passa | não passa |
Alguns achados: o #767676 (perto de Níquel) é o cinza mais claro que ainda passa no AA sobre branco (4,5:1); o Cinza, um pouco mais claro, já não passa (3,9:1). O Vermelho puro sobre branco fica em 4,0:1, abaixo do mínimo para texto normal. E o laranja, que não serve para texto sobre branco, funciona muito bem como fundo para texto preto.
Cores Diferentes Não Garantem Contraste
Vermelho e verde parecem opostos, mas o Vermelho sobre o Verde tem só 1,3:1: as duas cores têm luminância parecida. O que torna um texto legível é a diferença de claro e escuro, não a diferença de matiz. Um teste rápido é imaginar a combinação em preto e branco: se as duas cores virarem o mesmo cinza, o texto vai ser difícil de ler.
Contraste e Daltonismo
O daltonismo mais comum, a dificuldade de distinguir vermelho e verde, atinge cerca de 8% dos homens e 0,5% das mulheres de ascendência norte-europeia. Quem tem daltonismo enxerga bem as diferenças de luminosidade, por isso um bom contraste ajuda. A WCAG também pede que a cor não seja o único jeito de passar uma informação: um campo com erro deve ter, além da borda vermelha, um ícone ou uma mensagem; num gráfico, as linhas podem ter padrões ou rótulos.
Como Corrigir um Contraste Baixo
- Escureça o texto ou clareie o fundo. Mudar só a luminosidade mantém o matiz e a identidade da cor. O verificador do site tem um ajuste que chega a uma cor parecida que passa.
- Troque o papel das cores. Uma cor clara e viva, como o amarelo ou o laranja, funciona melhor como fundo, com texto escuro, do que como texto.
- Aumente o texto. Títulos grandes precisam de 3:1, e não de 4,5:1.
- Cuidado com texto sobre imagem e sobre degradê. Confira o contraste na parte mais clara e na mais escura do fundo, ou ponha uma camada escura semitransparente atrás do texto.
Contraste no Modo Escuro
No modo escuro, branco puro sobre preto puro tem o contraste máximo, mas pode cansar a vista em textos longos. Muitos sistemas usam um cinza muito escuro no fundo, como o #121212 recomendado pelo Material Design, do Google, e um branco um pouco acinzentado no texto. O mínimo da WCAG continua valendo: texto #E0E0E0 sobre fundo #121212, por exemplo, tem 14,2:1.
Contraste na Hora de Escolher a Paleta
Uma paleta bonita só funciona num site se tiver pelo menos um par de cores com contraste para o texto. A regra prática: tenha na paleta um tom bem escuro e um bem claro, além das cores de destaque. Veja mais em como combinar cores. Nas páginas de paleta do site, o bloco “Contraste entre as cores” mostra quais pares da paleta servem para texto, e cada ficha de cor diz se ela passa como texto sobre branco.
A Lei no Brasil
A Lei Brasileira de Inclusão (Lei 13.146/2015) torna obrigatória a acessibilidade nos sites de empresas com sede ou representação no país e nos de órgãos de governo. A WCAG é a referência técnica mais usada para cumprir essa exigência, e o modelo de acessibilidade do governo federal (eMAG) se baseia nela.