Farbkontraste im Web: So vermeidest du die häufigste Barriere

Farbkontraste sind das häufigste Accessibility-Problem im Web. Laut der WebAIM Million-Studie erfüllen 83,6 % aller getesteten Startseiten diese Grundvoraussetzung für barrierefreie Inhalte nicht. Dabei ist die Lösung oft nur einen CSS-Befehl entfernt – sobald man die Richtlinien versteht.

Was die WCAG zu Farbkontrasten vorschreibt

Die Web Content Accessibility Guidelines (WCAG) 2.2 definieren klare Vorgaben für Farbkontraste in zwei Erfolgsstufen:

Mindestanforderungen (Level AA)

• Normalschrift (unter 18pt oder unter 14pt fett): mindestens 4,5:1 Kontrastverhältnis
• Große Schrift (18pt oder größer, bzw. 14pt fett): mindestens 3:1
• UI-Elemente und Grafiken: mindestens 3:1

Erhöhte Anforderungen (Level AAA)

• Normalschrift: 7:1
• Große Schrift: 4,5:1

Das Kontrastverhältnis wird nach folgender Formel berechnet:

(L1 + 0,05) / (L2 + 0,05)

Dabei steht L1 für die relative Helligkeit der helleren Farbe und L2 für die dunklere. Die relative Helligkeit berücksichtigt, wie das menschliche Auge verschiedene Farben wahrnimmt – nicht nur die reine Helligkeit.

Die Mathematik hinter der Helligkeitsberechnung

Die relative Helligkeit ist komplexer als nur die Messung von RGB-Werten. Sie berücksichtigt die sRGB-Transferfunktion, die die nichtlineare Wahrnehmung des Auges abbildet. Hier ein Beispiel in JavaScript:

function relativeLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    const sRGB = c / 255;
    return sRGB <= 0.04045 
      ? sRGB / 12.92 
      : Math.pow((sRGB + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function contrastRatio(hex1, hex2) {
  const lum1 = relativeLuminance(...hexToRgb(hex1));
  const lum2 = relativeLuminance(...hexToRgb(hex2));
  const [lighter, darker] = lum1 > lum2 ? [lum1, lum2] : [lum2, lum1];
  return (lighter + 0.05) / (darker + 0.05);
}

Typische Fallstricke und wie man sie umgeht

Grauer Text auf weißem Hintergrund

Die Farbe #767676 auf weißem Hintergrund erreicht genau 4,54:1 – knapp bestanden. Bei #757575 scheitert der Kontrast jedoch. Für sichere Normalschrift empfehlen sich Werte ab #595959 oder dunkler.

• Problem: Zu helle Grautöne wirken elegant, verstoßen aber gegen WCAG.
• Lösung: Dunkle Grautöne oder klare Schwarz-Weiß-Kombinationen verwenden.

Blaue Links auf dunklen Hintergründen

Viele Designsysteme setzen auf ein markantes Blau (#0066CC) für Links. Auf einem dunklen Navy-Hintergrund (#003366) beträgt der Kontrast jedoch nur 2,6:1 – und damit deutlich zu wenig.

• Problem: Markenfarben verlieren ihre Wirkung, wenn sie nicht lesbar sind.
• Lösung: Helle Hintergründe oder dunklere Linkfarben wählen.

Platzhaltertexte in Formularen

Platzhaltertexte gelten als Normalschrift und müssen ebenfalls den Kontrastanforderungen entsprechen. Der typische hellgraue Platzhalter (#B0B0B0 auf #FFFFFF) erzielt nur 2,5:1 – und scheitert klar.

• Problem: Formulare werden unleserlich, wenn Benutzer auf Platzhalter angewiesen sind.
• Lösung: Dunklere Platzhalterfarben wie #767676 verwenden oder den Kontrast durch CSS anpassen:

/* ❌ Scheitert an WCAG */
input::placeholder {
  color: #B0B0B0;
}

/* ✅ Erfüllt WCAG AA */
input::placeholder {
  color: #767676;
}

Deaktivierte Steuerelemente

Deaktivierte Elemente müssen nicht den Kontrastanforderungen entsprechen – vorausgesetzt, sie sind tatsächlich deaktiviert und nicht nur optisch so gestaltet. Eine visuelle Darstellung als deaktiviert ohne entsprechende Semantik verstößt gegen die Richtlinien.

Knifflige Sonderfälle

Texte über Verläufen

Bei Texten auf Farbverläufen muss der Kontrast an der dunkelsten Stelle des Verlaufs gemessen werden. Liegt diese unter dem geforderten Minimum, scheitert der Test.

Texte über Bildern

Hintergrundbilder variieren je nach Bildschirm, Browser und Ladezustand. Die sicherste Lösung: Eine halbtransparente Überlagerung oder ein textbasierter Schatten.

.hero-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  /* ODER */
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5em 1em;
}

Fokusindikatoren

Seit WCAG 2.2 gilt die Anforderung 2.4.11 (Focus Appearance): Fokusindikatoren müssen mindestens 3:1 Kontrast zu benachbarten Farben aufweisen. Dies stellt sicher, dass Tastaturnutzer die aktive Position erkennen können.

Automatisierte Prüfung und Optimierung

Manuelle Prüfungen aller Text-Hintergrund-Kombinationen sind zeitaufwendig und fehleranfällig. Tools wie AccessiScan scannen Seiten automatisch auf über 200 WCAG-2.2-Kriterien – inklusive Farbkontraste – und liefern priorisierte Reports mit konkreten Handlungsempfehlungen.

Beginne mit der Einhaltung von Level AA. Die meisten Anpassungen sind minimale CSS-Änderungen, die jedoch eine enorme Wirkung auf die Usability haben – nicht nur für Menschen mit Sehbeeinträchtigungen, sondern für alle Nutzer. Denn bessere Kontraste reduzieren Augenbelastung und verbessern die Lesbarkeit auf allen Geräten, ob unter direkter Sonne oder bei Nachtmodus.