Color Contrast Checker

Was ist ein Farbkontrast-Checker?

Dieses Tool berechnet die Contrast Ratio (das Kontrastverhältnis) zwischen einer Vordergrund- (Text) und einer Hintergrundfarbe und prüft anschließend, ob die Kombination die WCAG 2.0-Richtlinien für Barrierefreiheit auf AA- und AAA-Ebene erfüllt. Zudem simuliert es Farbenblindheit, schlägt Korrekturen für durchgefallene Farbkombinationen vor und exportiert Code in mehreren Formaten.

Farbkontrast prüfen

Farben auswählen

• Color A (Vordergrund/Text) und Color B (Hintergrund) verfügen jeweils über eine Hex-Eingabe und einen Farbwähler.
• Mit der Shade Scale unter jedem Farbwähler können Sie die Helligkeit feinabstimmen. Klicken Sie auf einen Farbton, um ihn sofort anzuwenden.
• Das Color Wheel passt den Farbton von Color A visuell an. Die Komplementärfarbe wird darunter angezeigt – klicken Sie darauf, um sie als Color B anzuwenden.
• Swap vertauscht Color A und Color B.

Bedeutung der Ergebnisse

Ergebnis	Bedeutung
Contrast Ratio	Das berechnete Verhältnis (1:1 – 21:1). Höher ist besser.
A11y Score	Eine Barrierefreiheitsbewertung von 0 bis 100 basierend auf der Contrast Ratio.
WCAG AA / AAA	Bestanden oder durchgefallen für Normal Text und Large Text auf jedem Level.
Preview	Eine Live-Vorschau mit Überschrift, Fließtext, Button, Badge, Eingabefeld und Karte in Ihren Farben.
Fix Suggestion	Wenn der Kontrast AA nicht besteht, schlägt eine klickbare Karte den nächstgelegenen passenden Farbton mit dessen Verhältnis vor. Klicken Sie zur Anwendung darauf.

WCAG-Grenzwerte

Level	Normal Text	Large Text
AA	Minimum 4.5:1	Minimum 3:1
AAA	Minimum 7:1	Minimum 4.5:1

• Normal text: unter 18pt (oder unter 14pt fett)
• Large text: 18pt und größer (oder 14pt fett und größer)

Zusätzliche Funktionen

• Undo / Redo – gehen Sie Ihre Farbänderungen schrittweise durch.
• Share Result – kopiert eine URL mit den aktuell eingebetteten Farben. Jeder, der sie öffnet, sieht dasselbe Paar.
• Pin – speichern Sie bis zu 8 Farbkombinationen zum direkten Vergleich. Klicken Sie auf ein angepinntes Paar, um es neu zu laden.
• Brand Colors – 8 reale Markenpaletten (Spotify, Slack, GitHub etc.) mit deren Kontrastverhältnissen. Klicken Sie auf eine beliebige, um sie zu laden.
• A11y Check – simuliert 4 Arten von Farbenblindheit (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) mit der jeweils effektiven Contrast Ratio.
• Code Output – generiert kopierfertigen Code in CSS, Tailwind 4, Tailwind 3, Flutter und React. Ausklappbarer Bereich, standardmäßig geöffnet.
• Randomize / Clear All – erzeugt ein zufälliges, barrierefreies Farbpaar oder setzt alles auf die Standardwerte zurück.

Gute Beispiele

Beispiel 1: Grauer Text auf Weiß – ein häufiger Fehler

