Verificar um screenshot cuja fonte você não tem — landing de marketing, UI de concorrente, PDF. Auditar um logo num fundo fotográfico carregado onde a "cor de fundo" não é um único valor. Conferir o pior caso de contraste ao longo de um gradiente ou atrás de texto translúcido. Comparar rapidamente dois estados de UI (ex. botão em descanso vs hover) sem refazer o design.

Anti-aliasing. Bordas de texto se mediam em cores fora do design intent. Clique no meio do traço da letra, não na borda. Compressão JPEG. Imagens muito comprimidas têm drift de cor em zonas chapadas. A média 5×5 suaviza. Camadas translúcidas. Pro contraste o que importa é o pixel renderizado, não a cor de origem. Esta ferramenta lê o pixel renderizado — exatamente o que você quer. Você confere as cores, não o intent. Se seu botão passa AA em descanso mas falha no hover noutro screenshot, ambos são bugs a11y. Escalonamento da imagem. A ferramenta reduz imagens grandes pra performance. O pixel amostrado reflete o pixel exibido; se precisa de sampling pixel-perfeito num elemento bem pequeno, faça crop antes do upload.

Verificador de contraste sobre imagem

Clique em quaisquer dois pontos de uma imagem pra verificar contraste WCAG — AA, AAA, limites de texto grande. Feito pra designers que verificam screenshots reais, não só códigos hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Resultado

Sample two colours to see the contrast ratio.

Para que serve?

Verificadores de contraste WCAG normalmente pedem dois códigos hex — mas um designer fazendo um pente-fino de acessibilidade num screenshot real não tem hex, tem pixels. Esta ferramenta deixa você fazer upload de uma imagem (screenshot, design hero, logo num fundo carregado) e clicar em dois pontos. Ela amostra a cor sob o cursor (1 pixel ou média 3×3/5×5) e calcula a razão de contraste WCAG 2.1. Veredito pra AA, AA-grande, AAA, AAA-grande e limite de componentes de UI (1.4.11). Tudo no browser.

Quando usar

Verificar um screenshot cuja fonte você não tem — landing de marketing, UI de concorrente, PDF.
Auditar um logo num fundo fotográfico carregado onde a "cor de fundo" não é um único valor.
Conferir o pior caso de contraste ao longo de um gradiente ou atrás de texto translúcido.
Comparar rapidamente dois estados de UI (ex. botão em descanso vs hover) sem refazer o design.

Como o sampling funciona

Um sample de 1 pixel é preciso mas barulhento — bordas com anti-alias, artefatos JPEG e renderização subpixel fazem vizinhos divergir. A média 5×5 normalmente é o que você quer em UI: ela devolve a cor que um humano descreveria, não o pixel exato sob o clique. Use 1px pra borda de logo ou fronteira nítida de cor.

Cuidados comuns

Anti-aliasing. Bordas de texto se mediam em cores fora do design intent. Clique no meio do traço da letra, não na borda.
Compressão JPEG. Imagens muito comprimidas têm drift de cor em zonas chapadas. A média 5×5 suaviza.
Camadas translúcidas. Pro contraste o que importa é o pixel renderizado, não a cor de origem. Esta ferramenta lê o pixel renderizado — exatamente o que você quer.
Você confere as cores, não o intent. Se seu botão passa AA em descanso mas falha no hover noutro screenshot, ambos são bugs a11y.
Escalonamento da imagem. A ferramenta reduz imagens grandes pra performance. O pixel amostrado reflete o pixel exibido; se precisa de sampling pixel-perfeito num elemento bem pequeno, faça crop antes do upload.