Ověření screenshotu, jehož zdroj nemáš — marketingová stránka, UI konkurence, PDF. Audit loga na rušném fotografickém pozadí, kde "barva pozadí" není jedna hodnota. Kontrola nejhoršího případu kontrastu podél gradientu nebo za průsvitným textem. Rychlé porovnání dvou UI stavů (např. button rest vs hover) bez přebudovávání designu.

Anti-aliasing. Hrany textu se zprůměrují do barev mimo design intent. Klikni doprostřed tahu písmena, ne na hranu. JPEG komprese. Silně komprimované obrázky mají barevný drift v plochých oblastech. Průměr 5×5 to vyhladí. Průsvitné vrstvy. Pro kontrast je důležitý vyrenderovaný pixel, ne zdrojová barva. Tento nástroj čte vyrenderovaný pixel — přesně to, co chceš. Kontroluješ barvy, ne design intent. Pokud tvůj button projde AA ve stavu rest, ale padne na hover v dalším screenshotu, oba stavy jsou accessibility failures. Škálování obrázku. Nástroj zmenší velké obrázky kvůli výkonu. Vzorkovaný pixel odráží zobrazený pixel; pokud potřebuješ pixel-perfect vzorek velmi malého UI prvku, ořež obrázek před nahráváním.

Kontrastní kontrola na obrázku

Klikni dva libovolné body v obrázku a zkontroluj WCAG kontrast — AA, AAA, prahy pro velký text. Postavené pro designéry, kteří ověřují reálné screenshoty, nejen hex kódy.

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

—

Výsledek

Sample two colours to see the contrast ratio.

K čemu to slouží?

WCAG contrast checkery normálně potřebují dva hex kódy — ale designer dělající accessibility pass na skutečném screenshotu nemá hex kódy, má pixely. Tenhle nástroj ti umožní nahrát obrázek (screenshot, hero design, logo na rušném pozadí) a kliknout na dva libovolné body. Vzorkuje barvu pod kurzorem (1 pixel nebo průměr 3×3 / 5×5) a vypočítá WCAG 2.1 contrast ratio mezi nimi. Verdikt pro AA, AA-large, AAA, AAA-large a práh UI komponent (1.4.11). Vše v prohlížeči.

Kdy to použít

Ověření screenshotu, jehož zdroj nemáš — marketingová stránka, UI konkurence, PDF.
Audit loga na rušném fotografickém pozadí, kde "barva pozadí" není jedna hodnota.
Kontrola nejhoršího případu kontrastu podél gradientu nebo za průsvitným textem.
Rychlé porovnání dvou UI stavů (např. button rest vs hover) bez přebudovávání designu.

Jak vzorkování funguje

1-pixel vzorek je přesný, ale šumlivý — anti-aliased hrany, JPEG artefakty a subpixel rendering způsobují, že sousedi se liší. Průměr 5×5 je obvykle to, co chceš na UI: vrátí barvu, kterou by člověk popsal, ne přesný pixel pod kliknutím. Použij 1px při ověřování hrany loga nebo ostré barevné hranice.

Časté chyby

Anti-aliasing. Hrany textu se zprůměrují do barev mimo design intent. Klikni doprostřed tahu písmena, ne na hranu.
JPEG komprese. Silně komprimované obrázky mají barevný drift v plochých oblastech. Průměr 5×5 to vyhladí.
Průsvitné vrstvy. Pro kontrast je důležitý vyrenderovaný pixel, ne zdrojová barva. Tento nástroj čte vyrenderovaný pixel — přesně to, co chceš.
Kontroluješ barvy, ne design intent. Pokud tvůj button projde AA ve stavu rest, ale padne na hover v dalším screenshotu, oba stavy jsou accessibility failures.
Škálování obrázku. Nástroj zmenší velké obrázky kvůli výkonu. Vzorkovaný pixel odráží zobrazený pixel; pokud potřebuješ pixel-perfect vzorek velmi malého UI prvku, ořež obrázek před nahráváním.