Deutsch
Prüfe WCAG-Kontrast und korrigiere fehlgeschlagene Kombinationen mit einem Klick.
Zuletzt aktualisiert
Große Überschrift — 24px fett
Fließtext. Der schnelle braune Fuchs springt über den faulen Hund. Lies ein, zwei Absätze und schau, ob der Kontrast über längere Zeit angenehm bleibt.
Kleine Bildunterschrift — 12px regulär. WCAG schützt in dieser Größe nur 14pt und darüber, daher brauchen winzige Texte den strengsten Kontrast.
Ein *Kontrastprüfer* ist das, was Designer und Entwickler vor dem Livegang eines Screens nutzen. Er berechnet das **Kontrastverhältnis** zwischen zwei Farben — deinem Text und dem Hintergrund — mit der Formel der Web Content Accessibility Guidelines (WCAG). Je höher das Verhältnis, desto leichter lesbar.
WCAG definiert drei Schwellen. **3:1** ist das Minimum für große Überschriften (24px+ regulär oder 18,66px+ fett) und für sichtbare Ränder interaktiver Komponenten wie Buttons, Formularfelder und Icons. **4,5:1** ist die AA-Schwelle für Fließtext — der Standard, den die meisten Teams anpeilen. **7:1** ist AAA, die höchste Stufe, die Menschen mit Sehbehinderung stark unterstützt.
Kontrast ist **nicht** dasselbe wie Farbintensität. Zwei knallige Markenfarben können schwer lesbar bleiben, wenn ihre *Helligkeit* ähnlich ist. Dieses Tool wendet die WCAG-Formel kanalweise an, zeigt den exakten Wert und benotet jeden Kontext, damit du nicht raten musst.
Tippe oder füge einen HEX-Wert ein oder nutze den Farbwähler. Vordergrund ist dein Text oder Icon; Hintergrund ist das, was dahinter liegt.
Die große Zahl links ist das WCAG-Kontrastverhältnis. Unter 3:1 ist riskant für jede UI; unter 4,5:1 reicht es für Fließtext nicht.
Drei Zeilen zeigen Pass/Fail für Fließtext (4,5/7), großen Text (3/4,5) und UI-Komponenten (3:1). Ziele auf den grünen Haken in jeder Zeile, die deine Design tatsächlich nutzt.
Wenn AA scheitert, schiebt das Tool die Helligkeit deines Vordergrunds — bei gleichem Farbton — bis das Paar besteht. Erneut klicken für AAA.
Sobald beide Farben in den nötigen Kontexten bestehen, kopiere das CSS-Snippet (color: + background:) in dein Stylesheet oder in deine Design Tokens.
Vergleiche, was du stilst, mit der nötigen Stufe. Quelle: WCAG 2.2 Understanding 1.4.3 und 1.4.11.
| Ziel | AA min | AAA min | Hinweise |
|---|---|---|---|
| Fließtext (< 18pt regulär) | 4.5 : 1 | 7 : 1 | Standardregel für Absätze, Labels, Bildunterschriften |
| Großer Text (≥ 18pt regulär oder ≥ 14pt fett) | 3 : 1 | 4.5 : 1 | Überschriften, Hero-Copy, große Zitate |
| UI-Komponenten und grafische Objekte | 3 : 1 | — | Buttonränder, Formularfelder, Icons, Focus-Ringe |
| Logo oder reine Deko | Ausgenommen | Ausgenommen | Logos und Beiwerk-Text sind ausgenommen — Usability bleibt wichtig |
| Deaktivierter Zustand | Ausgenommen | Ausgenommen | Inaktive Controls sind ausgenommen, aber nicht als Ausrede für schlechte Defaults |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Klassisches dunkles Slate auf nahezu Weiß. Besteht AAA für Fließtext (≥ 7:1) mit Reserve. Die meisten Produkt-UIs sollten standardmäßig in diese Gegend zielen.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Lebendige Blautöne auf Weiß landen oft bei rund 4:1 — lesbar für große Überschriften (besteht 3:1 AA Large), aber unter 4,5:1 für Fließtext. Für Buttons und CTAs ab 18px verwenden, nicht für Absätze.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Helles Gelb auf Weiß ist die berühmte Falle: laut wirkend, Helligkeit aber zu nah beieinander. Reserviere diese Kombi für dunkle Hintergründe (#facc15 auf #1f2937 ergibt ≈ 12:1).
