À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso.
AaBbCcDdEeFf 0123456789 - texto de pré-visualização neste par 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
- Defina a cor de Primeiro plano: clique na amostra para abrir um seletor de cores, ou digite um valor hex no campo de texto.
- Defina a cor de Fundo da mesma forma. A ferramenta abre em
#e9e9f1sobre#07070b, um par que passa AAA por decisão de projeto. - Clique em Trocar para permutar as duas cores - útil para checar as variantes escuro-sobre-claro e claro-sobre-escuro de um tema.
- Leia o resultado: a razão (2 decimais) mais os três selos AA, AA large, AAA, cada um verde (passa) ou vermelho (falha).
- Confira o bloco de prévia abaixo - seu texto renderizado no par escolhido - para julgá-lo com seus próprios olhos.
- 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#rgbou#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