Grade de Contraste de Cores

A maioria dos verificadores de contraste compara uma cor de primeiro plano e uma cor de fundo de uma vez. Sistemas de design raramente param em um único par — uma paleta pode ter cinco cores de marca, três neutras e duas cores de destaque, e qualquer uma delas pode acabar como texto em qualquer outra. A Grade de Contraste de Cores verifica uma paleta inteira de uma vez: cole uma lista de cores hexadecimais e obtenha uma matriz de pares completa, com o índice de contraste WCAG 2.x exato e uma marca de aprovação/reprovação AA para cada combinação.

O que é contraste de cores WCAG?

WCAG 2.x define relative luminance — o quão brilhante uma cor parece, ponderada por como o olho humano percebe vermelho, verde e azul (L = 0.2126×R + 0.7152×G + 0.0722×B, usando canais sRGB linearizados) — e o contrast ratio entre duas cores, (L1 + 0.05) / (L2 + 0.05) (mais claro sobre mais escuro), que varia de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro). O limite WCAG AA para texto normal é 4.5:1 — o padrão que a maioria das auditorias de acessibilidade, Lighthouse e padrões legais (ADA, EN 301 549, Section 508) exigem. Esta ferramenta marca cada célula que ultrapassa 4.5:1 com ✓ e cada célula que não ultrapassa com ✗.

Como usar

1. Cole sua paleta no campo Cores — uma cor hexadecimal por linha, ou separadas por vírgula (por exemplo #000000, #FFFFFF, #FF0000). Hexadecimal de 3 dígitos (#fff) também funciona.
2. A grade é atualizada instantaneamente: a primeira linha e a primeira coluna listam suas cores, e todas as outras células mostram o índice de contraste dessa cor de linha usada como texto na cor da coluna como fundo, por exemplo 4.53:1 ✓.
3. Escaneie a grade para células ✗ — esses são pares que falhariam em WCAG AA para texto normal se usados ​​juntos, e valem a pena evitar ou ajustar.
4. Use Copy ou Download para exportar a grade como CSV para uma auditoria do sistema de design ou comentário de pull-request.

Até 12 cores são suportadas por grade (144 células) — suficiente para a maioria das paletas de marca e neutralidade de interface de uma vez. Qualquer entrada que não seja uma cor hexadecimal válida de 3 ou 6 dígitos é pulada em vez de quebrar a grade, e cores duplicadas são reduzidas a uma.

FAQ

Por que a diagonal é sempre 1.00:1 e marcada com ✗? Uma cor comparada consigo mesma tem luminância idêntica, então o índice é sempre exatamente 1:1 — o mínimo possível, e bem abaixo da barra AA de 4.5:1. Isso é esperado; a diagonal não é um emparelhamento significativo (ninguém define texto e fundo para a mesma cor), é apenas um subproduto de a grade ser N×N.

A grade é simétrica? Sim — o índice de contraste é simétrico por definição (depende apenas de qual luminância é mais clara e qual é mais escura, não qual cor é "primeiro plano"), portanto, a cor A na cor B sempre é igual à cor B na cor A.

O que a marca de aprovação ✓/✗ significa — é AA ou AAA? A marca de aprovação usa WCAG AA para texto normal (≥4.5:1), o limite que a maioria das auditorias e padrões legais verifica. Um par marcado com ✗ ainda pode passar no limite de Texto Grande AA mais flexível (3:1); para um detalhamento de par único em todos os quatro limites WCAG (AA/AAA × normal/grande), incluindo uma cor acessível sugerida, use o Accessible Color Pair Finder.

Posso colar cores com nomes ou texto adicional depois delas? A ferramenta procura uma cor hexadecimal válida no início de cada linha ou entrada separada por vírgula — texto formatado como #RRGGBB ou #RGB. Qualquer coisa que não seja uma cor hexadecimal reconhecível é pulada, portanto, mantenha cada entrada apenas com a cor em si.

Por que limitar a lista a 12 cores? Além de 12 cores, a grade cresce para 144+ células e fica difícil de digitalizar visualmente — se você precisar verificar uma paleta maior, divida-a em grupos relacionados menores (por exemplo, neutros e depois cores de marca).

Meus dados de cores são enviados para algum lugar? Não — cada cálculo é executado inteiramente no seu navegador. Nada é enviado ou armazenado.