Calculadora de contraste

Razão de contraste mede quão legível o texto é contra o fundo em escala de luminância de 1:1 (cores idênticas) a 21:1 (preto sobre branco). WCAG 2.x usa luminância relativa calculada de valores hex sRGB — não só matiz ou saturação. Dois azuis com mesma luminosidade podem se comportar diferente se um estiver mais perto de cinza médio, por isso julgar pares de cor a olho falha em revisão de acessibilidade.

Nível AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18 pt regular ou 14 pt negrito e maior). Nível AAA eleva para 7:1 em texto normal e 4,5:1 em texto grande. Componentes de UI não textuais e objetos gráficos precisam 3:1 contra cores adjacentes sob critério de sucesso WCAG 2.1 1.4.11 — esta calculadora foca em pares de texto mas a mesma matemática de razão se aplica.

Informe valores hex de primeiro plano (texto) e fundo. A ordem não muda a razão — #333 sobre #FFF equivale matematicamente a #FFF sobre #333, embora só uma combinação seja usável para tipografia. Hex inválido retorna traço até ambos os campos parsearem.

Exemplo prático com campos padrão: primeiro plano #333333 sobre fundo #FFFFFF. Cinza escuro sobre branco rende cerca de 12,63:1 — bem acima de AA e AAA para texto normal. O resumo mostra «Passa WCAG AA texto normal». Linhas AA grande e AAA leem Pass. Para cinza quase no limite como #767676 sobre branco, a razão cai para cerca de 4,54:1 — passando AA normal por pouco.

Paletas de marca frequentemente trazem cores de destaque que falham sobre branco — corrija com tons mais escuros para papéis de texto mantendo destaques mais brilhantes para manchetes grandes ou ícones acima de 18 pt. Não confie só em peso de fonte para salvar contraste baixo; negrito ajuda qualificação para limites de «texto grande» mas small caps finos ainda contam como texto normal.

Erros comuns incluem verificar amostras hex enquanto a UI real usa overlays semi-transparentes (alpha reduz contraste efetivo), ignorar cores de anel de foco, e testar só preto puro #000 em vez de cinzas suaves de corpo de texto. Outro erro é assumir que cores verde/vermelho de status são legíveis por padrão — muitas falham contra branco ou cinza escuro.

Esta ferramenta é verificação matemática, não auditoria legal de conformidade. Revisões reais de acessibilidade cobrem ordem de foco, caminhos de teclado, movimento e indicadores de status não coloridos. Sempre teste com usuários e tecnologia assistiva ao lançar UI de produção.

Limites: só pares hex sRGB — sem composição alpha, gradientes ou texto sobre fotografia salvo amostragem de cor plana. Antialiasing subpixel e sombras coloridas de texto podem deslocar contraste percebido ligeiramente da razão calculada.