Início › Blog › O meu site passa no teste WCAG?
O meu site passa no teste WCAG? Como verificar o contraste de cor em 30 segundos
Se já submeteste um design a uma auditoria de acessibilidade, provavelmente já ouviste "contraste insuficiente entre texto e fundo". Este guia explica o que isso significa na prática, mostra os limites reais do WCAG AA/AAA com exemplos, e como testar as tuas cores em segundos.
Como se calcula o rácio de contraste
Resposta rápidaO rácio de contraste WCAG compara a luminância relativa de duas cores, dando um valor entre 1:1 (idênticas) e 21:1 (preto/branco). Calcula-se com (L_mais_clara + 0,05) / (L_mais_escura + 0,05), em que L é obtido a partir dos canais R, G, B normalizados e corrigidos por gama.
Na prática, ninguém calcula isto à mão — nem devia. O rácio depende de uma correção gama não-linear e de pesos diferentes por canal (o verde pesa muito mais do que o azul, porque o olho humano é mais sensível a ele). É por isso que duas cores que "parecem" ter contraste parecido podem dar resultados de rácio bem diferentes.
Facto útil: um cinzento médio como #767676 sobre fundo branco fica mesmo em cima do limite de 4,5:1 — um dos pares de referência mais usados para testar calculadoras de contraste.
O verificador de contraste de cor da ToolPico faz este cálculo instantaneamente no navegador: introduzes as duas cores (hex, rgb, hsl, ou com o seletor de cor / EyeDropper) e recebes o rácio exato, mais os resultados AA/AAA passou/falhou.
AA vs AAA: qual o limite certo para ti
Resposta rápidaAA é o nível mínimo exigido na generalidade das normas: 4,5:1 para texto normal, 3:1 para texto grande e componentes de interface. AAA é mais exigente — 7:1 e 4,5:1 respetivamente — e costuma reservar-se para conteúdo crítico.
"Texto grande" no WCAG tem uma definição precisa: 18pt (~24px) ou mais em peso normal, ou 14pt (~18,66px) ou mais a negrito. Como estes carateres são mais fáceis de ler, o limite de contraste exigido é mais baixo.
| Tipo de conteúdo | AA (mínimo) | AAA (reforçado) |
|---|
| Texto normal (<18pt) | 4,5:1 | 7:1 |
| Texto grande (≥18pt ou ≥14pt negrito) | 3:1 | 4,5:1 |
| Componentes de interface / ícones | 3:1 | — |
| Contraste máximo teórico | 21:1 (preto/branco) |
Para a maioria dos sites, cumprir AA já é uma boa base legal e prática. AAA vale a pena em formulários de saúde, avisos legais ou conteúdo pensado para leitores com baixa visão.
Exemplo prático com uma paleta de marca
Imagina uma marca com um roxo #7c3aed como cor de destaque e texto cinzento-escuro #111528 sobre um fundo quase branco #f5f7fc. Antes de aplicar estas cores num botão ou título, vale a pena verificar cada combinação:
| Par de cores (exemplo) | Rácio aproximado | Resultado |
|---|
| #111528 sobre #f5f7fc | ~17,8:1 | Passa AAA |
| Branco sobre #7c3aed (botão) | ~4,9:1 | Passa AA |
| #7c3aed sobre #f5f7fc (texto de link) | ~4,1:1 | Falha AA (texto normal) |
Nota: valores ilustrativos para explicar o método — confirma sempre os teus tons exatos na ferramenta.
Este último caso é comum: uma cor de marca vibrante funciona bem num botão sólido (onde o fundo é a própria cor), mas falha quando usada como texto sobre um fundo claro. A solução mais simples é escurecer ligeiramente o tom só para uso em texto — a ferramenta sugere automaticamente um ajuste de luminosidade quando um par falha o nível pretendido.
Para além do número: daltonismo e APCA
Resposta rápidaUm bom rácio de contraste não garante que o par de cores seja distinguível para pessoas daltónicas nem que "pareça" legível na prática — por isso vale a pena também simular a visão com daltonismo e olhar para a pontuação percetual APCA.
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de daltonismo vermelho-verde. Se dependes só da cor para distinguir "erro" de "sucesso" (vermelho vs. verde, por exemplo), uma parte considerável dos utilizadores pode não perceber a diferença — junta sempre um ícone, um padrão ou uma etiqueta de texto.
O APCA (Accessible Perceptual Contrast Algorithm), pensado para o rascunho do WCAG 3, tenta responder a uma pergunta mais direta do que o rácio clássico: "as pessoas conseguem mesmo ler isto?", considerando também o tamanho e peso da fonte. O verificador de contraste da ToolPico mostra ambos os métodos lado a lado, junto com uma simulação visual de protanopia, deuteranopia, tritanopia e acromatopsia.
Testa as tuas próprias cores agora
Introduz o par de cores do teu site e recebe o rácio WCAG, o resultado AA/AAA, a pontuação APCA e a simulação de daltonismo — tudo gratuito e sem enviar dados para nenhum servidor.
Experimentar a ferramenta →
Perguntas frequentes
O que é o rácio de contraste WCAG?
O rácio de contraste WCAG exprime a diferença entre a luminância relativa de duas cores como um número entre 1:1 (cores idênticas) e 21:1 (preto/branco puro). As Web Content Accessibility Guidelines (WCAG) definem rácios mínimos entre texto e fundo para que utilizadores com baixa visão consigam ler o conteúdo.
Qual é o rácio mínimo para o meu site passar no AA?
Para texto normal (menos de 18pt, ou menos de 14pt a negrito) o WCAG AA exige pelo menos 4,5:1. Para texto grande e para componentes de interface como bordas de botões ou ícones, o mínimo desce para 3:1.
AA chega, ou devo tentar sempre AAA?
AA é o nível mínimo exigido na maioria das normas legais e é suficiente para a generalidade dos sites. AAA (7:1 para texto normal, 4,5:1 para texto grande) é mais rigoroso e costuma reservar-se para conteúdo crítico, como informação de saúde ou formulários oficiais, onde a legibilidade máxima é prioritária.
Porque é que uma cor de marca pode falhar o teste mesmo parecendo escura?
A perceção de "escuro" no ecrã nem sempre corresponde à luminância relativa calculada pela fórmula WCAG, que pondera muito mais o canal verde (0,7152) do que o azul (0,0722). Um roxo ou azul saturado pode parecer escuro a olho nu mas ter luminância relativa mais alta do que se espera, resultando num rácio abaixo de 4,5:1 contra um fundo claro.
O que devo verificar além do rácio de contraste ao escolher cores?
Além do rácio numérico, vale a pena simular como o par de cores é percecionado por pessoas com daltonismo (protanopia, deuteranopia, tritanopia), já que aproximadamente 8% dos homens têm alguma forma de daltonismo vermelho-verde. Nunca uses só a cor para transmitir significado — combina sempre com um ícone, padrão ou etiqueta de texto.
Guias relacionados
Nota metodológica: os valores de rácio de contraste apresentados nos exemplos deste artigo são ilustrativos, calculados a partir das cores indicadas com a fórmula oficial WCAG 2.x, e servem para explicar o método — não substituem uma auditoria de acessibilidade completa ao teu site. Este conteúdo é apenas informativo e não constitui aconselhamento legal de conformidade.