Verificador de contraste

Um verificador de contraste compara duas cores, uma de primeiro plano e outra de fundo, e diz se um texto escrito com elas fica legível. Ele calcula a taxa de contraste WCAG e a compara com os quatro níveis padrão: AA para texto normal, AA para texto grande, AAA para texto normal e AAA para texto grande. Escolha as cores pelos seletores ou digite os códigos hex diretamente, e acompanhe a pré-visualização atualizando em tempo real.

Como a taxa é calculada?

A ferramenta segue a fórmula da WCAG 2 à risca. Os canais sRGB de cada cor são linearizados (desfazendo a curva gama que os monitores aplicam) e combinados numa luminância relativa, usando os pesos padrão de 21,26% para o vermelho, 71,52% para o verde e 7,22% para o azul, que refletem a sensibilidade da visão humana a cada canal. A luminância mais clara das duas é então comparada com a mais escura, com uma pequena constante somada a ambas para levar em conta a luz ambiente, resultando numa taxa entre 1:1 (cores idênticas) e 21:1 (preto puro sobre branco). Essa taxa é conferida contra quatro limites: 4,5:1 para AA em texto normal, 3:1 para AA em texto grande, 7:1 para AAA em texto normal e 4,5:1 para AAA em texto grande. Só cores hex de 3 e 6 dígitos são aceitas; o cálculo não precisa de alfa nem de outras notações, já que sempre compara duas cores totalmente opacas.

Meus dados são enviados para algum servidor?

Não. Todo o cálculo roda no navegador com algumas linhas de matemática, nada é enviado a um servidor. As cores que você testa nunca saem da sua máquina, então dá para verificar cores de marca de um design system interno ou da paleta de um cliente sem mandar nada para lugar nenhum.

O que conta como texto grande na WCAG?

A WCAG define texto grande como 18pt (24px) em peso regular, ou 14pt (18,66px) em negrito, para cima, e é por isso que ele recebe um limite mais brando que o texto do corpo: traços maiores e mais grossos continuam legíveis com menos contraste. Use o verificador para confirmar que o texto do corpo atinge o nível AA antes de publicar um design, checar se o rótulo de um botão fica legível sobre o fundo, ou auditar a paleta de cores de um site existente em busca de problemas de acessibilidade. Veja o guia Understanding Contrast Minimum do W3C para a fórmula exata e o raciocínio por trás dos níveis, ou o artigo sobre contraste do WebAIM para uma explicação em linguagem simples.