Verificador de taxa de contraste WCAG

Este verificador de taxa de contraste WCAG recebe duas cores hex — primeiro plano e fundo — e devolve a taxa de contraste oficial usada pelas Diretrizes de Acessibilidade para Conteúdo Web, junto com sinalizadores claros de aprovação ou reprovação AA e AAA, tanto para texto normal quanto para texto grande. Designers, desenvolvedores e auditores usam essa taxa para decidir se o texto do corpo, botões, rótulos e elementos de interface permanecem legíveis para pessoas com baixa visão ou diferenças na percepção de cor. O mecanismo segue a fórmula de luminância relativa da WCAG 2.x: cada canal hex é linearizado a partir do sRGB, a luminância é ponderada com os coeficientes padrão 0,2126, 0,7152 e 0,0722, e a taxa de contraste é (L mais clara mais 0,05) dividida por (L mais escura mais 0,05). Os limiares não são arredondados: texto normal precisa de pelo menos 4,5 para AA e 7 para AAA; texto grande precisa de pelo menos 3 para AA e 4,5 para AAA. Os resultados são determinísticos, sem chamadas de rede, amostragem, ou atalhos que dependam de data.

O que a taxa de contraste WCAG mede e o que a resposta contém

A taxa de contraste é o único número que a WCAG usa para descrever o quanto um texto se destaca do seu fundo, depois de considerar a percepção humana de luminância, em vez de uma simples distância RGB. Um par preto puro sobre branco puro alcança vinte e um para um, o máximo teórico para cores sRGB opacas, enquanto cores idênticas resultam em um para um, e reprovam em todo critério de texto.

Texto grande, em termos da WCAG, significa pelo menos dezoito pontos regular, ou o equivalente a catorze pontos em negrito; a ferramenta não mede o tamanho da fonte em si — ela apenas aplica os limiares de texto grande, para que você possa mapear a matriz para a sua escala de tipo.

Não há rastreamento de página, análise de CSS, mistura de opacidade, ou amostragem de gradiente: você fornece duas cores hex explícitas, e recebe uma matriz reproduzível, adequada para CI de tokens de design, back-ends de plugins do Figma, e comentários de tickets que precisam citar uma taxa numérica, em vez de uma opinião sobre uma captura de tela.

Como as entradas hex são lidas e como AA e AAA permanecem reproduzíveis

Os dois valores precisam ser hex: cerquilha inicial opcional, três dígitos que se expandem para seis (#abc vira #aabbcc), ou seis dígitos completos, sem diferenciar maiúsculas de minúsculas. Sufixos alfa, funções rgb(), funções hsl(), cores nomeadas do CSS, e inteiros soltos são rejeitados, com uma mensagem que nomeia o campo e mostra o que foi recebido, para que um token ruim nunca vire um falso-aberto silencioso. Cada cor tem um teto de trinta e dois caracteres, para manter a validação barata, e bloquear acidentes de colagem.

Depois da análise, os canais são linearizados com a curva sRGB por partes da WCAG — divida por 12,92 abaixo do limiar de 0,04045, caso contrário eleve ((c mais 0,055) sobre 1,055) à potência 2,4 — e então combinados em luminância relativa. A taxa usa a luminância mais clara no numerador; os sinalizadores de aprovação comparam a taxa não arredondada em ponto flutuante contra 4,5, 7,0 e 3,0, para que um 4,50 exibido não possa esconder um verdadeiro 4,499 que deveria reprovar em AA.

Onde as verificações de contraste se encaixam em sistemas de design, revisões de UI e CI

Equipes de produto encontram exigências de contraste quando uma paleta de marca parece elegante em um slide de marketing, mas reprova no texto do corpo, em um cartão branco, quando um tema de modo escuro é gerado a partir de tokens claros, ou quando partes interessadas em jurídico e conformidade pedem evidência AA documentada, antes do lançamento.

Engenheiros conectam o mesmo contrato a verificações de pull request, que bloqueiam uma mudança de token, se o AA de texto normal cair abaixo de 4,5, para cores primárias do corpo, ou registram o status AAA de texto grande, para títulos de destaque que intencionalmente ficam mais próximos da superfície. Especialistas de QA e de acessibilidade usam a taxa numérica em relatórios de bug, para que os desenvolvedores corrijam o par exato, em vez de adivinhar a partir de uma captura de tela.

Equipes de conteúdo e de marketing verificam se os códigos hex de campanha ainda aprovam, quando colocados sobre fundos claros ou escuros do site. Combine-a com ferramentas de conversão de cor, quando precisar de intermediários RGB ou HSL, e com auditorias completas de acessibilidade de página, quando precisar varrer marcação ao vivo, em vez de dois valores hex explícitos.