Verificador de Contraste de Cores

O que faz

Computa a razão de contraste WCAG 2.2 entre uma cor de primeiro plano e uma de fundo e a avalia contra os limiares de acessibilidade: AA para texto normal (≥ 4,5:1), AA large para texto grande (≥ 3:1) e AAA (≥ 7:1). A matemática é a fórmula real de luminância relativa - cada canal sRGB é linearizado, combinado com os coeficientes WCAG, e a razão é (clara + 0,05) / (escura + 0,05).

Ele aceita cores hex #rgb e #rrggbb (sem distinção de maiúsculas, com ou sem o # inicial), mostra selos de aprovação/reprovação para os três limiares de uma vez e renderiza um painel de prévia ao vivo - um pangrama e uma linha de glifos/números pintados no seu par exato de cores. 100% no lado do cliente.

Como usar

1. Defina a cor de Primeiro plano: clique na amostra para abrir um seletor de cores, ou digite um valor hex no campo de texto.
2. Defina a cor de Fundo da mesma forma. A ferramenta abre em #e9e9f1 sobre #07070b, um par que passa AAA por decisão de projeto.
3. Clique em Trocar para permutar as duas cores - útil para checar as variantes escuro-sobre-claro e claro-sobre-escuro de um tema.
4. Leia o resultado: a razão (2 decimais) mais os três selos AA, AA large, AAA, cada um verde (passa) ou vermelho (falha).
5. Confira o bloco de prévia abaixo - seu texto renderizado no par escolhido - para julgá-lo com seus próprios olhos.
6. Se algum valor não for uma cor hex válida, a ferramenta mostra um erro e oculta os resultados até você corrigi-lo.

Exemplos

Verificado executando contrastRatio() de src/lib/color.ts (a função exata que a ferramenta usa):

#e9e9f1 on #07070b   16.65:1   AA pass · AA large pass · AAA pass   (tool defaults)
#ffffff on #000000   21.00:1   AA pass · AA large pass · AAA pass   (the maximum)
#f8fafc on #1e293b   13.98:1   AA pass · AA large pass · AAA pass
#abc    on #000000   10.69:1   AA pass · AA large pass · AAA pass   (3-digit shorthand works)
#767676 on #ffffff    4.54:1   AA pass · AAA fail                   (the classic "just barely AA" gray)
#777777 on #ffffff    4.48:1   AA fail · AA large pass              (one notch darker fails AA)
#3b82f6 on #ffffff    3.68:1   AA fail · AA large pass              (Tailwind blue-500 on white)

O par #767676 vs #777777 mostra por que a matemática exata vence o olho nu: uma diferença de 1 unidade hex cruza a linha de 4,5:1 do AA.

Bom saber

• Privado: toda a matemática roda no seu navegador; nada é enviado a lugar nenhum.
• Cores nomeadas (red, white) e outros formatos de cor CSS são rejeitados - apenas hex. Digite #rgb ou #rrggbb.
• Não existe um selo separado AAA-large; a ferramenta mostra AA (normal), AA large e AAA (normal) exatamente como codificado.
• A razão é simétrica - permutar primeiro plano/fundo nunca muda o número, apenas a direção em que você lê a prévia.
• Ferramentas relacionadas: Seletor e Conversor de Cores, Color Palette Generator, CSS Gradient Generator