Verificador de Pares de Cores Acessíveis

Escolha uma cor de primeiro plano e uma de fundo, e esta ferramenta verifica se o par atende aos requisitos de contraste das Web Content Accessibility Guidelines (WCAG) — o padrão usado por auditorias de acessibilidade, Lighthouse e pela maioria dos requisitos legais de acessibilidade digital (ADA, EN 301 549, Section 508).

O que é contraste de cores WCAG?

O WCAG 2.x define duas fórmulas. Primeiro, a luminosidade relativa — o quão brilhante uma cor parece, ponderada pela forma como o olho humano percebe vermelho, verde e azul (L = 0.2126×R + 0.7152×G + 0.0722×B, usando canais sRGB linearizados). Segundo, a proporção de contraste entre duas cores — (L1 + 0.05) / (L2 + 0.05), a luminosidade mais clara sobre a mais escura — que varia de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro).

O WCAG define proporções mínimas para que o texto seja legível para pessoas com baixa visão ou deficiências na visão de cores:

• AA, texto normal: 4.5:1
• AA, texto grande (≥18pt, ou ≥14pt em negrito): 3:1
• AAA, texto normal: 7:1
• AAA, texto grande: 4.5:1

AA é o padrão que a maioria dos sites busca — é o que as auditorias de acessibilidade e a maioria das normas legais exigem. AAA é mais rígido e relevante principalmente para produtos governamentais ou de alta acessibilidade.

Como usar

1. Escolha sua cor de primeiro plano (texto) — digite um valor hex ou use o seletor de cores.
2. Escolha sua cor de fundo.
3. A tabela de resultados é atualizada instantaneamente com a proporção de contraste exata e um selo de aprovação/reprovação para todos os quatro limites (AA/AAA × normal/grande).
4. Se o seu par reprovar em AA para texto normal, a ferramenta também calcula um primeiro plano acessível sugerido — o ajuste de luminosidade mais próximo da sua cor original (mais escuro ou mais claro, o que representar a menor mudança visual) que atinge o limite de 4.5:1 mantendo o mesmo matiz e a mesma saturação.

Perguntas Frequentes

Por que o mesmo par às vezes passa para texto grande, mas reprova para texto normal? Texto maior e mais grosso é mais fácil de ler com contraste mais baixo, então o WCAG reduz a proporção para 3:1 (AA) ou 4.5:1 (AAA) para texto de pelo menos 18pt, ou 14pt em negrito.

O daltonismo afeta isso? A proporção de contraste é um cálculo de luminosidade, não de diferença de cor, por isso se mantém razoavelmente bem nas formas comuns de deficiência na visão de cores — mas não substitui a verificação de que a informação não é transmitida apenas pelo matiz (por exemplo, "vermelho = erro" também precisa de um ícone ou rótulo).

Por que meu primeiro plano sugerido não é o mesmo matiz que digitei? É o mesmo matiz e a mesma saturação — apenas a luminosidade muda, na direção (em direção ao preto ou ao branco) que alcança 4.5:1 com o menor desvio da sua cor original.

E se eu quiser conformidade com AAA? Verifique as linhas de AAA na tabela de resultados. O recurso de cor sugerida atualmente tem como alvo o AA para texto normal (4.5:1), o limite que a maioria das auditorias usa; uma cor que atende ao AA nem sempre atende ao AAA.

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