Farbkontrast im PDF, Screenshot & Logo prüfen: die Pipette als Abkürzung

Das Problem: Farbe ohne Hex-Code

Kurz-AntwortViele Kontrastfragen entstehen nicht im Code-Editor, sondern beim Betrachten eines Bildes — und dort fehlt der Hex-Wert, den ein Kontrastrechner normalerweise erwartet.

Ein Kunde schickt einen Screenshot eines alten Flyers und fragt, ob die Schriftfarbe barrierefrei genug für eine neue Landingpage wäre. Ein Kollege exportiert ein Layout aus einem Design- oder Präsentationswerkzeug als PDF, und die Textfarbe im Export weicht sichtbar von der ursprünglichen Design-Datei ab. Oder ein Logo liegt nur als PNG vor, ohne begleitendes Farbprofil-Dokument. In all diesen Fällen lässt sich die Farbe zwar mit dem Auge einordnen ("ein dunkles Blau", "ein warmes Grau"), aber nicht ohne Weiteres in einen exakten Hex-Wert übersetzen, den ein Kontrastrechner braucht.

Der übliche Umweg ist, ein separates Bildbearbeitungsprogramm zu öffnen, dort mit einer Pipette den Wert abzulesen, ihn zu kopieren und erst dann in ein Kontrast-Tool einzufügen. Das funktioniert, kostet aber jedes Mal einen Programmwechsel — und bei mehreren Farben in einem Bild wird der Vorgang schnell mühsam.

Die Pipette als Brücke zwischen Bild und Zahl

Kurz-AntwortDie im Farbkontrast-Prüfer eingebaute Bildschirm-Pipette nutzt die EyeDropper-API des Browsers und liest die Farbe an jeder beliebigen Bildschirmposition direkt in das Eingabefeld ein.

Statt den Umweg über ein separates Programm zu gehen, lässt sich die Pipetten-Schaltfläche direkt neben jedem Farbfeld im Tool anklicken. Der Mauszeiger verwandelt sich dann in ein Fadenkreuz, mit dem sich ein einzelner Pixel irgendwo auf dem Bildschirm auswählen lässt — auch außerhalb des Browserfensters, etwa in einem geöffneten PDF-Viewer, einer Bildvorschau oder einem anderen Tab mit dem Screenshot. Der gewählte Farbwert erscheint sofort als Hex-Code im Eingabefeld, bereit für die Kontrastberechnung.

Das eignet sich besonders gut für einen schnellen Plausibilitäts-Check: Bevor Zeit in eine Diskussion über "wirkt das lesbar genug?" investiert wird, liefert ein Pipetten-Klick auf Text und Hintergrund in Sekunden eine konkrete Zahl, mit der sich objektiv weiterarbeiten lässt.

EyeDropper-API Eine Browser-Funktion, die es Webseiten erlaubt, mit Nutzerzustimmung die Farbe eines beliebigen Bildschirmpixels auszulesen — unabhängig davon, ob dieser Pixel Teil der Webseite selbst ist oder eines anderen geöffneten Fensters.

Ein typischer Ablauf: Screenshot, PDF, Logo

Kurz-AntwortBild öffnen, Pipette im Farbkontrast-Prüfer aktivieren, Text- und Hintergrundpunkt anklicken, Ergebnis direkt ablesen — ganz ohne Zwischenschritt über ein Bildbearbeitungsprogramm.

Angenommen, ein Screenshot einer bestehenden Landingpage liegt in einem separaten Fenster oder Tab offen, und die Frage lautet, ob der beige Beschriftungstext auf dem hellen Kartenbild überhaupt WCAG AA erreicht. Der Ablauf dafür:

Den Screenshot in einem beliebigen Fenster sichtbar öffnen (Bildvorschau, PDF-Reader, zweiter Browser-Tab).
Im Farbkontrast-Prüfer die Pipette neben dem Feld "Vordergrund- (Text-) Farbe" aktivieren und direkt auf den Text im Screenshot klicken.
Dieselbe Pipette für "Hintergrundfarbe" nutzen und auf die Fläche direkt hinter dem Text klicken.
Auf "Berechnen" klicken und das WCAG-Kontrastverhältnis samt AA/AAA-Ergebnis ablesen.

