Verificador de contraste de cores WCAG

O Critério de Sucesso 1.4.3 do WCAG 2.1 (Contrast Minimum) exige uma razão de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande no Nível AA. O Nível AAA (1.4.6 Contrast Enhanced) eleva esses pisos para 7:1 para texto normal e 4.5:1 para texto grande. As razões são calculadas a partir da luminância relativa de cada cor e vão de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro).

AA é o alvo de conformidade mais comum para sites públicos, serviços governamentais e produtos comerciais — equilibra legibilidade com flexibilidade de design. AAA é um nível aprimorado mais rigoroso usado quando você precisa de máxima legibilidade (por exemplo, experiências de leitura long-form ou audiências com baixa visão significativa). Atingir AAA em todo elemento de UI costuma ser impraticável, então muitas equipes miram AA globalmente e AAA para texto de corpo crítico.

Texto grande é definido como pelo menos 18 pontos (tipicamente ~24px) em peso regular, ou pelo menos 14 pontos (tipicamente ~18.66px) em negrito. Títulos e copy de hero frequentemente se qualificam; parágrafos de corpo geralmente não. Texto grande recebe um limiar de contraste menor porque glifos maiores permanecem legíveis com contraste mais fraco — mas você ainda deve verificar o tamanho renderizado real no seu CSS, não só no arquivo de design.

Baixo contraste é uma das falhas de acessibilidade mais comuns. Usuários com baixa visão, adultos mais velhos, pessoas em telas escuras ou lavadas pelo sol, e muitos com deficiência de visão de cores dependem de diferença suficiente de luminância — não só de matiz — para ler texto. Checar o contraste cedo evita publicar interfaces que parecem polidas em condições ideais, mas ficam inutilizáveis para uma grande parcela de visitantes reais.