Hellgrauer Text auf weißem Hintergrund wirkt dezent, ist aber nicht barrierefrei.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – AA nicht bestanden
• Die Fix Suggestion empfiehlt den Farbton 600 (#595959) für 4.9:1 – AA bestanden. Klicken Sie darauf, um ihn anzuwenden.

Beispiel 2: Eine Markenpalette überprüfen

Klicken Sie auf Spotify im Abschnitt Brand Colors.

• Color A: #191414 (Schwarz), Color B: #1DB954 (Grün)
• Contrast Ratio: 4.9:1 – AA bestanden, AAA nicht bestanden
• Heften Sie dieses Paar mit Pin an, probieren Sie dann LinkedIn aus (#ffffff auf #0A66C2, 4.7:1) und vergleichen Sie.

Beispiel 3: Einen Dark Mode entwerfen

Finden Sie eine gut lesbare Textfarbe für einen dunkelblauen Hintergrund.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – AA und AAA bestanden
• Öffnen Sie A11y Check, um zu bestätigen, dass alle 4 Arten von Farbenblindheit ebenfalls bestanden werden.

Beispiel 4: Entwickler-Workflow – Code-Export

Nachdem Sie ein gutes Paar gefunden haben, erweitern Sie den Code Output und wählen Sie Ihr Framework:

• CSS: Custom Properties --fg und --bg
• Tailwind 4: beliebige Farbwerte
• React: Inline-Style-Objekt

Kopieren Sie den Ausschnitt direkt in Ihr Projekt.

Wichtige Tipps

• Beginnen Sie mit Brand Colors. Wenn Sie eine bestehende Marke überprüfen, klicken Sie sie aus der Voreinstellungsliste an, anstatt Hex-Werte manuell einzugeben.
• Nutzen Sie die Fix Suggestion. Raten Sie nicht, wenn der Kontrast nicht ausreicht – klicken Sie auf die Vorschlagskarte, um automatisch zum nächsten passenden Farbton zu springen.
• Heften Sie Paare mit Pin an, um sie zu vergleichen. Wenn Sie zwischen mehreren Farboptionen wählen, heften Sie jede an. So können Sie sie neu laden und nebeneinander vergleichen.
• Prüfen Sie auch auf Farbenblindheit. Ein Paar, das nach WCAG besteht, kann für farbenblinde Nutzer dennoch schwer zu unterscheiden sein. Öffnen Sie den Abschnitt A11y Check zur Überprüfung.
• Teilen Sie Ihre Entscheidung. Verwenden Sie Share Result, um die URL des genauen Farbpaars an einen Designer oder Prüfer zu senden.

Formel

WCAG 2.0 definiert die Contrast Ratio anhand der relativen Luminanz:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variable	Bedeutung
$CR$	Contrast Ratio
$L_1$	Relative Luminanz der helleren Farbe
$L_2$	Relative Luminanz der dunkleren Farbe

Die relative Luminanz wird aus den sRGB-Werten nach der Linearisierung berechnet: $L = 0.2126R + 0.7152G + 0.0722B$

Häufig gestellte Fragen

Sollte ich AA oder AAA anstreben?

AA ist in den meisten Ländern der gesetzliche Mindeststandard. AAA bietet eine bessere Lesbarkeit, ist aber schwerer über alle Designelemente hinweg zu erreichen. Ein praktischer Ansatz: AA für Fließtext, AAA für kritische Informationen wie Warnungen oder Fehler.

Garantiert das Bestehen der WCAG Barrierefreiheit für farbenblinde Nutzer?

Die Contrast Ratio der WCAG prüft die Luminanz, nicht die Farbunterscheidung. Ein Paar kann die WCAG bestehen, für jemanden mit Farbenblindheit aber identisch aussehen. Verwenden Sie den Abschnitt A11y Check zur Überprüfung und ergänzen Sie Farben immer mit Icons oder Textbeschriftungen.

Welche Code-Formate unterstützt dieses Tool?

CSS Custom Properties, Tailwind CSS v3 und v4 (beliebige Werte), Flutter Color()-Objekte und React Inline-Styles. Wählen Sie das Format über den Umschalter im Abschnitt Code Output.

Kann ich meine Farbpaare speichern und teilen?

Ja. Pin speichert bis zu 8 Paare lokal zum Vergleich. Share Result kopiert eine URL mit den eingebetteten Farben – jeder, der sie öffnet, sieht genau dasselbe Paar.