Een screenshot verifiëren waarvan je de bron niet hebt — een marketingpagina, UI van een concurrent, PDF. Een logo auditen op een drukke fotografische achtergrond waar de "achtergrondkleur" geen enkele waarde is. Worst-case contrast checken langs een gradient of achter translucent tekst. Snel twee UI-states vergelijken (bv. button rest vs hover) zonder het design opnieuw te bouwen.

Beeld-contrast-checker

Klik twee willekeurige punten in een afbeelding aan om WCAG-contrast te checken — AA, AAA, grote-tekst-drempels. Gebouwd voor designers die echte screenshots verifiëren, niet alleen hex-codes.

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

—

Resultaat

Sample two colours to see the contrast ratio.

Waarvoor is dit?

WCAG-contrast-checkers vragen normaal twee hex-codes — maar een designer die een accessibility-pass doet op een echte screenshot heeft geen hex, die heeft pixels. Met deze tool upload je een afbeelding (screenshot, hero design, logo op een drukke achtergrond) en klik je twee punten aan. Hij sampelt de kleur onder de cursor (1 pixel of 3×3/5×5 gemiddelde) en berekent de WCAG 2.1 contrastratio. Verdict voor AA, AA-groot, AAA, AAA-groot en de UI-componenten-drempel (1.4.11). Alles in de browser.

Wanneer gebruiken

Een screenshot verifiëren waarvan je de bron niet hebt — een marketingpagina, UI van een concurrent, PDF.
Een logo auditen op een drukke fotografische achtergrond waar de "achtergrondkleur" geen enkele waarde is.
Worst-case contrast checken langs een gradient of achter translucent tekst.
Snel twee UI-states vergelijken (bv. button rest vs hover) zonder het design opnieuw te bouwen.

Hoe sampling werkt

Een 1-pixel sample is precies maar ruizig — anti-aliased randen, JPEG-artefacten en subpixel rendering veroorzaken verschil tussen buren. De 5×5 gemiddelde is meestal wat je wilt voor UI: hij geeft de kleur terug die een mens zou beschrijven, niet de exacte pixel onder de klik. Gebruik 1px bij een logo-rand of een scherpe kleurgrens.

Veelvoorkomende valkuilen

Anti-aliasing. Tekstranden middelen uit naar kleuren buiten de design intent. Klik in het midden van een lettervorm, niet op de rand.
JPEG-compressie. Sterk gecomprimeerde afbeeldingen drijven in kleur in vlakke gebieden. De 5×5 gemiddelde glad dat uit.
Translucent layers. Voor contrast telt de gerenderde pixel, niet de bronkleur. Deze tool leest de gerenderde pixel — precies wat je wil.
Je checkt kleuren, geen design intent. Als je button AA haalt op rust maar faalt op hover in een andere screenshot, zijn beide states a11y-bugs.
Image scaling. De tool schaalt grote afbeeldingen omlaag voor performance. De gesampelde pixel reflecteert de getoonde pixel; heb je pixel-perfect sampling van een heel klein element nodig, crop voor uploaden.