WCAG Kontrast erklärt: AA/AAA, Regeln und Beispiele
Gute Kontraste sind die Grundlage für lesbare Websites und barrierefreie Benutzeroberflächen. Auf dieser Seite lernst du, was das Kontrastverhältnis bedeutet, welche Grenzwerte WCAG AA/AAA verlangt und wie du mit typischen UI-Beispielen (Buttons, Text, Icons, Dark Mode) schnell zu besseren Ergebnissen kommst.
Was ist Kontrast (Kontrastverhältnis)?
Das Kontrastverhältnis (z. B. 4.5:1) beschreibt, wie stark sich
Vordergrund (z. B. Textfarbe)
und Hintergrund (z. B. Flächenfarbe) in ihrer Helligkeit unterscheiden.
Je höher das Verhältnis, desto besser ist die Lesbarkeit — insbesondere für Menschen mit
Sehbeeinträchtigungen,
bei Sonnenlicht, auf schlechten Displays oder bei Müdigkeit.
1:1 bedeutet „kein Unterschied“ (praktisch unlesbar),
21:1 ist der maximale Kontrast (schwarz auf weiß).
Wie wird Kontrast berechnet?
WCAG berechnet Kontrast über die relative Luminanz (Helligkeit) von Vorder- und Hintergrund. Die exakte Formel ist technisch — wichtig ist aber: Es geht nicht um „Farbunterschied“, sondern um Helligkeitsunterschied.
Hinweis: Die Luminanz wird in sRGB berechnet. Transparenzen, Overlays und Schatten können das Ergebnis im echten UI verändern.
WCAG AA/AAA Grenzwerte
Für Text gelten je nach Größe unterschiedliche Mindestwerte. Für UI-Komponenten (z. B. Icons, Button-Rahmen, Form-Felder) gibt es zusätzlich Regeln für „Non-text Contrast“.
| Element | WCAG AA | WCAG AAA | Hinweis |
|---|---|---|---|
| Normaler Text | ≥ 4.5:1 | ≥ 7:1 | Standard-Body-Text, Labels, Fließtext |
| Großer Text | ≥ 3:1 | ≥ 4.5:1 | Groß oder fett (siehe Definition unten) |
| UI-Komponenten & Icons | ≥ 3:1 | — | z. B. Button-Flächen, Input-Ränder, Icons (Non-text Contrast) |
Was gilt als „großer Text“?
„Großer Text“ darf niedrigere Kontrastwerte haben, weil er leichter zu lesen ist. Als Faustregel gilt:
- mindestens 24px (ungefähr 18pt) bei normaler Schriftstärke
- mindestens 18.66px (ungefähr 14pt) bei fetter Schrift
Beispiele: Text auf Hintergrund
Kontrast ist am wichtigsten dort, wo Menschen Informationen lesen müssen: Fließtext, Beschriftungen, Formulare, Fehlermeldungen, Hinweise, Links. Hier sind typische Kombinationen — inklusive „sieht ok aus, ist aber riskant“.
Beispiele: Buttons, Links, Icons & Form-Elemente
WCAG-Kontrast ist nicht nur Text. Für UI-Komponenten (z. B. Button-Flächen, Icons, Input-Border) gilt in der Regel: mindestens 3:1 gegenüber dem angrenzenden Hintergrund. Das ist wichtig für Erkennbarkeit.
Typische Fehler, die Kontrast „kaputt“ machen
Selbst wenn ein Paar im Rechner 4.5:1 erreicht, kann es im echten UI schlechter wirken.
Hier die häufigsten Ursachen:
Praxis-Workflow fürs Designsystem
Wenn du Farben systematisch (z. B. Skala 50–900) aufbaust, kommst du schneller zu WCAG-konformen Ergebnissen, wenn du Helligkeit und Textfarben strategisch festlegst.
- Lege neutrale Textfarben fest (z. B. „Text“ und „Muted Text“) – nicht zu hell.
- Baue Farbskalen (idealerweise in OKLCH) und prüfe Kontrast zu Textfarben.
- Definiere Token-Paare:
--btn-bg+--btn-text,--card-bg+--card-text, usw. - Teste im echten UI (kleine Schrift, mobile, Dark Mode, Hover/Active).
Wenn du OKLCH nutzt: Generiere Stufen über L, halte C moderat und prüfe die wichtigsten Kombinationen (Text/Buttons/Links) zuerst.
WCAG-Kontrast im Tool prüfen
Im Tool kannst du Vordergrund- und Hintergrundfarbe eingeben, das Kontrastverhältnis berechnen und direkt sehen, ob AA oder AAA erreicht wird – inklusive Schriftgröße.
FAQ: Häufige Fragen zu WCAG-Kontrast
Kurze Antworten auf typische Fragen, die beim Arbeiten mit Kontrast und WCAG fast immer auftauchen.
Was bedeutet das WCAG-Kontrastverhältnis (z. B. 4.5:1)?
Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Vordergrund (z. B.
Text) und Hintergrund.
4.5:1 bedeutet: der hellere Ton ist 4,5-mal so hell wie der dunklere – bezogen
auf relative Luminanz.
Welche Kontrastwerte fordert WCAG (AA/AAA) für Text?
Für normalen Text fordert WCAG AA mindestens 4.5:1 und
AAA mindestens 7:1.
Für großen Text gelten niedrigere Grenzen: AA mindestens 3:1
und AAA mindestens 4.5:1.
Was zählt als „großer Text“ bei WCAG?
Als großer Text gilt typischerweise 18pt (ca. 24px) normal oder 14pt (ca. 18.66px) fett. Für großen Text sind die Kontrast-Anforderungen geringer.
Gilt WCAG-Kontrast auch für Buttons, Icons und UI-Elemente?
Ja. Für nicht-textuelle UI-Komponenten (z. B. Button-Flächen, Icons, Form-Umrandungen) gilt in der Regel ein Mindestkontrast von 3:1 gegenüber dem angrenzenden Hintergrund (Non-text Contrast).
Warum kann Kontrast trotz „4.5:1“ in der Praxis schlechter wirken?
Kontrastmessungen basieren auf sRGB-Luminanz. In der Praxis verschlechtern Transparenz, dünne Schriften, zu kleine Schriftgrößen, farbige Hintergründe, Glow/Blur, Anti-Aliasing oder Overlays die Lesbarkeit. Deshalb immer real im UI testen.
Mehr Praxis: Tool öffnen · Farbmodelle