Farbkontraste - Barrierefreies Webdesign (WCAG & BFSG)

Zu wenig Kontrast erschwert das Lesen von Texten und das Erkennen von Bedienelementen. Der WebAIM Million Report (2025) zählt Kontrastprobleme zu den häufigsten automatisch erkennbaren Fehlern.

Für bestimmte verbraucherorientierte digitale Services gilt das BFSG seit 28. Juni 2025. Dieser Guide erklärt die WCAG-Kontrastregeln und zeigt Dir, wie Du Farbkombinationen prüfen und verbessern kannst.

1) Was ist Farbkontrast – und warum ist er so wichtig?

Kontrast beschreibt den Unterschied der Leuchtdichte (Luminanz) zwischen Vordergrund (z. B. Text) und Hintergrund.

• Skala: von 1:1 (praktisch unsichtbar) bis 21:1 (Schwarz auf Weiß).
• Warum Luminanz zählt: Das Auge nimmt Farben unterschiedlich hell wahr (Grün erscheint typischerweise heller als Blau).

Wen betrifft das konkret?

• Menschen mit Sehbeeinträchtigungen: brauchen mehr Kontrast, um Inhalte zu erkennen.
• Farbfehlsichtigkeit: Wenn Informationen nur über Farbton vermittelt werden (z. B. „Rot = Fehler“), gehen sie verloren.
• Situative Einschränkungen: Sonnenlicht auf dem Smartphone reduziert wahrgenommenen Kontrast massiv.

2) WCAG-Kontrastregeln (2.1/2.2) – kompakt erklärt

In der Praxis ist für viele Websites WCAG 2.1 Level AA der Zielstandard (WCAG 2.2 gilt häufig als Best Practice).

2.1 Normaler Text: 4,5:1

Für Fließtext, Labels, Navigation und die meisten UI-Texte gilt: mindestens 4,5:1.

2.2 Großer Text: 3:1

Großer Text ist leichter lesbar und darf ab 3:1 liegen.

• Definition (WCAG): mindestens 18pt (≈ 24px) normal oder 14pt (≈ 18,5px) fett.
• Achtung: Eine normale 16px-Überschrift (auch fett) gilt nicht automatisch als „groß“.

2.3 Nicht-Text-Kontrast (UI-Komponenten): 3:1

Seit WCAG 2.1 (SC 1.4.11) gilt auch für UI-Komponenten ein Mindestkontrast von 3:1:

• Rahmen/Umrandung von Eingabefeldern
• bedeutungstragende Icons
• Fokus-Indikatoren bei Tastaturbedienung

Prüfe notwendige Rahmen, Fokusringe und Checkbox-Markierungen pro Zustand. Unsere gemessene UI-Zustandsmatrix zu Nicht-Text-Kontrast zeigt Beispiele in Light und Dark Mode sowie die Grenzen des Textkontrast-Scans.

2.4 WCAG 2.2: Fokus-Sichtbarkeit

WCAG 2.2 verschärft den Fokus-Kontext – u. a. mit SC 2.4.11 (Focus Not Obscured), damit fokussierte Elemente nicht unter Sticky Headern oder Bannern verschwinden.

3) Rechtlicher Kontext: BFSG, EAA & internationales Risiko

• Deutschland (BFSG): seit 28.06.2025 verpflichtend für bestimmte verbraucherorientierte digitale Services.
• Europa (EAA): harmonisiert Anforderungen; bei grenzüberschreitenden Angeboten relevant.
• International (z. B. USA/ADA): kann bei US-Reichweite ein zusätzliches rechtliches Risiko bedeuten.

4) Häufige Kontrast-Fallen (mit Lösungsvorschlägen)

Falle 1: „CTA Orange“ mit weißem Text

• Problem: Klassisches Orange wie #FF6600 scheitert oft mit weißer Schrift (typisch um ~2,1:1).
• Lösung: entweder Orange abdunkeln (z. B. #D35400) oder dunklen Text auf Orange nutzen.

Falle 2: „Subtiles Grau“ für Metadaten

• Problem: #999999 auf Weiß erreicht nur ca. 2,8:1.
• Lösung: als Untergrenze für Grau auf Weiß etwa #767676.

Falle 3: Farbe als einziges Signal

• Problem: „Nur Rot“ als Fehlermeldung ist für viele Nutzer nicht eindeutig.
• Lösung: Farbe + Symbol + Text kombinieren.

Beispiel:

• ❌ Nur roter Text: „Ungültige E-Mail“
• ✅ Icon + Text: „Fehler: Ungültige E-Mail“

5) Schnell-Check: Welche Werte brauche ich?

6) Kontrast testen in der Praxis

Automatisiert

Tipp: Probiere unseren kostenlosen Kontrast-Checker.

• Lighthouse (Chrome DevTools)
• WAVE

Wenn der Lighthouse-Accessibility-Score dauerhaft unter 90 liegt, sind oft systemische Kontrastprobleme im Design-System vorhanden.

Manuell

• Augenkneif-Test: Wenn Text „verschwindet“, ist der Kontrast meist zu niedrig.
• Graustufen-Test: Inhalte müssen auch ohne Farbunterschied erkennbar bleiben.
• Bildhintergründe: Tools übersehen häufig Text auf Bildern/Overlays.

Mini-Pattern für sichtbaren Fokus

/* Beispiel: Fokus-Indikator mit gutem Kontrast */
:focus-visible {
  outline: 3px solid #0ea5e9;
  outline-offset: 3px;
}

Kontrast-Fixes prüfen und dokumentieren

Miss den Kontrast Deiner Text- und Hintergrundfarben. Prüfe die geänderten Farbkombinationen erneut und dokumentiere die Ergebnisse. Für normalen Text gilt ein Mindestkontrast von 4,5:1.

Mehr Kriterien im WCAG-Hub · Mit Audit prüfen

Plane mit der Website-Test-Checkliste, in welchen Seitenzuständen Du Kontraste und weitere Barrieren prüfst.