Farbkontraste prüfen und korrigieren: WCAG-Kontrastverhältnis einfach erklärt

Was ist das Kontrastverhältnis?

Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei Farben auf einer Skala von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Die WCAG 2.1 fordert für normalen Text mindestens 4,5:1 und für großen Text (ab 18pt oder 14pt fett) mindestens 3:1. Diese Werte stellen sicher dass auch Menschen mit Sehschwäche den Text lesen können.

Warum Kontraste einer der häufigsten BFSG-Verstöße sind

Viele Designer wählen Farben nach Ästhetik, nicht nach Lesbarkeit. Hellgraue Texte auf weißem Hintergrund sehen elegant aus, haben aber oft nur ein Verhältnis von 2:1 oder 3:1 – zu wenig für BFSG-Konformität. Besonders problematisch: Platzhalter-Text in Formularen, Footer-Links, und Text auf Bilderhintergründen.

Kostenlose Tools zur Kontrast-Prüfung

WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Zwei Hex-Farben eingeben, sofort das Verhältnis sehen. Chrome DevTools: Elements-Tab, Farbe anklicken, Kontrast wird angezeigt. WAVE Browser Extension: Markiert Kontrast-Probleme direkt auf der Seite.

Und natürlich: bf-check.de prüft Kontraste automatisch.

Kontraste korrigieren ohne das Design zu zerstören

Oft reicht eine kleine Anpassung: Statt #999999 auf Weiß (Verhältnis 2.8:1) nutze #595959 (Verhältnis 7:1). Der Unterschied ist visuell subtil, aber der Kontrast verdoppelt sich. Tipp: Dunkle Texte dunkler machen, nicht helle Hintergründe dunkler.

So bleibt das Design-Gefühl erhalten.

Häufig gestellte Fragen