Verificando se a cor da sua marca em um card branco atende aos padrões de acessibilidade. Escolhendo a cor do texto de um botão que passe no AA contra um fundo na cor da marca. Auditando um design system token por token antes de subir para produção. Justificando uma mudança de cor para um stakeholder com um veredito concreto pass/fail. Testando o que seus usuários com preferências de contraste reduzido vão realmente ver.

Texto normal (abaixo de 18pt / 14pt bold): 4,5:1 para AA, 7:1 para AAA. Texto grande (≥18pt ou ≥14pt bold): 3:1 para AA, 4,5:1 para AAA. Componentes de UI & gráficos (ícones, focus rings, bordas de form, elementos de gráfico que transmitem informação): 3:1 para AA (WCAG 2.1 §1.4.11). Sem nível AAA.

"Texto grande" é maior do que você pensa. 18pt é mais ou menos 24px. 14pt bold é mais ou menos 19px bold. Texto de corpo a 16px não é texto grande — ele precisa do limite de 4,5:1. Texto claro sobre uma foto cheia de detalhes vai falhar. A razão de contraste é entre pixels específicos — sobreponha um gradiente escuro ou use um painel sólido para dar ao texto um fundo controlado. Anti-aliasing suaviza o contraste. 4,5:1 é o piso, não o objetivo. Leitura confortável geralmente quer 7:1 ou mais, especialmente para texto de corpo. Estados de hover e focus contam. Se seu botão passa no AA em repouso mas falha no hover, isso é um bug real de acessibilidade. WCAG 2.1 vs APCA. O novo APCA (Accessible Perceptual Contrast Algorithm), proposto para o WCAG 3, dá números diferentes e provavelmente melhores — mas o WCAG 2.1 é o padrão legal que a maioria das jurisdições ainda referencia. Use os números desta ferramenta para atender EN 301 549, ADA ou claims de conformidade AA. Não compense com transparência. Um foreground com 50% de alpha sobre um fundo conhecido tem um contraste efetivo diferente — calcule contra a cor real renderizada, não a original.

Verificador de Contraste WCAG

Verifique a razão de contraste entre duas cores. Veredito pass/fail para WCAG AA e AAA em qualquer tamanho de texto.

Foreground

Background

Resultado

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

Para que serve?

WCAG (Web Content Accessibility Guidelines) define uma razão mínima de contraste entre o texto e seu fundo para que pessoas com baixa visão, daltonismo ou em condições de reflexo ainda consigam ler. Esta ferramenta calcula essa razão (1:1 = idêntico, 21:1 = preto puro sobre branco puro) e diz se seu par de cores passa no WCAG 2.1 nível AA ou AAA, separadamente para texto normal, texto grande e componentes de UI. A matemática segue exatamente a fórmula de luminância da W3C.

Quando usar

Verificando se a cor da sua marca em um card branco atende aos padrões de acessibilidade.
Escolhendo a cor do texto de um botão que passe no AA contra um fundo na cor da marca.
Auditando um design system token por token antes de subir para produção.
Justificando uma mudança de cor para um stakeholder com um veredito concreto pass/fail.
Testando o que seus usuários com preferências de contraste reduzido vão realmente ver.

Os limites

Texto normal (abaixo de 18pt / 14pt bold): 4,5:1 para AA, 7:1 para AAA.
Texto grande (≥18pt ou ≥14pt bold): 3:1 para AA, 4,5:1 para AAA.
Componentes de UI & gráficos (ícones, focus rings, bordas de form, elementos de gráfico que transmitem informação): 3:1 para AA (WCAG 2.1 §1.4.11). Sem nível AAA.

Cuidados comuns

"Texto grande" é maior do que você pensa. 18pt é mais ou menos 24px. 14pt bold é mais ou menos 19px bold. Texto de corpo a 16px não é texto grande — ele precisa do limite de 4,5:1.
Texto claro sobre uma foto cheia de detalhes vai falhar. A razão de contraste é entre pixels específicos — sobreponha um gradiente escuro ou use um painel sólido para dar ao texto um fundo controlado.
Anti-aliasing suaviza o contraste. 4,5:1 é o piso, não o objetivo. Leitura confortável geralmente quer 7:1 ou mais, especialmente para texto de corpo.
Estados de hover e focus contam. Se seu botão passa no AA em repouso mas falha no hover, isso é um bug real de acessibilidade.
WCAG 2.1 vs APCA. O novo APCA (Accessible Perceptual Contrast Algorithm), proposto para o WCAG 3, dá números diferentes e provavelmente melhores — mas o WCAG 2.1 é o padrão legal que a maioria das jurisdições ainda referencia. Use os números desta ferramenta para atender EN 301 549, ADA ou claims de conformidade AA.
Não compense com transparência. Um foreground com 50% de alpha sobre um fundo conhecido tem um contraste efetivo diferente — calcule contra a cor real renderizada, não a original.