Was ist ein guter Kontrast? WCAG 2.2, AA, AAA und warum hellgrau auf weiß nicht reicht

Designer lieben elegantes Hellgrau auf Weiß. Nutzer mit Sehschwäche, ältere Menschen oder einfach jeder im Sommer in der Sonne auf dem Handy hassen es. Die Web Content Accessibility Guidelines (WCAG) liefern seit Jahren konkrete Zahlen, ab wann Text wirklich lesbar ist — und seit dem BFSG ist Kontrast in Deutschland für viele Anbieter nicht mehr nice-to-have, sondern Gesetz.

Warum Kontrast überhaupt zählt

Etwa 8 % aller Männer und 0,5 % aller Frauen haben eine Form von Farbsehschwäche. Hinzu kommen Menschen mit Katarakt, Makuladegeneration oder einfach nachlassender Sehschärfe im Alter — laut WHO weltweit mehr als 2,2 Milliarden Personen mit einer Sehbeeinträchtigung. Schlechter Kontrast schließt diese Gruppe systematisch aus, oft ohne dass es jemandem im Designprozess auffällt.

Selbst Nutzer ohne Einschränkung lesen schwachen Text deutlich langsamer und ermüden schneller. Studien zur Lesegeschwindigkeit zeigen, dass die Wortverarbeitung bei einem Kontrast unter 4:1 messbar einbricht. Wer denkt, dass Kontrast nur eine Accessibility-Nische sei, übersieht: bessere Lesbarkeit verbessert Conversion-Raten, weil Nutzer länger und konzentrierter bleiben.

Die WCAG-Stufen im Überblick

WCAG kennt drei Konformitätsstufen: A (minimal), AA (Standard für die meisten Websites) und AAA (höchstes Niveau, in der Praxis selten flächendeckend erreichbar). Für Text-Kontrast gelten konkret folgende Mindestverhältnisse zwischen Vorder- und Hintergrundfarbe:

• Level AA, normaler Text: mindestens 4,5:1 — das ist der Standard, an dem du dich orientieren solltest.
• Level AA, großer Text (ab 18 pt regulär oder 14 pt fett): mindestens 3:1 — Überschriften und große Buttons dürfen heller sein.
• Level AAA, normaler Text: mindestens 7:1 — empfohlen für lange Lesetexte, Behördenportale, Banking.
• Level AAA, großer Text: mindestens 4,5:1 — also genau das, was AA für normalen Text fordert.
• Nicht-textuelle Elemente (Icons, Bedienelemente, Grafiken, Diagramme): mindestens 3:1 zur direkten Umgebung (WCAG 1.4.11).

Wie das Kontrastverhältnis berechnet wird

Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere relative Luminanz ist. Die Luminanz selbst wird aus den sRGB-Komponenten gewichtet — Grün hat den größten Einfluss, Rot mittelmäßig, Blau am wenigsten. Deshalb sieht reines Blau auf Schwarz selbst bei mathematisch passablem Kontrast oft schlechter aus, als das Verhältnis vermuten lässt.

Die Werte reichen theoretisch von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). 4,5:1 entspricht ungefähr Dunkelgrau (#595959) auf Weiß — viele Designs landen darunter, vor allem bei Platzhaltertexten, deaktivierten Buttons oder grauen Untertiteln. Eine Sekunde im Kontrast-Checker rettet hier oft Stunden in der späteren Audit.

APCA — der Nachfolger für WCAG 3.0

Die WCAG-2-Formel hat ein bekanntes Problem: bei sehr hellen oder sehr dunklen Kombinationen liefert sie irreführende Werte. Schwarzer Text auf knallgelb bekommt fast 20:1, sieht aber im Dark-Mode-Vergleich oft schlechter aus als ein milderer Kontrast. APCA (Advanced Perceptual Contrast Algorithm) modelliert wahrnehmungsgerechter, berücksichtigt Schriftgröße und -gewicht direkt und liefert einen Wert in Prozentpunkten Helligkeitsdifferenz (Lc).

APCA ist als Kandidat für WCAG 3.0 vorgesehen, aber noch nicht offiziell verabschiedet. In der Praxis gilt: für rechtsverbindliche Konformität heute WCAG 2.2 nehmen, für Dark-Mode-Designs und sehr feines Tuning APCA als zweite Meinung dazuziehen. Beide Werte können in einem guten Kontrast-Tool nebeneinander angezeigt werden.

Rechtlicher Rahmen 2026

Seit 28. Juni 2025 ist in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG) wirksam. Es zwingt zahlreiche Anbieter — Online-Shops, Banking-Apps, Reise- und Transportanbieter, E-Book-Reader, viele B2C-Dienste — zur Einhaltung des EN-301-549-Standards, der WCAG 2.1/2.2 AA fordert. Verstöße können mit Bußgeldern bis 100.000 € sanktioniert werden, in extremen Fällen droht die Marktrücknahme.

In den USA gibt es seit Jahrzehnten Section 508 für Behörden und den Americans with Disabilities Act, der in der Rechtsprechung zunehmend auf Websites angewendet wird. Wer eine internationale Zielgruppe bedient, kann Accessibility heute nicht mehr als optional einstufen — und Kontrast ist die niedrig hängende Frucht, die in jeder Audit zuerst auffällt.

Typische Stolperfallen

Folgende Elemente werden in 90 % aller Designs übersehen — prüfe sie gezielt:

• Placeholder-Text in Formularen: per Default oft viel zu hellgrau (z. B. #999) — sobald er Information transportiert, gilt 4,5:1.
• Fokus-Indikatoren: Browser-Default-Outline wird häufig per CSS entfernt — der Ersatz muss mindestens 3:1 zum Hintergrund haben (WCAG 2.4.11, neu in 2.2).
• Deaktivierte Buttons: WCAG nimmt sie formal aus, aber wenn Nutzer nicht erkennen können, dass etwas deaktiviert ist, ist das ein Usability-Bug. Pragmatisch: mindestens 3:1.
• Markenfarben auf Markenfarben: Logo-Farben werden gern auch für Buttons oder Text auf farbigem Hintergrund verwendet — fast immer eine Kontrastfalle.

Häufige Fragen

Reicht es, wenn ich überall AA habe?

Für die meisten kommerziellen Websites ja. AA ist der gesetzlich geforderte Standard nach BFSG, ADA und EN 301 549. AAA strebt man freiwillig an, wenn lange Lesetexte (Magazin, Blog, Wissensbasis) oder sicherheitskritische Zielgruppen (Banking, Gesundheit) im Vordergrund stehen.

Was mache ich, wenn die Markenfarbe das Verhältnis sprengt?

Dann wird die Markenfarbe zur dekorativen Akzentfarbe und nicht für Text genutzt. Praxisbeispiel: das knallige Orange als Button-Hintergrund mit weißem Text funktioniert, als Textfarbe auf weißem Hintergrund nicht. Viele Brand-Guides definieren deshalb eine zweite, dunklere Version explizit für Text — das sollte standardmäßig im Designsystem stehen.

Wie wirken sich Dark-Mode und Bildhintergründe aus?

Dark Mode verändert das Spiel: helle Schrift auf sehr dunklem Grund kann bei zu dünner Schrift unscharf wirken (Halation). Hier hilft etwas mehr Font-Weight oder eine minimal hellere Variante des Dunkelgraus. Bildhintergründe brauchen Text-Schatten oder eine halbtransparente Overlay-Box — den Kontrast misst man dann an der dunkelsten Stelle hinter dem Text.