Eine Website mit schlechtem Kontrast ist wie ein Schaufenster mit beschlagenem Glas — die Inhalte sind theoretisch da, aber niemand kann sie wirklich sehen. Was viele Designer für eine ästhetische Stilfrage halten („zartes Hellgrau auf Weiß ist edel"), ist 2026 ein konkretes Geschäftsproblem: Conversions sinken, Frustration steigt, und seit dem BFSG drohen rechtliche Konsequenzen.
Hier ist eine pragmatische Anleitung zum Thema Kontrast — was er wirklich bedeutet, warum er wichtig ist und wie du ihn richtig einsetzt.
Was Kontrast technisch bedeutet
Kontrast misst den Helligkeitsunterschied zwischen zwei Farben — typischerweise zwischen Text und Hintergrund. Berechnet wird er als Verhältnis: 1:1 wäre identische Helligkeit (unsichtbar), 21:1 ist das absolute Maximum (Schwarz auf Weiß).
Die WCAG (Web Content Accessibility Guidelines) definieren zwei Stufen:
WCAG AA (Pflicht-Standard): 4,5:1 für normalen Text, 3:1 für großen Text (ab 18pt oder 14pt fett) und UI-Elemente.
WCAG AAA (höchster Standard): 7:1 für normalen Text, 4,5:1 für großen Text. In der Regel nur bei sicherheitskritischen Anwendungen oder Zielgruppen mit Sehbehinderungen Pflicht.
Für die meisten Websites 2026 gilt: AA ist der Mindeststandard, der eingehalten werden muss.
Warum schlechter Kontrast geschäftlich problematisch ist
1. Conversion sinkt messbar. Studien zeigen: Schlecht lesbare CTAs (Call-to-Action-Buttons) konvertieren bis zu 30 % schlechter als gut kontrastierte. Bei einem Onlineshop mit 100.000 € Jahresumsatz entspricht das mehreren tausend Euro Verlust.
2. Mobile Nutzer leiden besonders. Auf einem hellen Smartphone-Display in der Sonne ist schon guter Kontrast schwer lesbar — schlechter Kontrast wird unmöglich. 70 % aller Web-Nutzung ist mobil.
3. BFSG-Pflicht für Onlineshops. Seit Mitte 2025 sind WCAG-AA-Kontraste für Verbraucher-Plattformen rechtlich vorgeschrieben. Mehr im Beitrag über das BFSG-Update 2026.
4. Ältere Nutzer steigen aus. Augen ab 50 nehmen weniger Kontrast wahr — und das ist nicht nur eine demographische Randgruppe, sondern oft die kaufkräftigste Zielgruppe.
Häufige Designer-Fehler 2026
Trotz BFSG und 20 Jahren WCAG: Diese Fehler sehe ich in 2026er Websites täglich:
Fehler 1: Hellgrauer Fließtext auf Weiß. #999 auf #FFFFFF ist 2,8:1 — durchgefallen. „Sieht edel aus" ist kein Argument vor dem Gesetz.
Fehler 2: Platzhalter-Text in Eingabefeldern. Helle Placeholder, die später durch echten Text ersetzt werden, sind oft schon im Test-Modus schwer lesbar — und im Mobile-Modus unsichtbar.
Fehler 3: Buttons mit zu wenig Kontrast zur Umgebung. Pastell-Türkis auf Pastell-Türkis ist hübsch, aber niemand sieht den Button.
Fehler 4: Texte über Bildern ohne Overlay. Ein Header-Bild mit weißem Text drauf ist Glücksspiel — manchmal lesbar, manchmal nicht. Lösung: dunkles, halbtransparentes Overlay zwischen Bild und Text.
Fehler 5: Link-Farben, die kaum vom Fließtext unterscheidbar sind. Ein dunkelroter Link in einem schwarzen Text ist nicht erkennbar — Nutzer klicken nicht, weil sie ihn nicht als Link erkennen.
Praktischer Workflow: Kontrast prüfen
Wer eine bestehende Website auf Kontrast prüfen will:
Schritt 1: Hauptfarben identifizieren. Welche Text-Farbe steht auf welchem Hintergrund? Üblicherweise sind das 5–10 Kombinationen — Fließtext auf Weiß, Headlines in Markenfarbe, Footer-Text auf dunklem Hintergrund, Buttons.
Schritt 2: Jede Kombination durchtesten. Mit dem Kontrast-Checker jede Kombination einzeln prüfen. WCAG AA ist Mindeststandard.
Schritt 3: Bei Problemen anpassen. Meist reicht eine kleine Anpassung der Helligkeit. Aus #999 wird #707070 — nicht mehr „edel grau", aber lesbar.
Schritt 4: Dunkelmodus prüfen. Auch im Dark Mode müssen Kontraste eingehalten werden. Eine helle Schrift auf dunkelgrauem Hintergrund kann genauso schlecht lesbar sein wie schwarze auf hellgrauem. Mehr im Beitrag über Dark Mode.
Wenn die Marke nicht passt
Was, wenn die Markenfarbe selbst kontrast-problematisch ist? Beispiel: Eine helltürkise Marke (#5DD0BC) auf weißem Hintergrund hat 1,9:1 — durchgefallen. Lösungen:
Lösung 1: Markenfarbe nur als Akzent. Helltürkis als Hover-Farbe oder dekorativer Akzent — der eigentliche Text in einem dunkleren Ton.
Lösung 2: Kontrast-Variante der Markenfarbe. Jede Marke kann eine dunklere Variante haben für Text-Anwendungen. #2A8474 statt #5DD0BC — gleiche Markenfamilie, lesbarer Kontrast.
Lösung 3: Hintergrund anpassen. Statt weiß — sehr dunkler Hintergrund. Helltürkis auf #1A1A1A funktioniert kontraststark.
Tools für die Praxis
Bei DOSIGNY-Projekten Standard-Workflow:
Bei Konzeption: Farbpaletten-Generator für die Markenpalette, dann jede Kombination im Kontrast-Checker verifizieren.
Bei Umsetzung: CSS-Variablen für alle Text-Farben definieren, sodass eine zentrale Anpassung global wirkt.
Vor Launch: WAVE Browser-Extension oder Lighthouse Accessibility Audit über alle Hauptseiten laufen lassen — die häufigsten Probleme werden sofort sichtbar.
Nach Launch: Periodische Prüfung mit dem Website-Check, der auch Accessibility-Aspekte mit abdeckt.
Was BFSG-Konformität für die Praxis bedeutet
Wer einen Onlineshop oder eine andere Verbraucher-Plattform betreibt, muss BFSG-konform sein. Konkret heißt das beim Thema Kontrast: Jede sichtbare Text-Hintergrund-Kombination MUSS WCAG AA erfüllen — keine Ausreden, keine Designer-Argumente, keine „aber das sieht hübscher aus".
Mehr zur ganzen Barrierefreiheit als Strategie auf der Service-Seite. Bei Fragen zu konkreter BFSG-Umsetzung deiner Website oder zu einem Audit der Bestands-Website melde dich gerne über das Kontaktformular — eine erste Analyse mit konkreten Verbesserungsvorschlägen ist drin.
