Verificador de contraste WCAG — razão AA/AAA

Escolha cor de texto e fundo para ver a razão WCAG e o resultado AA/AAA em texto normal e grande. Passos: selecione ou digite HEX, clique Verificar, leia a razão e os selos, troque ou teste sugestões. Exemplo: #767676 sobre #ffffff ≈ 4,54:1 — passa AA em texto normal, não atinge AAA em texto normal. As cores ficam no navegador.

Primeiro plano

Fundo

Pré-visualização

Amostra de texto grande

Amostra de texto normal

Razão de contraste

—

Sugestões

Como funciona

Defina texto e fundo com o seletor ou digitando HEX. A página converte sRGB em luminância relativa, calcula a razão e exibe Aprovado/Reprovado para AA e AAA (texto normal e grande). Troque o par, copie um resumo ou aplique uma sugestão quando o contraste for baixo.

Regras esperadas

O contraste WCAG usa luminância relativa — não só o matiz. Consulte estas regras se a razão parecer estranha.

A luminância relativa L vem dos canais sRGB após a curva de linearização WCAG. Razão = (Lclaro + 0,05) / (Lescuro + 0,05).
Limites: AA texto normal 4,5:1, AA texto grande 3:1, AAA texto normal 7:1, AAA texto grande 4,5:1. Uma razão alimenta os quatro selos.
Somente HEX sRGB opaco (#RGB ou #RRGGBB). HEX inválido gera erro; primeiro plano e fundo iguais dão 1:1 e reprovam todos os níveis.
Privacidade: as cores são processadas localmente nesta aba — nada vai ao servidor.

Exemplo

Carregue o exemplo: primeiro plano #767676 sobre fundo #ffffff dá cerca de 4,54:1. AA texto normal aprova (≥4,5:1), AA texto grande aprova (≥3:1), AAA texto normal reprova (≥7:1), AAA texto grande aprova (≥4,5:1). Troque as cores para ver a razão mudar.

Bons momentos

UI: valide corpo de texto e rótulos sobre o fundo da marca antes da entrega.
Botões e chips: confira branco sobre cor ou o inverso para AA normal ou grande.
Modo escuro: troque superfícies claras/escuras e garanta que texto secundário mantenha 4,5:1 ou 3:1 no grande.

Frequently asked questions

Quais são os limites de contraste WCAG?

AA texto normal exige pelo menos 4,5:1; AA texto grande (18 pt regular ou 14 pt negrito) 3:1; AAA texto normal 7:1; AAA texto grande 4,5:1. Esta página mostra os quatro selos de uma vez.

O que conta como texto grande?

Texto grande tolera menos contraste por ser mais legível. WCAG considera grande quando ≥18 pt regular ou ≥14 pt em negrito. A pré-visualização traz linha grande e normal para comparar.

Minhas cores saem do navegador?

Não. O cálculo roda no navegador. Confira a aba Rede — os valores de cor não são enviados.

Como usar as sugestões de cor?

Abaixo de 4,5:1, a ferramenta pode sugerir um primeiro plano ou fundo mais claro/escuro que atinja AA em texto normal. São pontos de partida misturando com branco ou preto, não paletas finais de marca.

Qual a relação com tokens de marca?

Use esta página para validar qualquer par texto/fundo. Para paleta de marca com tokens semânticos, abra a ferramenta de tokens de cor; também dá para amostrar cores de uma foto com a extração de cores.

Dúvidas ou feedback

Algo pouco claro, quebrado ou faltando? Escreva abaixo — lemos cada mensagem sobre estas ferramentas.