Farbkontrast im Web: Ein praktischer Leitfaden zu WCAG

Wenn Sie je ein Barrierefreiheits-Audit gefahren haben, sind Sie wahrscheinlich auf diesen Moment gestoßen: Ein Absatz hellgrauen Textes, der für Sie vollkommen lesbar wirkt, wird wegen „unzureichenden Kontrasts“ markiert. Das Werkzeug ist nicht pedantisch — menschliches Urteil über Lesbarkeit ist notorisch unzuverlässig. Es wird von Bildschirmhelligkeit, Umgebungslicht, Alter und der Tagesform Ihrer Augen beeinflusst. WCAG (die Web Content Accessibility Guidelines) ersetzt subjektives Urteil durch eine Formel. Dieser Artikel erklärt diese Formel und wie man in der Praxis damit arbeitet.

Relative Leuchtdichte: wo die Mathematik beginnt

WCAG misst Kontrast mit der relativen Leuchtdichte — einer Zahl zwischen 0 (Schwarz) und 1 (Weiß), die annähert, wie hell eine Farbe dem menschlichen Auge erscheint. Sie ist kein einfacher Durchschnitt der RGB-Kanäle. Jeder Kanalwert (0–255) wird zuerst auf 0–1 normalisiert, dann „linearisiert“ (geteilt durch 12,92, wenn er bei oder unter 0,04045 liegt, sonst durch eine Potenzfunktion mit Exponent 2,4 geschickt) und schließlich gewichtet kombiniert:

L = 0,2126 × R + 0,7152 × G + 0,0722 × B

Die Gewichte sind wild ungleich: Grün zählt 71,5 %, Rot 21,3 % und Blau nur 7,2 %. Das spiegelt die Empfindlichkeit des menschlichen Auges, das auf Grün am stärksten und auf Blau am schwächsten reagiert. Deshalb verhalten sich reines Blau und reines Grün derselben „Intensität“ so unterschiedlich — schwarzer Text auf dunkelblauem Hintergrund kann erträglich sein, während schwarzer Text auf gesättigtem Grün schmerzt.

Wie das Kontrastverhältnis berechnet wird

Haben Sie die relative Leuchtdichte des Vordergrunds (L1, der hellere) und des Hintergrunds (L2), lautet das Verhältnis:

Verhältnis = (L1 + 0,05) / (L2 + 0,05)

Das Ergebnis reicht von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß). Der 0,05-Term gleicht Umgebungslicht aus und hält das Verhältnis davon ab, bei sehr dunklen Farben zu explodieren. Das Verhältnis hängt nur von den zwei Farben ab — Schriftgröße und -gewicht gehen nicht in die Berechnung ein. Sie zählen separat, in den Schwellenwerten.

AA vs. AAA: zwei Konformitätsstufen

WCAG 2.1 definiert drei Konformitätsstufen — A, AA und AAA. Die Kontrastanforderungen leben in den letzten beiden:

Stufe	Normaler Fließtext	Großer Text
AA (die Mainstream-Anforderung)	4,5:1	3:1
AAA (erhöht)	7:1	4,5:1

Die meisten Gesetze und Beschaffungsstandards (EN 301 549 in der EU, ADA-bezogene Praxis in den USA) verlangen AA. AAA ist ein Streckenziel, meist nur dort verlangt, wo Lesbarkeit kritisch ist, etwa im Gesundheitswesen oder bei Behördendiensten. Eine pragmatische Strategie: Garantieren Sie AA für Fließtext und zielen Sie auf AAA bei Überschriften und wichtigen Handlungsaufrufen.

Einige Elementtypen sind von den Kontrastanforderungen ausgenommen: rein dekorative Inhalte, unsichtbare Elemente, deaktivierte Bedienelemente und Text in Logos und Markenzeichen. Aber „ausgenommen“ heißt nicht „gute Idee“ — ist deaktivierter Text ohne visuelle Verwirrung lesbar zu machen, machen Sie ihn lesbar.

Warum Fließtext und großer Text verschiedene Schwellen haben

„Großer Text“ ist als mindestens 18 pt (etwa 24 px) bei normalem Gewicht oder 14 pt (etwa 18,66 px) fett definiert. Größere Glyphen mit dickeren Strichen brauchen weniger Kontrast, um lesbar zu bleiben, AA verlangt bei großem Text also nur 3:1.

Die praktische Konsequenz schneidet in beide Richtungen: Überdimensionierte Überschriften können sicher hellere, ausdrucksstärkere Farben nutzen, während Fließtext konservativ bleiben muss. Und die klassische Fehlerzone ist die 13-px-Hellgrau-Bildunterschrift — sie muss die vollen 4,5:1 erfüllen, und genau dort drehen Designer die Farbe am häufigsten aus Instinkt herunter.

Warum grauer Text immer wieder durchfällt

Was ergibt #777777 auf Weiß? 4,48:1 — eine Winzigkeit unter 4,5. Dieser berühmte Beinahe-Treffer illustriert das Kernproblem: Nach Augenmaß gewählte Grautöne landen tendenziell genau um die Schwelle in der Gefahrenzone. Weitere häufige Übeltäter: #999999 (2,85:1, nur großer Text) und #CCCCCC (1,6:1, praktisch unlesbar).

