WCAG-Kontrastrechner
Prüfen Sie das Kontrastverhältnis eines Text-/Hintergrundpaares gegen WCAG AA und AAA — mit Live-Vorschau bei normaler und großer Schriftgröße.
1.130 Aufrufe
Zwölf Boxkämpfer jagen Viktor quer über den Sylter Deich
Beispiel großer Text 24px
Wie das Verhältnis berechnet wird
Die WCAG-Formel lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren ist — das Ergebnis liegt daher immer zwischen 1:1 (identische Farben) und 21:1 (reines Schwarz auf reinem Weiß). Die relative Leuchtdichte ist kein einfacher Durchschnitt der RGB-Kanäle; sie ist eine perzeptuell gewichtete Summe, L = 0,2126R + 0,7152G + 0,0722B, angewendet, nachdem jeder Kanal linearisiert wurde, indem die sRGB-Gammakurve umgekehrt wird (Werte unter 0,03928 werden durch 12,92 geteilt, der Rest durchläuft ((c+0,055)/1,055)^2,4). Grün trägt etwa zehnmal so stark zur wahrgenommenen Helligkeit bei wie Blau — deshalb kann das Vertauschen von Grün- und Blau-Kanal einer Farbe deren sichtbares Gewicht drastisch verschieben, obwohl die rohe Helligkeit gleich bleibt.
Ein konkretes Beispiel: reines Mittelgrau #767676 auf weißem Hintergrund ergibt genau 4,54:1 — knapp über dem WCAG-AA-Schwellenwert von 4,5:1 für normalen Text. Verschiebt man es einen Schritt dunkler zu #757575, fällt es auf 4,48:1 und verfehlt AA. Deshalb scheitern so viele Grau-auf-Weiß-Designs unbemerkt an einem Audit: Der visuelle Unterschied zwischen bestandenem und durchgefallenem Grau ist ein einziger RGB-Schritt — für die meisten Augen unsichtbar, für einen automatischen Scanner oder einen sehbehinderten Nutzer im hellen Tageslicht aber sehr sichtbar.
Was Sie wissen sollten
WCAG 2.1 legt je nach Textgröße zwei AA-Schwellenwerte fest: 4,5:1 für normalen Text und einen gelockerten 3:1 für großen Text — definiert als 18pt (24px) normale Stärke oder 14pt (18,7px) fett und größer, da dickere Striche auch bei geringerem Kontrast lesbar bleiben. Die strengere AAA-Stufe verlangt 7:1 bei normalem und 4,5:1 bei großem Text. Nicht-textuelle UI-Elemente wie Icons, Eingabefeldränder und Fokusindikatoren unterliegen unter WCAG 2.1 SC 1.4.11 einer eigenen 3:1-Anforderung, gemessen gegen die angrenzende Hintergrundfarbe.
Diese Zahlen sind nicht willkürlich — sie stammen aus Forschung zur Lesbarkeit für Nutzer mit Sehbehinderung, Farbenblindheit und altersbedingtem Verlust der Kontrastempfindlichkeit, und dienen zugleich als rechtlicher Bezugspunkt in Vorschriften wie dem ADA und EN 301 549, dem europäischen Standard hinter dem European Accessibility Act. Ein Kontrastfehler gehört zu den am häufigsten festgestellten Problemen in automatisierten Web-Accessibility-Audits — weshalb viele Designsysteme eine Untergrenze von 4,5:1 direkt in ihre Farb-Tokens einbacken, statt die Prüfung einzelnen Designern zu überlassen.
Häufig gestellte Fragen
Ändert das Vertauschen von Text und Hintergrund die Ratio?
Nein — die Formel setzt immer die hellere Farbe oben ein, das Verhältnis ist also symmetrisch. Die Lesbarkeit kann subjektiv trotzdem unterschiedlich wirken (Halo-Effekt bei hell auf dunkel), aber der WCAG-Wert bleibt identisch.
Was zählt als großer Text?
24 px (18 pt) normal oder etwa 18,7 px (14 pt) fett und größer. Großer Text benötigt bei AA nur 3:1, weil größere Zeichen auch bei geringerem Kontrast lesbar bleiben.
Meine Markenfarbe fällt durch — was jetzt?
Behalten Sie sie für dekorative Zwecke und verschieben Sie die Textverwendung dunkler oder heller, bis sie besteht; eine Ton-/Schattenskala hilft dabei. Platzhaltertext und deaktivierte Zustände sind von der Anforderung ausgenommen, sollten aber trotzdem angemessen bleiben.
Warum wird gammakorrigierte Leuchtdichte statt eines einfachen RGB-Durchschnitts verwendet?
Weil wahrgenommene Helligkeit weder linear noch kanalgleich ist — ein Durchschnitt der rohen RGB-Werte würde ein kräftiges Gelb (#ffff00) und ein mittleres Blau (#0000ff) als etwa gleich hell behandeln, obwohl Gelb dem Auge deutlich heller erscheint. Der Gamma-Dekodierungsschritt korrigiert dafür, dass sRGB Werte komprimiert statt lineares Licht zu speichern, und die Gewichte 0,2126/0,7152/0,0722 spiegeln die höhere Empfindlichkeit des Auges für Grün, dann Rot, dann Blau wider. Lässt man einen dieser Schritte aus, stimmen die Zahlen nicht mehr mit dem tatsächlich wahrgenommenen Kontrast überein.
Garantiert ein bestandenes Verhältnis, dass die Farben für farbenblinde Nutzer funktionieren?
Nicht vollständig — das Verhältnis misst nur den Leuchtdichteunterschied, nicht den Farbtonunterschied. Zwei Farben können also 4,5:1 bestehen und für jemanden mit Deuteranopie trotzdem schwer zu unterscheiden sein, wenn ihr Hauptunterschied im Farbton statt in der Helligkeit liegt, wie bei manchen Rot-/Grün-Paaren gleicher Helligkeit. Ein hoher Kontrastwert ist notwendig, aber nicht hinreichend für Barrierefreiheit bei Farbenblindheit; kombiniert mit einem Helligkeitsunterschied oder einem nicht-farblichen Hinweis wie einem Icon oder einer Unterstreichung deckt er beide Fälle ab.
Ähnliche Tools
Problem melden
WCAG-Kontrastrechner
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!