Bei einem Logo-Bild lässt sich derselbe Ablauf nutzen, um zu prüfen, ob eine geplante Textzeile unterhalb oder über dem Logo auf dessen Hintergrundfarbe ausreichend Kontrast hätte, bevor das Layout final gestaltet wird — ohne die Logo-Datei in einem separaten Programm öffnen und dort erst den Wert notieren zu müssen.

Praktischer Hinweis: Bildkompression kann Pixelfarben leicht verändern. Für eine schnelle Einschätzung reicht die Pipette völlig aus; für eine verbindliche Freigabe eines Design-Systems sollte, wo möglich, zusätzlich der offizielle Hex-Code aus der Quelldatei verwendet werden.

Ergebnis teilen statt erneut eingeben

Kurz-AntwortEin berechnetes Ergebnis lässt sich als Link kopieren, der die geprüften Farben enthält, oder als eingebettetes Widget direkt in eine andere Seite integrieren.

Ist ein Farbpaar per Pipette oder manueller Eingabe geprüft, muss das Ergebnis oft an eine dritte Person weitergegeben werden — etwa an eine Entwicklerin, die die Werte anschließend selbst ins Stylesheet übernimmt. Statt die beiden Hex-Codes und das Ergebnis in einer Nachricht zu beschreiben, lässt sich die Ergebnis-URL direkt kopieren und teilen: Öffnet die Empfängerin den Link, sind beide Farben bereits vorausgefüllt, und das Ergebnis erscheint automatisch, ohne dass irgendetwas erneut eingetippt werden muss.

Für Teams, die den Kontrast-Check regelmäßig in eine interne Dokumentation, ein Projekt-Wiki oder eine Styleguide-Seite einbinden wollen, steht zusätzlich ein einbettbares Widget per iframe zur Verfügung. Es zeigt eine reduzierte Version des Rechners ohne Kopfzeile oder Blog-Verweise und lässt sich wie jedes andere eingebettete Element in eine bestehende Seite platzieren.

Aktiviere die Pipette, nimm eine Farbe direkt vom Bildschirm auf und prüfe sofort das WCAG-Kontrastverhältnis.

Farbkontrast-Prüfer testen →

Häufig gestellte Fragen

Kann ich eine Farbe aus einem Screenshot prüfen, ohne den Hex-Code zu kennen?

Ja. Die Bildschirm-Pipette im Farbkontrast-Prüfer nutzt die EyeDropper-API des Browsers und nimmt die Farbe jedes beliebigen Bildschirmpunkts auf — auch aus einem geöffneten Screenshot, einer PDF-Vorschau oder einem Logo-Bild in einem anderen Fenster. Es muss dafür kein Hex-Wert manuell abgelesen oder geschätzt werden.

In welchen Browsern funktioniert die Bildschirm-Pipette?

Die EyeDropper-API steht aktuell in Chromium-basierten Browsern wie Chrome und Edge zur Verfügung. Ist sie im aktuellen Browser nicht verfügbar, blendet das Tool die Pipetten-Schaltfläche automatisch aus, und Farben lassen sich weiterhin manuell als Hex, RGB oder HSL eintragen.

Wie kann ich ein geprüftes Farbergebnis mit einem Kollegen teilen?

Nach der Berechnung lässt sich das Ergebnis als teilbare URL kopieren, die die geprüften Farben direkt in der Adresse enthält. Öffnet die andere Person den Link, sieht sie sofort dasselbe Farbpaar und Ergebnis vorausgefüllt, ohne die Werte erneut eingeben zu müssen.

Kann ich den Kontrast-Check in ein anderes Dokument oder eine interne Seite einbetten?

Ja, der Farbkontrast-Prüfer bietet ein einbettbares Widget per iframe. Das reduziert die Ansicht auf den Kern-Rechner ohne Kopfzeile, Blog-Verweise oder Zusatzinhalte und eignet sich, um den Check direkt in eine interne Styleguide-Seite oder Projektdokumentation einzubinden.

Warum liefert die Pipette manchmal einen leicht anderen Wert als der 'echte' Hex-Code der Marke?

Die Pipette liest den tatsächlich dargestellten Pixelwert auf dem Bildschirm, der durch Bildkompression (z. B. JPEG bei Screenshots), Monitor-Farbprofil oder Skalierung leicht vom ursprünglich definierten Marken-Hex-Code abweichen kann. Für eine verbindliche Prüfung sollte daher, wo verfügbar, der offizielle Hex-Code aus dem Styleguide direkt eingetippt werden statt eines aus einem komprimierten Bild abgelesenen Werts.