Qual proporção de contraste o WCAG exige?

O WCAG 2.1 define dois limites. AA - o piso legal mais comum - exige 4,5:1 para texto normal e 3:1 para texto grande (18 pt+, ou 14 pt+ em negrito). AAA sobe para 7:1 e 4,5:1. Componentes UI não-textuais e objetos gráficos precisam de 3:1 contra o vizinho imediato.

Como a proporção é calculada?

É a razão das luminâncias relativas: (L_clara + 0,05) / (L_escura + 0,05). A luminância é uma soma ponderada dos canais RGB com gamma corrigido (0,2126 R + 0,7152 G + 0,0722 B). O offset de 0,05 estabiliza a fórmula em fundos pretos puros. O resultado vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco).

O que conta como «texto grande»?

O WCAG define texto grande como 18 pt ou mais, OU 14 pt ou mais em negrito. Isso é cerca de 24 px / 18,66 px em pixels CSS no DPI padrão de 96. Texto grande só precisa de 3:1 (AA) ou 4,5:1 (AAA) porque glifos maiores continuam legíveis com menos contraste - texto pequeno e fino precisa de mais separação.

A proporção muda no modo escuro?

Sim - depende apenas das cores efetivamente renderizadas, então é preciso checar os dois modos. Um `#475569` sobre `#ffffff` passa em AA (6,5:1), mas se seu token de modo escuro troca para `#475569` sobre `#0f172a`, fica em 1,6:1 e reprova feio. Teste as duas superfícies; é exatamente por isso que designers entregam tokens de cor claros + escuros, e não uma paleta única compartilhada.

E texto com anti-aliasing ou imagens de fundo?

A proporção WCAG assume cores chapadas. Para texto sobre imagem, audite o pior pixel sob o texto (geralmente o mais claro para texto escuro). Para texto com fundo translúcido ou sombra, calcule a proporção contra a cor efetivamente renderizada. A maioria das ferramentas - incluindo esta - só checa pares de cores chapadas; auditorias sensíveis a imagens exigem outra ferramenta ou inspeção manual.

Passar no WCAG basta para acessibilidade?

Contraste é necessário, mas não suficiente. Você também precisa de fontes legíveis, HTML semântico, textos alternativos, suporte de teclado, indicadores de foco (que precisam de 3:1 contra o fundo) e por aí vai. Contraste é o teste de acessibilidade mais fácil de automatizar, daí a atenção desproporcional - mas é um entre muitos.

Verificador de contraste

Verificador de contraste WCAG com proporção ao vivo, selos AA/AAA e texto de exemplo.

Primeiro plano

Fundo

Texto de exemplo

Texto corrido a 14 pt regular - teste mais rigoroso para contraste de texto normal.

Texto corrido a 16 pt regular - tamanho padrão do navegador.

Texto grande em negrito a 14 pt - conta como «grande» pela WCAG.

Texto grande a 18 pt regular - limite «texto grande» WCAG.

Título - 24 pt, espaço de sobra para respirar.

Proporção de contraste

14.68:1

AA texto normal (4,5:1)Aprovado
AA texto grande (3:1)Aprovado
AAA texto normal (7:1)Aprovado
AAA texto grande (4,5:1)Aprovado

Escolha uma cor de primeiro plano e outra de fundo. A proporção atualiza ao digitar, e quatro selos indicam se o par passa em WCAG AA e AAA para texto normal e grande. O texto de exemplo aparece nos tamanhos reais da spec (14 pt regular, 14 pt bold = grande, 18 pt = grande) para conferir visualmente, não só pelo número.

Como usar

Escolha as cores
Use os seletores de primeiro plano e fundo, ou cole valores hex. A proporção atualiza ao vivo.
Leia os selos
Quatro selos mostram pass/fail para AA-normal, AA-grande, AAA-normal, AAA-grande. Os que importam dependem do tamanho do seu texto.
Experimente a troca
Clique em trocar para inverter primeiro plano e fundo - útil ao desenhar estados invertidos (botões cheios, callouts invertidos).
Confira no olho
O texto de exemplo aparece nos tamanhos reais do WCAG. Se a proporção passa mas o texto parece sujo, sua fonte está fina demais - tente um peso maior.

