Overenie screenshotu, ktorého zdroj nemáš — marketingová stránka, UI konkurencie, PDF. Audit loga na rušnom fotografickom pozadí, kde "farba pozadia" nie je jedna hodnota. Kontrola najhoršieho prípadu kontrastu pozdĺž gradientu alebo za priesvitným textom. Rýchle porovnanie dvoch UI stavov (napr. button rest vs hover) bez prebudovávania dizajnu.

Anti-aliasing. Hrany textu sa spriemerujú do farieb mimo design intentu. Klikni do stredu ťahu písmena, nie na hranu. JPEG kompresia. Silno komprimované obrázky majú farebný drift v plochých oblastiach. Priemer 5×5 to zhladí. Priesvitné vrstvy. Pre kontrast je dôležitý vyrenderovaný pixel, nie zdrojová farba. Tento nástroj číta vyrenderovaný pixel — presne to, čo chceš. Kontroluješ farby, nie design intent. Ak tvoj button prejde AA v stave rest, ale padne na hover v ďalšom screenshote, oba stavy sú accessibility failures. Škálovanie obrázka. Nástroj zmenší veľké obrázky kvôli výkonu. Vzorkovaný pixel odráža zobrazený pixel; ak potrebuješ pixel-perfect vzorku veľmi malého UI prvku, orež obrázok pred nahrávaním.

Kontrastná kontrola na obrázku

Klikni dva ľubovoľné body v obrázku a skontroluj WCAG kontrast — AA, AAA, prahy pre veľký text. Postavené pre dizajnérov, ktorí overujú reálne screenshoty, nielen 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ýsledok

Sample two colours to see the contrast ratio.

Načo to slúži?

WCAG contrast checkery normálne potrebujú dva hex kódy — ale dizajnér, ktorý robí accessibility pass na reálnom screenshote, nemá hex kódy, má pixely. Tento nástroj ti umožní nahrať obrázok (screenshot, hero design, logo na rušnom pozadí) a kliknúť dva ľubovoľné body. Vzorkuje farbu pod kurzorom (1 pixel alebo priemer 3×3 / 5×5) a vypočíta WCAG 2.1 contrast ratio medzi nimi. Verdikt pre AA, AA-large, AAA, AAA-large a prah UI komponentov (1.4.11). Všetko v prehliadači.

Kedy to použiť

Overenie screenshotu, ktorého zdroj nemáš — marketingová stránka, UI konkurencie, PDF.
Audit loga na rušnom fotografickom pozadí, kde "farba pozadia" nie je jedna hodnota.
Kontrola najhoršieho prípadu kontrastu pozdĺž gradientu alebo za priesvitným textom.
Rýchle porovnanie dvoch UI stavov (napr. button rest vs hover) bez prebudovávania dizajnu.

Ako funguje vzorkovanie

1-pixel vzorka je presná, ale šumlivá — anti-aliased hrany, JPEG artefakty a subpixel rendering spôsobujú, že susedia sa líšia. Priemer 5×5 je zvyčajne to, čo chceš na UI: vráti farbu, ktorú by človek opísal, nie presný pixel pod klikom. Použi 1px pri overovaní hrany loga alebo ostrej farebnej hranice.

Časté chyby

Anti-aliasing. Hrany textu sa spriemerujú do farieb mimo design intentu. Klikni do stredu ťahu písmena, nie na hranu.
JPEG kompresia. Silno komprimované obrázky majú farebný drift v plochých oblastiach. Priemer 5×5 to zhladí.
Priesvitné vrstvy. Pre kontrast je dôležitý vyrenderovaný pixel, nie zdrojová farba. Tento nástroj číta vyrenderovaný pixel — presne to, čo chceš.
Kontroluješ farby, nie design intent. Ak tvoj button prejde AA v stave rest, ale padne na hover v ďalšom screenshote, oba stavy sú accessibility failures.
Škálovanie obrázka. Nástroj zmenší veľké obrázky kvôli výkonu. Vzorkovaný pixel odráža zobrazený pixel; ak potrebuješ pixel-perfect vzorku veľmi malého UI prvku, orež obrázok pred nahrávaním.