Matriz de contraste de cores

Uma paleta pode parecer coerente e ainda conter combinações que dificultam ou impedem a leitura. Esta matriz calcula a luminância relativa WCAG 2 de cada cor hexadecimal informada, compara todas as cores entre si e devolve os resultados em uma matriz quadrada estável. Designers, desenvolvedores e profissionais de acessibilidade podem examinar de uma só vez toda a paleta de um sistema de design, sem verificar pares individualmente. As entradas são validadas, as cores são normalizadas e o resultado determinístico serve para auditorias automatizadas e relatórios versionados.

Leia a matriz sem perder a referência das cores

Envie uma lista com duas a cem cores hexadecimais. Formatos de três e seis dígitos são aceitos, com ou sem cerquilha inicial, e cada valor válido é normalizado como um código de seis dígitos em letras minúsculas. A resposta apresenta as cores normalizadas na mesma ordem e atribui um índice a cada uma.

As linhas e colunas seguem exatamente essa ordem; portanto, o valor na linha dois e coluna cinco descreve o contraste entre as cores de índices dois e cinco. A diagonal sempre vale 1, pois uma cor não contrasta consigo mesma, e a matriz é simétrica porque inverter primeiro plano e fundo não altera a relação WCAG. Cada relação exibida é arredondada para duas casas decimais, enquanto as luminâncias usam seis.

Cores duplicadas permanecem como posições distintas, o que ajuda a auditar tokens com o mesmo valor e funções semânticas diferentes. Esse modelo posicional facilita exibir a resposta em tabela, arquivá-la como evidência ou comparar versões.

Entenda o cálculo e os limites WCAG

O cálculo segue o método de luminância relativa da WCAG 2 para cores sRGB. Cada canal vermelho, verde e azul passa do valor sRGB codificado para luz linear e depois é combinado com os coeficientes padronizados. Para qualquer par, a luminância mais clara somada a 0.05 é dividida pela mais escura somada a 0.05, gerando uma relação de 1 a 21.

A resposta inclui os limites conhecidos: 4.5 para texto normal AA, 7 para texto normal AAA, 3 para texto grande AA e 4.5 para texto grande AAA. Compare cada célula com o limite adequado ao conteúdo e à tipografia reais. Uma relação isolada não declara uma interface inteira acessível, pois tamanho e peso da fonte, estados de interação, elementos não textuais e contexto também importam.

A ferramenta fornece evidências numéricas, não um veredito geral, permitindo que a auditoria aplique a regra correta a cada combinação pretendida sem transformar um valor arredondado em garantia ampla.

Use resultados determinísticos em auditorias de design

Uma matriz completa é mais útil quando a verificação da paleta pode ser repetida. Mantenha as cores em uma ordem documentada, como neutras, marca, estado e destaque, e salve a matriz junto da versão do sistema de design. Uma verificação de integração contínua pode comparar células escolhidas com limites obrigatórios, enquanto uma pessoa revisora examina a tabela inteira em busca de combinações fracas inesperadas.

Listas inválidas, paletas fora do tamanho permitido e valores hexadecimais malformados são rejeitados com um índice claro. O teto de cem cores limita a matriz quadrática a dez mil células. Resolva transparência e composição antes da chamada: cores alfa são rejeitadas porque dependem do fundo.

Converta nomes, HSL, valores de gama ampla ou objetos de ferramentas de design para hex sRGB opaco, garantindo uma base explícita e reproduzível.