Was bedeutet Contrast Ratio?
Das Kontrastverhältnis (englisch: Contrast Ratio) beschreibt den Helligkeitsunterschied zwischen Vordergrund (z. B. Text) und Hintergrund. Es wird als Zahlenverhältnis ausgedrückt – etwa 4.5:1 oder 7:1 – und gibt an, wie stark ein Text sich vom Hintergrund abhebt. Ein hoher Kontrast verbessert die Lesbarkeit für alle, insbesondere aber für Menschen mit Sehbehinderungen oder Farbenfehlsichtigkeit.
Warum ist ein gutes Kontrastverhältnis wichtig?
Ohne ausreichenden Kontrast kann selbst gut platzierter und korrekt formulierter Text kaum wahrgenommen werden. Betroffen sind besonders:
Nutzer:innen mit eingeschränkter Sehkraft
ältere Menschen mit nachlassendem Sehvermögen
Menschen mit Farbenblindheit (z. B. Rot-Grün-Schwäche)
mobile Nutzer:innen mit Sonnenlichteinstrahlung
Ein zu geringer Kontrast erschwert den Zugang zu Informationen – unabhängig von der Qualität des Inhalts.
Mindestanforderungen laut WCAG
Die Web Content Accessibility Guidelines (WCAG 2.2) definieren folgende Kontrastanforderungen:
4.5:1 für normalen Text (z. B. 16 px oder kleiner)
3:1 für großen Text (mind. 24 px normal oder 19 px fett)
3:1 für grafische Elemente und Bedienelemente
Für ein hohes Maß an Zugänglichkeit wird ein Kontrastverhältnis von 7:1 empfohlen – besonders bei kritischen Informationen oder Interfaces für ältere Zielgruppen.
Typische Kontrastprobleme
hellgrauer Text auf weißem Hintergrund
blauer Text auf schwarzem Hintergrund
farbige Buttons ohne ausreichenden Textkontrast
Verzicht auf Kontrastprüfung bei CI/CD-Vorgaben
rein farbbasierte Informationen (z. B. grün = richtig, rot = falsch)
All diese Fälle können Menschen ausschließen – besonders, wenn keine Alternativen (Symbole, Textbeschriftungen) vorhanden sind.
Tools zur Kontrastprüfung
Zur Berechnung des Kontrastverhältnisses stehen zahlreiche Tools zur Verfügung:
WebAIM Contrast Checker
Color Contrast Analyzer (TPG)
axe DevTools (Browser-Erweiterung)
Accessibility Insights
Funktionen in Designsoftware (Figma, Adobe XD, Sketch)
Diese Werkzeuge helfen bei der Auswahl barrierefreier Farbkombinationen und warnen vor Grenzfällen.
Technische Hinweise zur Umsetzung
Verwende CSS-Variablen für Farbkombinationen, die WCAG-konform sind.
Prüfe auch Hover- und Fokuszustände von Links und Buttons.
Vermeide Transparenzen und Farbüberlagerungen mit unklarem Effekt.
Denke bei dynamischen Interfaces auch an Kontraste bei aktivierten Zuständen (z. B. Button gedrückt).
Vorteile eines guten Kontrasts
Verbesserte Zugänglichkeit für Menschen mit eingeschränktem Sehvermögen
bessere Lesbarkeit auf mobilen Geräten
höhere Benutzerzufriedenheit
rechtliche Sicherheit (z. B. WCAG, BITV, EN 301 549)
positive Auswirkungen auf SEO, da Google auch Lesbarkeit bewertet