Grauer Text ist beliebt, weil er Oberflächen „leicht“ wirken lässt, doch der wahrgenommene Abstand zwischen einem Hellgrau und Weiß ist kurz und lässt sehr wenig Spielraum. Braucht Ihr Design de-emphasisierten Sekundärtext, ist der richtige Ablauf, zuerst den Hintergrund zu fixieren, dann von einem dunklen Grau zu starten und es schrittweise aufzuhellen, bis es die Linie gerade eben überschreitet — nicht ein Grau einzutippen, das sich ungefähr richtig anfühlt. Im Zweifel schicken Sie das Paar durch einen Kontrast-Checker; er bewertet AA und AAA für normalen und großen Text in einem Durchgang, was jedes Kopfrechnen schlägt.

Was tun, wenn Ihre Markenfarbe durchfällt

Markenfarben sind die häufigste und unangenehmste Quelle von Kontrastkonflikten: Die Primärfarbe des Marketings steht bei 3,8:1, sie zu ändern erfordert Marken-Team-Freigabe, und sie unverändert auszuliefern fällt durch Audits. Hier sind erprobte Optionen, geordnet von günstig bis teuer:

1. Reservieren Sie die Markenfarbe für großen Text und Grafiken. Alles ab 3:1 darf legal in Überschriften, Icons und Buttonrändern erscheinen — nur nicht im Fließtext.
2. Leiten Sie eine „Textvariante“ der Markenfarbe ab. Behalten Sie Farbton und Sättigung, dunkeln Sie nur die Helligkeit ab, und Sie erhalten eine Variante, die 4,5:1 besteht und für Nutzer dennoch wie dieselbe Markenfarbe liest. Ein Color Picker macht das leicht — halten Sie den Farbton fest, schieben Sie die Helligkeit, und beobachten Sie den Kontrast dabei.
3. Ändern Sie den Hintergrund statt des Vordergrunds. Dunkle Markenfarben punkten auf einem Off-White wie #F5F5F5 etwas besser als auf reinem Weiß, und manchmal reicht diese Marge. Die Richtung ist kontraintuitiv: Den Hintergrund abzudunkeln erhöht das Verhältnis für dunklen Text.
4. Setzen Sie dunklen Text auf die Markenfarbe. Ist die Markenfarbe hell, schlägt schwarzer Text darauf weißen Text meist um Längen.

Die schlechteste Option ist, die Markenfarbe auf 14-px-Fließtext auszuliefern und den Auditbericht zu ignorieren.

Ein Kontrastprüf-Workflow für Designsysteme

Ad-hoc-Prüfungen können systemische Probleme nicht beheben. Pflegt Ihr Team ein Designsystem, machen Sie die Kontrastprüfung zu einem Prozess statt einer persönlichen Gewohnheit:

• Testen Sie an der Token-Tabelle, nicht an der Seite. Designsystem-Farben leben meist als Tokens (text-primary, surface-muted). Zählen Sie jede legale Kombination „Textfarbe × Hintergrundfarbe“ auf, messen Sie jede, und verbannen Sie die durchfallenden Paare aus der Spezifikation.
• Annotieren Sie jedes Text-Token mit seiner beabsichtigten Verwendung. Markieren Sie, ob eine Farbe „fließtextsicher“ (muss 4,5:1 bestehen) oder „nur groß/dekorativ“ ist (3:1), damit niemand ein Bildunterschriften-Grau in Absätze befördert.
• Backen Sie es in die Komponentenbibliothek. Buttons, Inputs und Karten werden einmal auf Komponentenebene geprüft; Produktteams erben dann konforme Standards gratis.
• Führen Sie die Matrix bei Redesigns erneut aus. Marken-Refreshes und Dark-Mode-Einführungen sind klassische Regressionspunkte. Dark Mode fällt besonders oft durch — reiner weißer Text auf einer hellgrauen Karte ist ein subtileres Problem als alles im Light Mode.

Sind Sie noch in der Palettenphase, erzeugen Sie Kandidaten mit einem Color Palette Generator und filtern Sie sie vor der Festlegung durch Kontrastprüfungen — weit effizienter, als eine durchfallende Markenpalette nachträglich zu flicken.

Zum Schluss

Kontrast ist keine Mystik: eine Leuchtdichteformel plus zwei Stufen von Schwellen (AA 4,5/3, AAA 7/4,5) ist das ganze Regelwerk. Grauer Text ist der übliche Verdächtige, Markenfarben werden durch abgeleitete Varianten oder eingeschränkte Nutzung konform, und Prüfungen stromaufwärts ins Designsystem zu schieben spart eine Größenordnung an Nacharbeit. Wenn ein Design-Review das nächste Mal in „ich kann es gut lesen“ abgleitet, fügen Sie die zwei Hex-Werte in einen Checker ein und lassen Sie die Zahlen entscheiden.