Verificador de contraste de cores

1. 01Informe a cor do textoUse um código HEX, como #3B82F6 ou a forma curta #0F0.
2. 02Informe a cor do fundoO botão de inverter troca as duas de lugar, útil para testar o mesmo par nos dois sentidos.
3. 03Leia a relação e os critériosA relação aparece junto com aprovado ou reprovado em AA e AAA, para texto normal e para texto grande.

• Conferir a paleta antes de publicarTestar as combinações principais de texto e fundo evita descobrir o problema depois que o site já está no ar.
• Ajustar um botão ou um avisoTexto claro sobre cor de marca costuma ser o ponto que reprova, principalmente em amarelo e em verde claro.
• Responder a uma exigência de acessibilidadeEdital, cliente e auditoria costumam citar AA da WCAG. A ferramenta diz se o par passa nesse critério.

• Preto sobre brancoA combinação de maior contraste possível, com relação 21:1. Ela passa em todos os critérios.
• Cinza claro sobre brancoUm cinza claro demais pode ficar abaixo de 4,5:1 e reprovar em AA para texto normal, mesmo parecendo legível para quem tem boa visão.
• Texto grande muda o critérioO mesmo par pode reprovar para texto normal e passar para texto grande, porque o limite de AA cai de 4,5:1 para 3:1.

• Teste a cor de marca sobre branco e sobre pretoMuita paleta funciona em um fundo e falha no outro. O botão de inverter serve exatamente para isso.
• Passar no número não é o fimA relação de contraste não mede tamanho de fonte, peso nem espaçamento, e os três afetam a leitura tanto quanto a cor.

A relação compara a luminosidade das duas cores e vai de 1:1, quando elas são idênticas e o texto some, até 21:1, que é preto sobre branco. Ela não é uma medida de diferença de matiz: duas cores bem diferentes, como vermelho e verde, podem ter luminosidade parecida e contraste baixo, o que é justamente o caso que cria problema para quem tem daltonismo. É por isso que o cálculo usa luminosidade e não a distância entre as cores.

O critério AA da WCAG pede 4,5:1 para texto normal e 3:1 para texto grande. O AAA, mais exigente, pede 7:1 e 4,5:1. Texto grande é definido como 18pt ou mais, que dá por volta de 24px, ou 14pt em negrito, que dá por volta de 19px. Na prática AA é o patamar que a maioria dos projetos adota e que costuma aparecer em exigência de contrato; AAA é para contexto em que a leitura é crítica.

Ela mede o contraste entre duas cores sólidas e nada além disso. Texto sobre imagem ou sobre degradê não tem uma cor de fundo única, então precisa ser avaliado ponto a ponto, no trecho de pior contraste. A ferramenta também não verifica tamanho de fonte real, foco de teclado, leitor de tela nem qualquer outro critério de acessibilidade: aprovar aqui não quer dizer que a página está acessível, apenas que esse par de cores está adequado.

O cálculo acontece no seu navegador. As cores que você digita não são enviadas nem salvas.

Qual contraste mínimo eu preciso?

Para o critério AA da WCAG, 4,5:1 em texto normal e 3:1 em texto grande. Para AAA, 7:1 e 4,5:1.

O que conta como texto grande?

18pt ou mais, que dá por volta de 24px, ou 14pt em negrito, por volta de 19px. Abaixo disso vale o critério de texto normal.

Meu texto está sobre uma imagem. Como testo?

Escolha o trecho da imagem com pior contraste, pegue a cor desse ponto e teste esse par. Fundo variável não tem uma cor única para medir.

Passar em AA significa que a página está acessível?

Não. Significa que aquele par de cores está adequado. Acessibilidade também envolve tamanho de fonte, navegação por teclado, leitor de tela e vários outros critérios.

As cores que eu testo são salvas?

Não. Tudo é calculado no seu navegador e nada é enviado para um servidor.