Weryfikowanie screenshota, którego źródła nie masz — landing marketingowy, UI konkurencji, PDF. Audit loga na fotograficznym tle, gdzie "kolor tła" nie jest pojedynczą wartością. Sprawdzenie najgorszego przypadku kontrastu wzdłuż gradientu albo za półprzezroczystym tekstem. Szybkie porównanie dwóch stanów UI (np. przycisk rest vs hover) bez przebudowywania designu.

Anti-aliasing. Krawędzie tekstu uśredniają się do kolorów spoza design intentu. Klikaj w środek kreski litery, nie w jej krawędź. Kompresja JPEG. Mocno skompresowane obrazki mają drift koloru w płaskich obszarach. Średnia 5×5 to wygładza. Półprzezroczyste warstwy. Dla kontrastu liczy się piksel po renderze, nie kolor źródłowy. To narzędzie czyta wyrenderowany piksel — dokładnie to, czego chcesz. Sprawdzasz kolory, nie design intent. Jeśli twój przycisk przechodzi AA w spoczynku, ale pada na hover w innym screenshotcie, oba stany to bugi a11y. Skalowanie obrazu. Narzędzie skaluje duże obrazki dla performance. Próbkowany piksel odpowiada wyświetlonemu; jeśli potrzebujesz pixel-perfect samplingu bardzo małego elementu, zrób crop przed uploadem.

Sprawdzacz kontrastu na obrazku

Kliknij dowolne dwa punkty na obrazku, żeby sprawdzić kontrast WCAG — AA, AAA, progi dużego tekstu. Zbudowane dla designerów weryfikujących prawdziwe screenshoty, nie tylko kody 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

—

Wynik

Sample two colours to see the contrast ratio.

Do czego to służy?

Sprawdzacze kontrastu WCAG normalnie wymagają dwóch kodów hex — ale designer robiący audit dostępności na prawdziwym screenshotcie nie ma kodów hex, ma piksele. To narzędzie pozwala wgrać obrazek (screenshot, hero design, logo na zatłoczonym tle) i kliknąć dwa punkty. Próbkuje kolor pod kursorem (1 piksel albo średnia 3×3/5×5) i liczy współczynnik kontrastu WCAG 2.1. Werdykt dla AA, AA-large, AAA, AAA-large i progu komponentów UI (1.4.11). Wszystko w przeglądarce.

Kiedy tego użyć

Weryfikowanie screenshota, którego źródła nie masz — landing marketingowy, UI konkurencji, PDF.
Audit loga na fotograficznym tle, gdzie "kolor tła" nie jest pojedynczą wartością.
Sprawdzenie najgorszego przypadku kontrastu wzdłuż gradientu albo za półprzezroczystym tekstem.
Szybkie porównanie dwóch stanów UI (np. przycisk rest vs hover) bez przebudowywania designu.

Jak działa próbkowanie

Sample 1-piksel jest precyzyjny, ale zaszumiony — krawędzie z anti-aliasingiem, artefakty JPEG i subpixel rendering powodują rozjazd sąsiadów. Średnia 5×5 to zwykle to, co chcesz na UI: zwraca kolor, który opisze człowiek, nie konkretny piksel pod kliknięciem. Użyj 1px dla krawędzi loga albo ostrej granicy koloru.

Częste pułapki

Anti-aliasing. Krawędzie tekstu uśredniają się do kolorów spoza design intentu. Klikaj w środek kreski litery, nie w jej krawędź.
Kompresja JPEG. Mocno skompresowane obrazki mają drift koloru w płaskich obszarach. Średnia 5×5 to wygładza.
Półprzezroczyste warstwy. Dla kontrastu liczy się piksel po renderze, nie kolor źródłowy. To narzędzie czyta wyrenderowany piksel — dokładnie to, czego chcesz.
Sprawdzasz kolory, nie design intent. Jeśli twój przycisk przechodzi AA w spoczynku, ale pada na hover w innym screenshotcie, oba stany to bugi a11y.
Skalowanie obrazu. Narzędzie skaluje duże obrazki dla performance. Próbkowany piksel odpowiada wyświetlonemu; jeśli potrzebujesz pixel-perfect samplingu bardzo małego elementu, zrób crop przed uploadem.