Verificador de Contraste de Cor (WCAG)

Verifique se duas cores atendem aos mínimos de contraste WCAG 2.1.

Contraste e acessibilidade

O WCAG (Web Content Accessibility Guidelines) define proporções mínimas de contraste para texto legível. O nível AA — o padrão que a maioria dos sites busca — exige 4.5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt em negrito). O AAA é mais rigoroso, em 7:1. Não atingir esses valores torna seu site ilegível para usuários com baixa visão ou telas mais antigas.

Proporções de contraste não são intuitivas. Vermelho no preto pode parecer vibrante, mas atinge apenas 5.25:1 — passando raspando no AA. Cinza pálido em fundos brancos, comum em designs 'minimalistas' modernos, frequentemente falha completamente. Esta calculadora mostra a proporção e quais níveis do WCAG cada par de cores atende.

Frequently asked questions

O que é o WCAG e quais são os requisitos de contraste?
O WCAG (Web Content Accessibility Guidelines) é o padrão para acessibilidade web. Os requisitos de contraste: o nível AA exige razão de contraste de 4.5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt em negrito). O AAA (mais rigoroso) exige 7:1 e 4.5:1 respectivamente. A maioria dos sites mira o AA.
Como a razão de contraste é calculada?
Comparando a luminância relativa de duas cores: razão = (L1 + 0.05) / (L2 + 0.05), onde L1 é a cor mais clara e L2 a mais escura. Branco sobre preto é 21:1 (o máximo). Vermelho puro (#FF0000) sobre preto puro é apenas 5.25:1 — o vermelho é perceptualmente mais escuro do que você esperaria.
Por que alguns pares de cores parecem ok mas falham?
Seus olhos se ajustam ao contexto. Cinza-sobre-cinza pode parecer legível para alguém com visão perfeita em boa iluminação, enquanto falha para usuários com baixa visão, monitores mais antigos, reflexo de luz solar ou daltonismo. As razões do WCAG são mínimos que funcionam para o público mais amplo — não o padrão 'parece bom para mim'.
E elementos que não são texto?
O WCAG 2.1 adicionou a diretriz 1.4.11: componentes de UI e objetos gráficos precisam de contraste de 3:1 em relação às cores adjacentes. Isso inclui bordas de formulários, ícones, gráficos e indicadores de foco. Bordas cinza-claro sutis em fundos brancos falham nisso — um problema comum em designs minimalistas modernos.

Calculadora de taxas do Shopify Payments

Taxas de processamento do Shopify Payments por nível de plano (Basic/Shopify/Advanced/Plus), online vs. presencial, mais acréscimo por gateway de terceiros.

Gerador Aleatório

Números, senhas e strings aleatórios seguros.

Calculadora de taxas do Mercari

Taxa de venda do Mercari + processamento de pagamento com modo lucro e busca de meta.