Farb-Tools

Kontrast-Prüfer

WCAG-Kontrastverhältnisse zwischen zwei Farben prüfen. Pass/Fail-Badges für AA und AAA bei normaler und großer Schriftgröße — mit Live-Vorschau.

Vordergrund (Text)

Hintergrund

Beispiel für eine große Überschrift

Das ist normal großer Fließtext — die Zeile, die du für Absätze und Formularkopien lesen würdest.

Das ist Kleingedrucktes — Bildunterschriften, Fußnoten, Hilfetext.

Kontrastverhältnis

WCAG AA — Normal --

WCAG AA — Groß --

WCAG AAA — Normal --

WCAG AAA — Groß --

Was ist das Kontrastverhältnis?

Das Kontrastverhältnis ist eine Zahl von 1:1 (kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß), die beschreibt, wie gut sich eine Vordergrundfarbe von ihrem Hintergrund unterscheiden lässt. Die Web Content Accessibility Guidelines (WCAG) verwenden diese Zahl als rechtlichen Maßstab dafür, ob Text für Menschen mit Sehschwäche, Farbenblindheit oder beim Lesen auf einem blendenden Bildschirm lesbar ist. Je höher das Verhältnis, desto sicherer die Wahl — und desto universeller lesbar deine Oberfläche.

So nutzt du diesen Checker

Wähle deine Textfarbe im Vordergrund-Picker und die Fläche dahinter im Hintergrund-Picker — oder füge Hex-Codes direkt ein. Die Live-Vorschau wird in Echtzeit neu gezeichnet, sodass du genau siehst, was Nutzer sehen werden, und die vier Badges zeigen dir auf einen Blick, welche WCAG-Stufen du erfüllst. Nutze den Tauschen-Button, um das Paar zu invertieren, wenn du eine Dark-Mode-Variante skizzierst oder invertierte Call-to-Action-Buttons testest.

Best Practices

Ziel ist mindestens AA Normal (4,5:1) für Fließtext als absolutes Minimum, und AAA Normal (7:1), wenn Barrierefreiheit ein Markenwert ist. Jag dem Mindestmaß nicht hinterher — Grenzwerte versagen auf günstigen Monitoren und im Freien. Teste deine tatsächlichen Farben in der tatsächlichen Größe, in der du veröffentlichst, nicht Annäherungen aus einer Markenfarbpalette. Denk daran, dass deaktivierte Zustände, Platzhaltertext und Werbetext ebenfalls Text sind — auch sie brauchen Kontrast. Verlass dich nie allein auf Farbe, um Bedeutung zu vermitteln; kombiniere sie mit Symbolen, Unterstreichungen oder Beschriftungen.

Die Mathematik hinter dem Verhältnis

WCAG berechnet den Kontrast aus der relativen Luminanz, nicht aus rohen RGB-Werten. Jeder Kanal wird zuerst aus sRGB linearisiert — Werte unter 0,03928 werden durch 12,92 geteilt, der Rest läuft durch ((c + 0,055) / 1,055)^2,4. Die Luminanz ist dann L = 0,2126·R + 0,7152·G + 0,0722·B — gewichtet, weil das menschliche Auge am empfindlichsten auf Grün und am wenigsten auf Blau reagiert. Das Verhältnis ist (L_heller + 0,05) / (L_dunkler + 0,05). Der Term + 0,05 modelliert reflektiertes Umgebungslicht auf realen Bildschirmen und ist es, was das Maximum bei 21:1 begrenzt.

WCAG-Konformitätsstufen auf einen Blick

AA Normal: 4,5:1 Mindestwert für Fließtext unter 18 pt (oder 14 pt fett). AA Groß: 3:1 für Text ab 18 pt (oder ab 14 pt fett). AAA Normal: 7:1 — die erweiterte Stufe, empfohlen für Sites, die den höchsten Lesbarkeitsstandard anstreben. AAA Groß: 4,5:1 — großer Text in der erweiterten Stufe. Nicht-textuelle UI-Komponenten (Icons, Fokusringe, Formularränder) brauchen mindestens 3:1 gegen ihre angrenzende Fläche, um WCAG 2.1 SC 1.4.11 zu erfüllen.

Häufig gestellte Fragen

Was bedeutet „großer Text“ in WCAG?

Großer Text ist alles ab 18 pt oder ab 14 pt, wenn fett — etwa 24 px und 18,66 px in CSS-Pixeln. Die Begründung: Größere Buchstabenformen haben dickere Striche und mehr visuelle Masse, sie bleiben also bei niedrigerem Kontrast lesbar als eng gesetzter Fließtext. Wenn dein Designsystem reguläre und fette Schnitte in derselben Größe mischt, bewerte sie getrennt.

Sendet dieses Tool meine Farben an einen Server?

Nein. Jede Kontrastberechnung läuft in deinem Browser über Standard-JavaScript-Mathematik — beim Ändern der Eingaben wird kein Netzwerk-Request abgesetzt. Du kannst das in den DevTools → Netzwerk überprüfen, während du am Picker ziehst. Audits von Markenfarben sind hier auch für unveröffentlichte Paletten sicher.

Warum scheitern meine Farben bei 4,49:1, bestehen aber bei 4,50:1?

WCAG definiert seine Schwellen als inklusive Mindestwerte — 4,5:1 bedeutet mindestens 4,5, nicht streng größer. Wir runden für die Anzeige auf zwei Nachkommastellen, vergleichen intern aber mit voller Genauigkeit. Ein Ergebnis von 4,4998 fällt also um Haaresbreite durch, auch wenn das Badge 4,50 anzeigt. Wenn du so knapp dran bist, schraube einen Kanal um ein bis zwei Punkte hoch, um die Schwelle sicher zu reißen.

Was ist mit Nicht-Text-Elementen wie Icons oder Formularrändern?

WCAG 2.1 SC 1.4.11 verlangt einen Mindestkontrast von 3:1 für grafische UI-Komponenten — Icon-Striche, Eingaberänder, Fokusindikatoren, Button-Umrisse. Nutze diesen Checker für die Vordergrund-Farbe des Icons gegen seine Fläche; ist das Icon mehrfarbig, bewerte den am stärksten kontrastierenden Strich, der Bedeutung trägt.

Spielt AAA für typische Websites wirklich eine Rolle?

AA ist in den meisten Rechtsordnungen die rechtliche Untergrenze. AAA ist anstrebenswert und in einer kompletten Palette nicht immer einhaltbar, ohne die Markenidentität zu opfern. Erreiche AAA für Fließtext, wo immer es geht — dort ist der Lesbarkeitsgewinn am größten — und akzeptiere AA bei Akzent-Hovers und großen Überschriften.

Werden Farbnamen wie „rot“ oder „blau“ unterstützt?

Die Picker und Hex-Eingabefelder verarbeiten 6-stellige und 3-stellige Hex-Codes. Für benannte CSS-Farben nutze unser Tool für benannte Farben, um den passenden Hex-Code nachzuschlagen, und füge ihn dann hier ein.

Kontrast-Prüfer