Zum Hauptinhalt springen
ImageColorPix

Kontrast Prüfer

Prüfen, ob die Kombination aus Text und Hintergrund barrierefrei ist. Farben manuell über die Farbfenster wählen, Weiß / Schwarz Vorlagen nutzen, oder ein Bild hochladen und ein Pixel anklicken. Sofortige WCAG AA und AAA Bewertung.

Textfarbe

rgb(59, 130, 246)

Details ansehen →

Hintergrundfarbe

rgb(255, 255, 255)

Details ansehen →

Kontrastverhältnis

5.20 : 1

Guter Kontrast

A+A

WCAG-Bewertungen

AA normaler Text (≥ 4.5)✓ Bestanden
AA großer Text (≥ 3)✓ Bestanden
AAA normaler Text (≥ 7)✕ Nicht bestanden
AAA großer Text (≥ 4.5)✓ Bestanden

Der schnelle braune Fuchs springt über den faulen Hund, normaler Text 16px.

Großer Text 24px fett

Was ist Kontrastprüfung?

Lesbarer Text für alle

Das Kontrastverhältnis misst, wie unterscheidbar Text vom Hintergrund ist, von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Unser Prüfer nutzt die WCAG Formel für relative Luminanz, denselben Standard, auf den sich Audits und Designsysteme stützen.

Mindestens 4.5:1 für normalen Text (AA), 3:1 für großen Text, und 7:1 für AAA anstreben. Markenfarben, Buttonstile oder Textoverlays auf Bildern vor Release testen.

Anleitung

01

Farben wählen

HEX eingeben, natives Farbfenster nutzen, oder Weiß / Schwarz / Zufall Vorlagen. Jederzeit wechseln.

02

Oder aus Bild wählen

Auf das Bildsymbol klicken, ein JPG/PNG/WebP hochladen, dann Bild oder dessen extrahierte Palette anklicken. Ziel Text / Hintergrund umschalten.

03

Barrierefreies UI liefern

Verhältnis, AA/AAA Bewertung und Live Vorschau lesen.

04

Teilen und exportieren

URL (?text=…&bg=…) kopieren, um exakt dieses Paar zu teilen, CSS für das Handoff kopieren, oder TXT Bericht laden.

Praxisbeispiele

Fließtext 16px: #767676 auf #FFFFFF (4.54:1 bestanden) gegen #999999 (2.85:1 durchgefallen)

Die wichtigste echte Prüfung. Sekundärer Grautext wirkt sauber, aber helle Grautöne fallen durch. Beide Paare oben testen: gedeckten Text auf #767676 oder #595959 abdunkeln, um AA zu erreichen. Kleinster Lesetext braucht volle 4.5:1.

Button Labels: Weiß auf Blau

Meistgetestete UI Prüfung. Lebendige Blautöne (etwa 3.9:1) bestehen nur für großen Text. Buttonflächen für normalgroße Labels auf etwa 5-6:1 abdunkeln. Normal, Hover und deaktivierte Zustände separat testen.

Links im Fließtext

Linkblau plus Texthintergrund einfügen, um zu sehen, ob Links mit Farbe allein noch 4.5:1 erreichen. Falls nicht, Link abdunkeln oder unterstreichen (Farbe allein darf nicht das einzige Signal sein).

Inputs, Rahmen und Kleingedrucktes 13px

Inputrahmen, Checkboxen und 13px Hinweise sind Stellen, wo Kontrast scheitert. Rahmen/UI brauchen 3:1. 13px Captions brauchen 4.5:1 wie Fließtext. Rahmen Grau plus Feldhintergrund hier einfügen.

Überschriften 24-32px und Grafiken

Großer Text (24px+, oder 19px fett+) braucht nur 3:1, ebenso Icons, Diagrammlinien und Fokusringe. Überschriften, Icons und Datenlinien als eigene Paare separat vom Fließtext testen.

Text über Fotos und Verläufen

Top Bildanwendung: Hero hochladen, hellste und dunkelste Pixel hinter der Headline anklicken. Falls eines durchfällt, Overlay oder Textschatten ergänzen und gemischte Farbe erneut testen. Nie nur einen Stopp eines Verlaufs testen.

Häufige Fragen

1Welches WCAG Kontrastverhältnis ist nötig: AA oder AAA?
Die meistgefragte Anfrage. AA: 4.5:1 normaler Text, 3:1 großer Text, das rechtliche und praktische Ziel für die meisten Websites. AAA: 7:1 normal, 4.5:1 groß, für besonders barrierefreie Inhalte. Die meisten Teams liefern AA. Wir bewerten alle vier, damit beides sichtbar ist.
2Ändern Schriftgröße und Strichstärke die Anforderung?
Ja, die zweithäufigste Frage. Groß bedeutet 24px+ normal oder 19px+ fett (18pt / 14pt fett). Groß braucht nur 3:1 für AA. Fließtext und Überschriften separat testen: dasselbe Paar kann für Fließtext durchfallen, aber für Überschriften bestehen.
3Wie wird eine durchgefallene Kombination ohne Rebranding repariert?
Top Arbeitsablauf: Farbton behalten, Helligkeit verschieben: Text abdunkeln oder Hintergrund aufhellen, bis der Schwellenwert erreicht ist. Oder die kritische Farbe auf großen Text/Icons beschränken (3:1), über Bildern ein Overlay/Kontur ergänzen, oder mit dunklerem Ton für Fließtext paaren.
4Können Verläufe, Bilder oder Transparenz geprüft werden?
Prüfer arbeiten mit Vollton Paaren. Daher kritische Pixel testen: Hero hochladen, hellste plus dunkelste Stellen hinter dem Text anklicken, und beide testen. Bei Transparenz die gemischte UI per Screenshot abbilden und gerenderten Pixel messen. Ein 50% Overlay ist nicht dessen rohes HEX.
5Müssen Links, Buttons, Inputs und Icons geprüft werden?
Ja, das meistgetestete UI Set. Buttons/Links brauchen Textverhältnisse (4.5:1 normal). Inputrahmen, Checkboxen, Icons, Diagrammlinien und Fokusringe brauchen 3:1 non-text gegen benachbarte Farben. Jeden Zustand testen: Standard, Hover, Fokus, deaktiviert.
6Wie wird Pipette / Auswahl vom Bildschirm genutzt?
Auf das Bildsymbol klicken, einen Screenshot hochladen oder einfügen, dann ein Pixel anklicken, um es als Text oder Hintergrund zu laden (oben umschalten). Palettenfelder für schnelle Varianten anklicken.
7Funktioniert es für mobile Apps und Dark Mode?
Dieselbe Luminanz Berechnung gilt für iOS/Android und dunkle Themes. Beide Modi separat prüfen. Ein Paar, das hell besteht, fällt dunkel oft durch. Jedes Theme testen, inklusive heller Außenansicht.
8Kann das Ergebnis geteilt, gespeichert oder automatisiert werden?
Die URL (?text=…&bg=…) kopieren, um exakt dieses Paar zu teilen, CSS für das Handoff kopieren, oder TXT Bericht laden. Power Nutzer hängen Paare an Dokus an oder testen Matrizen von Markentokens einzeln.

Weitere Farbtools entdecken

Farbkonverter

HEX RGB HSL HSV CMYK LAB

Paletten-Generator

Zufällige Harmonien + Bildmodus

Bild-Farbwähler

Jeden Pixel aus jedem Bild wählen

Farbverlaufs-Generator

Linear, radial & konisch CSS