O que é?

Um verificador de contraste calcula a proporção de contraste WCAG entre duas cores - geralmente texto sobre o fundo - e informa se o par atende a cada nível WCAG. A proporção é a razão das luminâncias relativas (medida perceptiva de brilho), com um offset para estabilizar a fórmula nos extremos. Mais alto = mais legível; 4,5:1 é o piso WCAG AA para corpo de texto normal, 7:1 o de AAA.

Quando usar

Auditar todo par texto/fundo de um design system, conferir cores frente a requisitos legais de acessibilidade (Section 508 nos EUA, EN 301 549 na UE, AODA em Ontário), escolher cores de marca que sobrevivem tanto em tema claro quanto escuro, escolher cores de anel de foco que atingem 3:1 contra a UI ao redor, validar cores de gráfico contra linhas de grade e revisar uma paleta antes de publicar.

Erros comuns

Testar só a versão mais brilhante de um token (a troca para modo escuro frequentemente falha). Tratar 3:1 como «bom o suficiente» para corpo de texto - esse é o limite para texto grande; corpo pequeno precisa de 4,5:1. Esquecer que isenções para texto desabilitado existem no WCAG mas não ajudam o usuário final - se texto desabilitado não dá para ler, seu formulário está quebrado. Aprovar pares a partir de um screenshot - a compressão JPEG desloca matizes; teste sempre os hex reais dos design tokens.

FAQ

Qual proporção de contraste o WCAG exige?: O WCAG 2.1 define dois limites. AA - o piso legal mais comum - exige 4,5:1 para texto normal e 3:1 para texto grande (18 pt+, ou 14 pt+ em negrito). AAA sobe para 7:1 e 4,5:1. Componentes UI não-textuais e objetos gráficos precisam de 3:1 contra o vizinho imediato.
Como a proporção é calculada?: É a razão das luminâncias relativas: (L_clara + 0,05) / (L_escura + 0,05). A luminância é uma soma ponderada dos canais RGB com gamma corrigido (0,2126 R + 0,7152 G + 0,0722 B). O offset de 0,05 estabiliza a fórmula em fundos pretos puros. O resultado vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
O que conta como «texto grande»?: O WCAG define texto grande como 18 pt ou mais, OU 14 pt ou mais em negrito. Isso é cerca de 24 px / 18,66 px em pixels CSS no DPI padrão de 96. Texto grande só precisa de 3:1 (AA) ou 4,5:1 (AAA) porque glifos maiores continuam legíveis com menos contraste - texto pequeno e fino precisa de mais separação.
A proporção muda no modo escuro?: Sim - depende apenas das cores efetivamente renderizadas, então é preciso checar os dois modos. Um `#475569` sobre `#ffffff` passa em AA (6,5:1), mas se seu token de modo escuro troca para `#475569` sobre `#0f172a`, fica em 1,6:1 e reprova feio. Teste as duas superfícies; é exatamente por isso que designers entregam tokens de cor claros + escuros, e não uma paleta única compartilhada.
E texto com anti-aliasing ou imagens de fundo?: A proporção WCAG assume cores chapadas. Para texto sobre imagem, audite o pior pixel sob o texto (geralmente o mais claro para texto escuro). Para texto com fundo translúcido ou sombra, calcule a proporção contra a cor efetivamente renderizada. A maioria das ferramentas - incluindo esta - só checa pares de cores chapadas; auditorias sensíveis a imagens exigem outra ferramenta ou inspeção manual.
Passar no WCAG basta para acessibilidade?: Contraste é necessário, mas não suficiente. Você também precisa de fontes legíveis, HTML semântico, textos alternativos, suporte de teclado, indicadores de foco (que precisam de 3:1 contra o fundo) e por aí vai. Contraste é o teste de acessibilidade mais fácil de automatizar, daí a atenção desproporcional - mas é um entre muitos.