Verificador de Matriz de Contraste de Cores

Por que verificar todas as combinações de cores de uma vez, em vez de uma a uma?

As diretrizes de acessibilidade WCAG exigem uma taxa de contraste mínima entre texto e cor de fundo, ou usuários com baixa visão ou daltonismo podem não conseguir ler o texto. Na prática, a maioria dos sites combina várias cores de marca, cores de fundo e cores de status —um título na cor principal sobre um cartão cinza claro, uma cor de aviso sobre branco, texto escuro sobre um fundo colorido— e verificar cada combinação manualmente facilmente leva a erros ou esquecimentos. Esta ferramenta permite colar todas as cores que você realmente usa e calcula instantaneamente a taxa de contraste para cada par possível, apresentada em uma única matriz —não é mais necessário verificar as combinações uma a uma.

Como a taxa é calculada — um exemplo concreto

A WCAG 2.1 define a taxa de contraste como (L1 + 0,05) / (L2 + 0,05), onde L1 e L2 são a luminância relativa das duas cores (valores mais altos significam mais próximo do branco). O preto puro #000000 contra o branco puro #FFFFFF obtém um perfeito 21:1, mas o cinza claro #999999 contra o branco obtém apenas 2,85:1 —bem abaixo do mínimo de 4,5:1 exigido para texto normal. Texto normal (abaixo de 18px, ou abaixo de 14px em negrito) precisa de AA ≥ 4,5:1, ou AAA ≥ 7:1 para um padrão mais rigoroso; texto grande (18px+ em negrito ou 24px+) tem um limite mais flexível de AA ≥ 3:1.

Como ler a matriz de resultados

Cada célula da matriz mostra a taxa de contraste entre a cor daquela linha e a cor daquela coluna, com código de cores: verde (aprova AAA), amarelo (aprova apenas AA) ou vermelho (reprova) —assim você identifica combinações problemáticas rapidamente, em vez de calcular cada uma manualmente.

O contraste é calculado exclusivamente a partir do valor RGB de cada cor —não considera o peso da fonte, o anti-aliasing ou sobreposições semitransparentes na renderização real. Sempre verifique novamente em um dispositivo real antes de publicar.