WCAG 2.1 Konformität für Barrierefreiheit prüfen
{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.
{{ __t('large_text') }}: The quick brown fox.
{{ __t('contrast_ratio') }}
Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehschwäche. Niedriger Kontrast macht Text schwer lesbar — besonders bei kleinen Schriften, schlechten Bildschirmen und für Nutzer mit Sehbehinderung. Die WCAG-Standards (Web Content Accessibility Guidelines) definieren Mindestwerte, die in vielen Ländern gesetzlich vorgeschrieben sind (EU EN 301 549, US ADA, BITV).
Level AA verlangt 4,5:1 für normalen Text (unter 24 px bzw. 18,66 px Bold) und 3:1 für großen Text. Level AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text. UI-Komponenten und Grafiken brauchen mindestens 3:1. Diese Werte basieren auf der relativen Luminanz nach der WCAG-Formel — Hue (Farbton) spielt keine Rolle.
Das Kontrastverhältnis nach WCAG 2.2 berechnet sich als (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Luminanz der helleren und L2 die der dunkleren Farbe ist. Die relative Luminanz selbst wird im sRGB-Farbraum gewonnen: Jeder Kanal R, G, B wird zuerst von Gamma-encodierten Werten in lineares Licht zurückgerechnet (Schwellwert 0.03928), danach gewichtet mit 0.2126*R + 0.7152*G + 0.0722*B. Diese Gewichte spiegeln die Empfindlichkeit des menschlichen Auges wider — Grün trägt am stärksten zur wahrgenommenen Helligkeit bei, Blau am wenigsten.
RGB beschreibt Farbe additiv über drei Kanäle, ist aber für Designentscheidungen ungeeignet: Zwei RGB-Werte mit gleicher Helligkeit für das Auge können völlig verschiedene Hex-Codes haben. HSL (Hue, Saturation, Lightness) ist intuitiver für Farbschemata, aber die Lightness-Komponente entspricht nicht der wahrgenommenen Helligkeit. LAB hingegen ist perzeptuell uniform — gleiche numerische Distanzen entsprechen gleichen wahrgenommenen Unterschieden. WCAG arbeitet bewusst nicht mit LAB, sondern mit relativer Luminanz, weil die Formel auf Display-Output (sRGB) zugeschnitten ist.
Das CSS Color Module Level 4 erweitert dieses Bild um neue Farbräume wie color(display-p3 ...), oklch() und lab(). Displays mit P3-Gamut zeigen bis zu 25 % mehr Farben als sRGB — vor allem in Rot und Grün. Wer für P3-Geräte designt, sollte Fallbacks für sRGB-Browser hinterlegen. Wichtig: WCAG-Kontrastberechnungen sind weiterhin sRGB-basiert; APCA (Advanced Perceptual Contrast Algorithm) ist ein moderner Nachfolger, aber noch nicht normativ in WCAG.
Die Bedienung ist simpel, aber ein paar Schritte sorgen dafür, dass du verlässliche Ergebnisse bekommst — besonders, wenn du eine echte Marken- oder Designsystem-Palette prüfst.
Diese Beispiele zeigen typische Designentscheidungen und ob sie die WCAG-Schwellen einhalten.
color: #212121; background: #ffffff; erreicht 16,1:1 — AAA klar bestanden, ideal für lange Lesetexte.color: #0d9488; background: #ffffff; liefert 3,87:1 — AA Large bestanden, AA Small (4,5:1) nicht. Buttons mit dieser Farbe brauchen mindestens 18,66 px Bold oder einen dunkleren Ton wie #0f766e (5,2:1).color: #9e9e9e; background: #ffffff; liegt bei 2,85:1 — fällt durch AA. WCAG erlaubt aber, dass disabled-States explizit ausgenommen sind (Success Criterion 1.4.3 Note).color: #e0e0e0; background: #121212; erreicht 15,3:1 — sehr augenfreundlich. Achte darauf, dass Akzentfarben gegen #121212 ebenfalls AA halten; Material Design empfiehlt deshalb 16 % weiße Überlagerung für Surface-Elemente.Die WCAG-Formel berücksichtigt keine Farbton-Unterschiede, sondern nur Luminanz — zwei stark gesättigte Komplementärfarben (z. B. reines Rot auf reinem Grün) können das Verhältnis 1,06:1 haben und trotzdem für Menschen ohne Farbsehschwäche lesbar wirken. Für Menschen mit Deuteranopie oder Protanopie ist solch ein Design jedoch katastrophal. Berücksichtige außerdem, dass Bildschirme stark variieren: Ein nicht kalibriertes Office-Display, ein OLED-Smartphone und ein E-Ink-Reader stellen dieselben Hex-Codes völlig anders dar. Wide-Gamut-Displays (P3) zeigen Farben gesättigter — Kontraste können dort optisch stärker wirken als die sRGB-Berechnung suggeriert. Schließlich: Reflexionen, Sonnenlicht und niedrige Helligkeitsstufen drücken den effektiven Kontrast deutlich nach unten. Sicherheitspuffer von 10–20 % über dem WCAG-Minimum sind in der Praxis sinnvoll.