Verificador de Contraste WCAG
Verifique a taxa de contraste entre texto e fundo segundo os padrões WCAG AA e AAA — com pré-visualização ao vivo em texto normal e grande.
801 visualizações
A rápida raposa marrom salta sobre o cão preguiçoso
Exemplo de texto grande 24px
O que a taxa significa
A taxa de contraste compara a luminância relativa de duas cores, de 1:1 (idênticas) a 21:1 (preto sobre branco). O WCAG exige 4,5:1 para texto normal (AA) e 3:1 para texto grande (≥24 px, ou ≥18,7 px em negrito); o nível AAA, mais rigoroso, pede 7:1 e 4,5:1. Componentes de interface e elementos gráficos precisam de 3:1 em relação às cores adjacentes.
O cálculo lineariza cada canal sRGB, aplica pesos (L = 0,2126R + 0,7152G + 0,0722B) e calcula (L₁+0,05)/(L₂+0,05). A intuição costuma falhar aqui — um cinza médio #777 sobre branco parece perfeitamente legível para muitos olhos, mas obtém 4,48:1, um pouco abaixo do AA. As margens existem para usuários com baixa visão, luz solar forte e telas de baixa qualidade.
Perguntas Frequentes
Trocar o texto pelo fundo muda a taxa?
Não — a fórmula sempre coloca a cor mais clara no numerador, então a taxa é simétrica. A legibilidade ainda pode parecer diferente de forma subjetiva (halo de texto claro sobre fundo escuro), mas a pontuação WCAG é idêntica.
O que conta como texto grande?
24 px (18 pt) regular ou cerca de 18,7 px (14 pt) em negrito para cima. O texto grande só precisa de 3:1 no nível AA porque letras maiores continuam legíveis com menos contraste.
Minha cor de marca não passa no teste — e agora?
Mantenha-a para elementos decorativos e escureça ou clareie o uso em texto até que passe; uma escala de tons ajuda nisso. Textos de placeholder e estados desabilitados são isentos da exigência, mas vale manter um nível razoável mesmo assim.
Ferramentas Semelhantes
Reportar um Problema
Verificador de Contraste WCAG