Contraste de cores acessível: rácios WCAG, testes e correções

Texto cinzento-claro sobre fundo branco fica limpo num ficheiro de design. Num telemóvel ao sol, ou para alguém com baixa visão, é difícil de ler. É também a falha de acessibilidade mais comum que existe: o WebAIM Million 2026 (abre num novo separador) encontrou texto com pouco contraste em 83,9% das páginas iniciais do milhão de sites mais visitados, com uma média de 34 ocorrências distintas por página.

A boa notícia é que o contraste se mede, os limiares são claros e as correções são, na maioria, baratas. Este guia dá-lhe os números, as ferramentas gratuitas e uma forma de corrigir as cores da marca sem começar do zero.

O que é a relação de contraste de cores?

A relação de contraste é um número que compara o brilho relativo, ou luminância, de duas cores, normalmente a do texto e a do fundo. As WCAG calculam-na com uma fórmula fixa, e o resultado vai de 1:1 (nenhuma diferença, branco sobre branco) a 21:1 (preto sobre branco). Quanto mais alto o número, mais fácil é distinguir as duas cores.

A fórmula é (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância relativa da cor mais clara e L2 a da mais escura. Nunca vai precisar de a calcular à mão, mas há um pormenor importante: só conta a luminância, não a tonalidade. É por isso que texto vermelho sobre fundo verde pode parecer vibrante e mesmo assim ter uma pontuação fraca.

O outro pormenor que escapa a muita gente é o arredondamento. O documento de compreensão do W3C sobre o 1.4.3 (abre num novo separador) diz que os valores calculados «não devem ser arredondados (por exemplo, 4,499:1 não cumpriria o limiar de 4,5:1)». Assim, o cinzento #767676 sobre branco (4,54:1) passa, enquanto o #777777 sobre branco (4,48:1) falha, embora ninguém os consiga distinguir a olho.

Que relação de contraste exigem as WCAG?

No nível AA, para o qual remete a maioria das leis e dos contratos, o texto normal precisa de pelo menos 4,5:1 face ao fundo e o texto grande de 3:1 (critério de sucesso 1.4.3). Os componentes da interface e os gráficos com significado precisam de 3:1 face às cores adjacentes (1.4.11). O nível AAA, mais exigente, pede 7:1 para texto normal e 4,5:1 para texto grande (1.4.6).

Porquê 4,5:1? O W3C explica que este valor «compensa a perda de sensibilidade ao contraste normalmente sentida por utilizadores com uma perda de visão equivalente a cerca de 20/40» (na escala decimal habitual na Europa, uma acuidade visual de cerca de 0,5). Por outras palavras, foi pensado para pessoas com uma visão moderadamente reduzida, o que inclui muitos clientes mais velhos que nunca diriam que têm uma deficiência.

Há texto isento: logótipos e nomes de marca, texto puramente decorativo, texto que ninguém vê, texto numa imagem com outro conteúdo visual significativo e texto em controlos inativos (desativados). O seu logótipo pode ficar como está. Um parágrafo escrito na cor clara do logótipo, não.

O que conta como texto grande?

Nas WCAG, texto grande significa pelo menos 18 pontos, ou pelo menos 14 pontos se estiver a negrito. O W3C converte isso em cerca de 24 píxeis CSS e 18,5 píxeis a negrito. Tudo o que for mais pequeno precisa dos 4,5:1 completos. O texto corrido, as legendas de imagens, as etiquetas dos formulários, os preços e as ligações do rodapé quase nunca são texto grande, por isso precisam da relação mais alta.

Vejamos na prática. O cinzento #949494 sobre branco dá 3,03:1. Serve para um título de 28 píxeis e falha num parágrafo de 16 píxeis com a mesma cor. Muitos sites passam nos títulos e falham em tudo o que está por baixo.

As fontes finas e decorativas exigem mais cuidado. O W3C nota que, por causa da suavização de contornos, «fontes particularmente finas ou invulgares podem ser apresentadas pelos navegadores com uma cor muito mais ténue» do que a que escolheu. Se a fonte da sua marca tem um peso leve, deixe uma margem acima de 4,5:1 em vez de apontar para 4,51.

O contraste aplica-se a botões, ícones, indicadores de foco e gráficos?

Sim. Segundo o critério de sucesso 1.4.11 (nível AA), tudo o que as pessoas precisam de ver para identificar um controlo, o seu estado ou um gráfico precisa de 3:1 face às cores adjacentes. Isso inclui os contornos dos campos de formulário, os ícones sem etiqueta de texto, os contornos do foco, os estados de caixas de verificação e interruptores, e as linhas e fatias dos gráficos. O texto dentro de um botão continua a precisar de 4,5:1.

• Campos de formulário: um contorno cinzento-claro #CCCCCC sobre branco dá 1,61:1. Se essa linha ténue for a única coisa que mostra onde escrever, falha.
• Botões: as WCAG não exigem um contorno visível à volta de cada botão. O documento de compreensão do W3C sobre o 1.4.11 (abre num novo separador) diz que só é preciso um limite quando não há outra forma visual de identificar o controlo. Se um botão só se reconhece pela forma colorida, essa forma precisa de 3:1 face à página.
• Ícones: uma lupa de pesquisa, um coração da lista de desejos ou um ícone de carrinho sem texto ao lado precisam de 3:1.
• Indicadores de foco: o contorno que mostra o foco do teclado tem de contrastar com o fundo à volta. O nosso guia das WCAG 2.2 trata dos critérios de foco mais recentes.
• Gráficos: as linhas de um gráfico de linhas e as fatias de um gráfico circular precisam de 3:1, a não ser que os mesmos valores também apareçam em texto.
• Os controlos desativados estão isentos, embora as pessoas continuem a precisar de perceber se um botão pode ser premido.

As ligações no meio do texto são um caso especial. Se só se distinguem pela cor, sem sublinhado, a técnica G183 (abre num novo separador) do W3C pede 3:1 entre a cor da ligação e a do texto à volta, e ambas continuam a precisar de 4,5:1 face ao fundo. Encontrar três cores que cumpram tudo isso é difícil. Um sublinhado é muito mais fácil.

Como verificar o contraste de cores?

Use um verificador de contraste gratuito para pares de cores específicos, as ferramentas de programador do navegador para páginas em funcionamento e uma análise automática para encontrar zonas problemáticas em todo o site. Depois verifique a olho o que as ferramentas não apanham: texto sobre fotografias e gradientes, estados ao passar o rato e com foco, texto de exemplo e mensagens de erro. A maior parte disto leva poucos minutos por modelo de página.

• WebAIM Contrast Checker (abre num novo separador): introduza dois códigos hexadecimais e obtenha a relação, com o resultado para texto normal, texto grande e objetos gráficos. O controlo deslizante de luminosidade dá jeito para encontrar o tom mais próximo que passa.
• Colour Contrast Analyser (abre num novo separador): uma aplicação de computador gratuita da Vispero para Windows e macOS. O conta-gotas recolhe a cor de qualquer píxel do ecrã, o que é útil para texto sobre imagens, PDF e apps, e inclui um simulador de daltonismo.
• Chrome DevTools: inspecione um texto e abra o seletor de cores. A secção da relação de contraste (abre num novo separador) mostra linhas para AA e AAA e pode sugerir uma cor que passe. O painel CSS Overview lista todos os problemas de contraste da página.
• Verificadores automáticos: as extensões do navegador e o Lighthouse assinalam texto com pouco contraste em toda a página, mas muitas vezes marcam o texto sobre imagens ou gradientes como precisando de revisão manual, em vez de o darem como aprovado ou reprovado.

Onde as ferramentas não chegam, recolha amostras manualmente. Num texto sobre uma fotografia de destaque, verifique a parte mais clara da imagem por trás das letras mais claras; o W3C indica as imagens de fundo sem contraste suficiente como falha conhecida (F83). Passe o rato pelos botões, chegue a eles com Tab, provoque um erro num formulário e mude para o modo escuro, se o oferecer. Um tema escuro também pode falhar: cinzento #757575 sobre fundo #121212 dá 4,07:1. O nosso guia sobre como testar a acessibilidade do seu site junta o contraste às outras verificações manuais rápidas.

Como corrigir o pouco contraste sem mudar a marca?

Normalmente, acrescentando um tom mais escuro da cor da marca para o texto e os elementos pequenos, e mantendo o original para títulos grandes, fundos e ilustrações. Muitas cores de marca só falham em tamanhos pequenos. Trocar texto branco por texto escuro sobre uma cor de marca clara costuma bastar, e a maioria dos visitantes só vai notar que a página se lê melhor.

1. Crie uma versão de cada cor da marca segura para texto, com pelo menos 4,5:1 face aos fundos principais, e use-a no texto corrido, nas ligações e nos ícones pequenos.
2. Use a cor viva original nos títulos grandes (aí chega 3:1), nos fundos, nas ilustrações e na decoração.
3. Sobre cores de marca claras, troque o texto dos botões de branco para escuro.
4. Coloque um painel opaco ou semitransparente por trás do texto que fica sobre fotografias.
5. Verifique todos os estados: ao passar o rato, com foco, visitado, selecionado, com erro e texto de exemplo.
6. Guarde os pares aprovados como tokens de design ou definições do tema, para que as páginas novas os herdem em vez de os reinventarem.

Design para daltonismo: porque é que a cor, sozinha, não chega

O contraste e a cor são problemas diferentes. Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm uma deficiência na visão das cores, na maioria dos casos vermelho-verde, segundo a Colour Blind Awareness (abre num novo separador). O critério 1.4.1 das WCAG (abre num novo separador) (nível A) diz que a cor não pode ser o único meio visual de transmitir informação, por isso junte-lhe texto, ícones, padrões ou sublinhados.

• Erros de formulário: um contorno vermelho, sozinho, falha. Acrescente uma mensagem como «Introduza um código postal» junto ao campo, de preferência com um ícone.
• Stock e estado: um ponto verde ou vermelho ao lado de um produto não diz nada a muitos compradores. Escreva «Disponível» ou «Esgotado».
• Gráficos: uma legenda que depende de fazer corresponder cores é difícil de ler. Identifique as linhas diretamente ou use padrões e estilos de linha diferentes.
• Ligações: no texto corrido, sublinhe-as, pelas razões explicadas acima.

Para ver o problema com os próprios olhos, as DevTools do Chrome conseguem simular deficiências da visão, e o Colour Contrast Analyser também tem um simulador. O contraste também ajuda aqui: a relação mede a luminosidade, não a tonalidade, por isso duas cores com uma relação alta continuam a distinguir-se mesmo quando as tonalidades se parecem. Para saber mais sobre como as pessoas com baixa visão e outras deficiências configuram os seus dispositivos, veja como as pessoas com deficiência usam a web.

Os modos de alto contraste e os botões de contraste chegam?

Não. Os temas de contraste do sistema operativo e os botões de contraste na página ajudam quem sabe que precisa de mais contraste e o ativa. Mas as WCAG avaliam a página no seu estado predefinido, por isso as cores que cada visitante vê primeiro continuam a ter de passar. Um botão de contraste é uma opção extra para quem quer mais, não uma correção para cores que falham.

Algumas pessoas com deficiência usam os temas de contraste do Windows, que substituem as cores do site pelas do tema. Vale a pena testar o site com um destes temas ativo: os ícones feitos com imagens de fundo podem desaparecer, tal como os estilos de foco desenhados apenas com uma sombra (box-shadow). A media query de CSS prefers-contrast permite também oferecer uma versão com mais contraste a quem a pediu nas definições do sistema.

O nosso próprio widget tem um ajuste de contraste e um perfil para daltonismo, e alguns visitantes acham-nos úteis. Mesmo assim, dir-lhe-íamos o mesmo: se o texto corrido do seu site é #999999 sobre branco, mude o CSS. O widget dá a quem quer mais contraste uma forma de o obter. Não faz passar cores predefinidas que falham, e a referência das WCAG na nossa documentação também o diz.