Farbkontraste - Barrierefreies Webdesign (WCAG & BFSG)

Im digitalen Jahr 2026 ist Barrierefreiheit kein „Nice-to-have“ mehr. Spätestens seit dem vollständigen Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 ist Accessibility für viele digitale Services eine Grundvoraussetzung.

Der häufigste Stolperstein bleibt dabei überraschend simpel: Farbkontrast. Der WebAIM Million Report (2025) zeigt, dass Kontrastprobleme zu den häufigsten automatisch erkennbaren Fehlern gehören.

Hinweis: Fehlende oder unzureichende Kontraste sind nicht nur ein UX-Problem. Je nach Angebot und Zielgruppe kann es ein Compliance-Risiko nach BFSG/EAA darstellen.

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

2.4 WCAG 2.2: Fokus-Sichtbarkeit (wichtiger als viele denken)

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 08.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 Abmahn-/Klage-Risiko sein.

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) So testen Sie Kontrast in der Praxis

Automatisiert

Tipp: Probieren Sie 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;
}

Fazit

Raten Sie nicht bei der Compliance. Fehlender Kontrast ist der am einfachsten zu behebende Fehler, bietet aber den höchsten ROI für Usability und Rechtssicherheit.

Prüfen Sie Ihre Markenfarben noch heute. Stellen Sie sicher, dass Ihre Primärpalette die 4,5:1 Hürde nimmt, und sichern Sie Ihre digitale Zukunft.

FAQs

Weiterführende Links

• BFSG Übersicht (BMAS)
• WebAIM Million Report 2025
• WCAG 2.1 Kontrast (Minimum)
• Häufige Kontrastfehler
• Nutzung von Farbe
• Fokus-Erscheinungsbild (WCAG 2.2)
• Nicht-Text-Kontrast
• ADA Web Rule 2024 (USA)
• Wirtschaftlicher Nutzen (Business Case)
• SEO & Barrierefreiheit: Google Lighthouse Accessibility
• BFSG Bußgelder & Fristen