Calcular contraste de cores WCAG

Ela retorna a luminância de cada cor, a razão de contraste resultante e indicadores claros de aprovação AA e AAA para textos normais e grandes. Você pode usá-la para revisar tokens de design, validar cores da interface antes do lançamento ou incluir uma verificação de acessibilidade repetível em um fluxo automatizado. As entradas são cores hexadecimais explícitas, os cálculos são determinísticos e formatos inválidos geram um erro útil. A ferramenta no navegador atende verificações individuais; cada chamada pela API custa US$ 0,002.

Entenda os valores retornados pela calculadora

O resultado começa normalizando as duas entradas como cores hexadecimais minúsculas de seis dígitos; assim, uma forma curta como #fff sempre aparece como #ffffff. Em seguida, informa a luminância relativa do primeiro plano e do fundo. A luminância relativa varia de zero para preto a um para branco e é derivada dos canais sRGB linearizados, ponderados para representar a sensibilidade diferente do olho à luz vermelha, verde e azul. A razão de contraste compara a luminância mais clara com a mais escura e varia de 1:1, em cores idênticas, a 21:1, em preto e branco. A razão exibida é arredondada para duas casas decimais, mas cada decisão de aprovação usa o valor integral, sem arredondamento. Essa diferença impede que um valor exibido como 4.50 seja aprovado quando o valor real ainda está abaixo de 4.5. A resposta agrupa quatro valores booleanos para textos normais e grandes, facilitando tanto a apresentação a designers quanto a validação de políticas em testes automatizados.

Forneça cores válidas e interprete AA e AAA

Informe primeiro plano e fundo como cores hexadecimais de três ou seis dígitos, com ou sem o sinal de cerquilha inicial. Valores como #123, 123, #112233 e AABBCC são aceitos e normalizados. Nomes de cores CSS, expressões rgb() e hsl(), valores hexadecimais de quatro ou oito dígitos com alfa, textos vazios e valores que não sejam strings são rejeitados, pois opacidade e composição exigem contexto adicional. Para texto normal, o nível WCAG AA requer no mínimo 4.5:1 e AAA exige 7:1. Para texto grande, AA requer 3:1 e AAA exige 4.5:1. Em geral, texto grande significa pelo menos 18 pontos em peso normal ou 14 pontos em negrito, mas a capacidade não inspeciona tipografia; ela informa as duas matrizes para que sua aplicação escolha a adequada. Um resultado aprovado constitui apenas uma parte da avaliação e não comprova que toda a interface seja acessível.

Use os resultados nos fluxos de design e entrega

Comece pelos tokens reais de primeiro plano e fundo usados no componente, e não por cores coletadas de uma captura de tela compactada. Em uma revisão manual, compare texto corrido, texto secundário, links, rótulos de botões, dicas de formulários, indicadores de foco e estados desabilitados com todas as superfícies em que aparecem. Em um design system, mantenha uma matriz pequena de pares aprovados e chame a API sempre que a paleta mudar. Uma verificação de integração contínua pode rejeitar um par proposto quando o nível AA de texto normal for falso, enquanto permite uma combinação decorativa ou de título grande segundo uma regra documentada. Armazene as cores normalizadas e a razão junto ao teste para que revisores reproduzam o achado. Cada chamada automatizada custa US$ 0,002; entradas inválidas retornam erro. O algoritmo não usa rede, aleatoriedade ou hora atual, portanto o mesmo par sempre produz o mesmo resultado. Para transparências, gradientes, fotografias ou estados interativos, determine primeiro as cores renderizadas ou utilize uma auditoria no navegador com o contexto completo.