Screenshot prüfen, dessen Quelle du nicht hast — Marketingseite, Konkurrenz-UI, PDF. Logo auf einem belebten Foto-Hintergrund auditieren, bei dem die "Hintergrundfarbe" kein einzelner Wert ist. Worst-Case-Kontrast entlang eines Gradienten oder hinter halbtransparentem Text prüfen. Zwei UI-Zustände schnell vergleichen (z. B. Button-Ruhe vs Hover) ohne das Design neu zu bauen.

Bild-Kontrastprüfer

Klick zwei Punkte in einem Bild an, um den WCAG-Kontrast zu prüfen — AA, AAA, Schwellen für große Schrift. Gebaut für Designer:innen, die echte Screenshots verifizieren — nicht nur 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

—

Ergebnis

Sample two colours to see the contrast ratio.

Wofür ist das?

WCAG-Kontrastchecker brauchen normalerweise zwei Hex-Codes — aber wer einen Accessibility-Pass an einem echten Screenshot macht, hat keine Hex-Codes, sondern Pixel. Mit diesem Tool lädst du ein Bild hoch (Screenshot, Hero-Design, Logo auf belebtem Hintergrund) und klickst zwei Punkte an. Es sampled die Farbe unter dem Cursor (1 Pixel oder 3×3/5×5-Durchschnitt) und berechnet das WCAG-2.1-Kontrastverhältnis. Verdikt für AA, AA-Groß, AAA, AAA-Groß und die UI-Komponentenschwelle (1.4.11). Alles im Browser.

Wann verwenden

Screenshot prüfen, dessen Quelle du nicht hast — Marketingseite, Konkurrenz-UI, PDF.
Logo auf einem belebten Foto-Hintergrund auditieren, bei dem die "Hintergrundfarbe" kein einzelner Wert ist.
Worst-Case-Kontrast entlang eines Gradienten oder hinter halbtransparentem Text prüfen.
Zwei UI-Zustände schnell vergleichen (z. B. Button-Ruhe vs Hover) ohne das Design neu zu bauen.

Wie das Sampling funktioniert

Ein 1-Pixel-Sample ist präzise, aber verrauscht — Anti-Aliasing-Kanten, JPEG-Artefakte und Subpixel-Rendering führen dazu, dass benachbarte Pixel abweichen. Der 5×5-Durchschnitt ist meistens das, was du willst: er liefert die Farbe, die ein Mensch beschreiben würde, nicht das exakte Pixel unter dem Klick. Verwende 1px, wenn du eine Logo-Kante oder eine scharfe Farbgrenze prüfst.

Häufige Stolpersteine

Anti-Aliasing. Textkanten mitteln sich zu Farben, die nicht im Design-Intent stecken. Klick in die Mitte eines Buchstabens, nicht an seine Kante.
JPEG-Kompression. Stark komprimierte Bilder driften in flachen Bereichen. Ein 5×5-Durchschnitt glättet das.
Halbtransparente Layer. Für Kontrast zählt das gerenderte Pixel, nicht die Quellfarbe. Dieses Tool liest das gerenderte Pixel — genau richtig.
Du prüfst die Farben, nicht den Design-Intent. Wenn dein gerenderter Button im Ruhezustand AA besteht, aber im Hover-Screenshot durchfällt, sind beide Zustände A11y-Bugs.
Bild-Skalierung. Große Bilder werden für Performance skaliert. Das gesampelte Pixel entspricht dem angezeigten; brauchst du Pixel-genaues Sampling eines sehr kleinen Elements, crop vor dem Upload.