Verificador de contraste de cor WCAG
Defina uma cor de texto e uma cor de fundo e veja a relação de contraste, quais níveis WCAG ela passa e como o texto realmente fica em três tamanhos. Se reprovar, um botão sobe ou desce a cor do texto até ela passar.
A cor das próprias letras, incluindo o texto de links e botões.
A cor que está logo atrás do texto, que nem sempre é o fundo da página.
Texto grande, 24 px em negrito
Texto normal a 16 px. É o tamanho em que a maior parte de uma página é composta, e o tamanho para o qual o limiar de 4.5:1 foi escrito.
Letras miúdas a 13 px: legendas, dicas de formulário, notas de rodapé, o tipo pequeno que ninguém testa.
Como a relação é calculada
O número não é uma diferença entre duas cores. É uma relação entre duas luminâncias, e chegar até ela leva três passos.
Primeiro cada canal é dividido por 255 e a curva gama sRGB é desfeita, porque o valor guardado em um código hexadecimal não é proporcional à luz que uma tela emite. Depois os três canais lineares são ponderados e somados: 0.2126 × R + 0.7152 × G + 0.0722 × B. O verde carrega a maior parte do peso porque a visão humana é extremamente sensível a ele, e é por isso que um verde puro e um azul puro que parecem igualmente "médios" têm luminâncias muito diferentes. Por fim os dois resultados entram em (mais claro + 0.05) / (mais escuro + 0.05).
Vale a pena conhecer esse 0.05. Ele representa a luz ambiente refletida na tela, e é a razão pela qual a escala para em 21:1 em vez de ir ao infinito, e pela qual duas cores muito escuras sempre ficam perto de 1:1 por mais diferentes que pareçam em um quarto escuro.
Como a fórmula ordena as duas luminâncias antes de dividir, ela é simétrica. Trocar texto e fundo dá exatamente o mesmo número. O botão de troca aqui muda a pré-visualização, não o resultado.
Para que serve cada limiar
- 4.5:1 — WCAG AA para texto normal. É o número citado pela maior parte da legislação de acessibilidade, e o primeiro que uma auditoria verifica.
- 3:1 — AA para texto grande, que a WCAG define como 18pt (24px) normal ou 14pt (18.66px) em negrito. Note que o que conta é o tamanho renderizado, não o tamanho no seu arquivo de design.
- 7:1 — AAA para texto normal, e 4.5:1 para texto grande. Vale mirar nele em leituras longas.
- 3:1 — o mínimo para componentes de interface e gráficos com significado sob a WCAG 2.1. Bordas de campos, estados de alternadores, ícones e indicadores de foco caem aqui, e são os mais esquecidos.
Duas coisas estão explicitamente isentas: logotipos e o texto que faz parte de um controle inativo ou desabilitado. Um botão acinzentado pode reprovar sem problema. Um placeholder dentro de um campo não, porque as pessoas o leem.
Onde o número da WCAG 2 erra
Vamos falar claro: sabe-se que a fórmula é imprecisa em alguns casos, e ainda assim é por ela que você é medido.
Seu ponto mais fraco é texto claro sobre fundo escuro. O mesmo par de cores recebe um único número não importa qual dos dois seja o texto, mas na prática claro sobre escuro se lê de forma diferente de escuro sobre claro, em parte porque o texto claro se espalha sobre o fundo em tamanhos pequenos. Paletas de modo escuro que passam com folga ainda podem cansar, e algumas que reprovam são perfeitamente legíveis.
Ela também não sabe nada sobre o peso da fonte além da divisão grosseira entre texto normal e texto grande. Uma fonte de traço fino com peso 300 a 4.5:1 é mais difícil de ler do que uma de peso 600 a 4:1, porque os traços finos ficam ainda mais finos com o anti-aliasing. Trate o limiar como um piso para fontes de texto sólidas, e deixe margem para tudo que for leve ou condensado.
A APCA, o método de contraste em desenvolvimento para a WCAG 3, resolve as duas coisas: distingue a direção e leva em conta tamanho e peso. Ainda não é um requisito de conformidade, então esta ferramenta implementa a WCAG 2, que é o que suas obrigações legais e seus auditores citam hoje.
O que esta ferramenta não enxerga
Ela aceita duas cores opacas. Se o seu texto ou o fundo dele tiver canal alfa, achate a cor primeiro — texto branco a 70% de opacidade sobre um painel azul é uma cor diferente de branco, e colar #FFFFFF aqui vai dar uma resposta otimista demais.
Ela também não ajuda com texto sobre uma fotografia, um gradiente ou um vídeo. Ali a relação muda pixel a pixel, e o único número que importa é o pior em qualquer ponto sob o texto. As soluções habituais são uma camada sólida atrás do texto ou uma sombra nas letras, e nenhuma pode ser medida aqui.
Por fim, contraste não é daltonismo. Duas cores podem passar em 7:1 e ainda assim ser confundíveis para alguém com uma deficiência na visão de cores, porque a relação só mede luminosidade. Se um vermelho e um verde na sua interface significam coisas diferentes, eles precisam também de uma forma, um ícone ou um rótulo diferente.
Perguntas frequentes
De que relação de contraste eu preciso para passar na WCAG?
Pelo menos 4.5:1 para texto normal e 3:1 para texto grande para atender ao AA, o nível citado pela maior parte das leis de acessibilidade. O AAA pede 7:1 e 4.5:1. Componentes de interface, como bordas de campos e anéis de foco, precisam de 3:1.
Por que a relação mostra 4.49 quando outras ferramentas dizem 4.5?
Esta ferramenta trunca em vez de arredondar, porque um 4.5 arredondado que na verdade é 4.497 reprova no teste mesmo parecendo aprovado. Se você vê 4.49 aqui, está abaixo do limiar e uma ferramenta de auditoria vai dizer isso.
Trocar o texto e o fundo muda alguma coisa?
O número não. A fórmula da WCAG ordena as duas luminâncias antes de dividir, então a relação é idêntica nos dois sentidos. O que muda é a aparência do par, e é para isso que serve a pré-visualização.
Que tamanho conta como texto grande?
24px, ou 18.66px em negrito, no tamanho que o navegador realmente renderiza. A WCAG expressa isso como 18pt e 14pt em negrito. Lembre-se de que um usuário que aumenta o zoom, ou uma página com um tamanho de fonte raiz menor, pode tirar o texto da categoria de texto grande.
Como eu testo texto semitransparente?
Descubra primeiro a cor achatada. Misture a cor do texto com o que estiver atrás dela na opacidade que você está usando, pegue o hexadecimal resultante e teste esse. Esta ferramenta assume que as duas cores são totalmente opacas.
Última atualização 19 de setembro de 2026