Farbkontrast: WCAG-Richtlinien für barrierefreies Design

Farbkontrast ist eine der am häufigsten verletzten Barrierefreiheitsanforderungen im Web — und eine der am einfachsten zu behebenden. Schlechter Kontrast zwischen Text und Hintergrund macht Inhalte für Nutzer mit Sehbehinderungen, Farbenblindheit oder bei hellem Sonnenlicht unleserlich. WCAG 2.1 definiert präzise numerische Schwellenwerte für akzeptable Kontrastverhältnisse.

Dieser Leitfaden erklärt, wie Kontrastverhältnisse berechnet werden, was die WCAG-Stufen in der Praxis bedeuten, wo Kontrast in echten Designs am häufigsten scheitert und wie diese Fehler systematisch behoben werden.

Was ist das Farbkontrastverhältnis

Das Farbkontrastverhältnis ist ein numerisches Maß für den Unterschied in der wahrgenommenen Leuchtdichte zwischen zwei Farben — typischerweise Text und Hintergrund. Das Verhältnis reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß, maximaler Kontrast). Die Formel vergleicht die relative Luminanz der helleren Farbe (L1) mit der dunkleren (L2): Kontrast = (L1 + 0,05) / (L2 + 0,05). Ein Verhältnis von 4,5:1 bedeutet, dass die hellere Farbe 4,5 Mal so leuchtend ist wie die dunklere.

WCAG 2.1 Stufen (A/AA/AAA)

WCAG (Web Content Accessibility Guidelines) 2.1 definiert drei Konformitätsstufen. Stufe A ist das Minimum. Stufe AA ist der rechtliche und branchenübliche Standard in den meisten Ländern. Stufe AAA ist die höchste. Für Textkontrast: Normaler Text (unter 18pt oder unter 14pt fett) erfordert 4,5:1 für AA und 7:1 für AAA. Großer Text (18pt+ oder 14pt+ fett) erfordert 3:1 für AA und 4,5:1 für AAA. UI-Komponenten erfordern 3:1 für AA.

Wie Luminanz berechnet wird

Relative Luminanz wird aus linearisierten RGB-Werten berechnet. Die Formel berücksichtigt die nicht-lineare Reaktion des menschlichen Auges auf Licht. Zunächst wird jeder 8-Bit-Kanal in einen 0–1-Bereich umgerechnet, dann wird eine Gammakorrektur angewendet. Schließlich wird mit Wahrnehmungsgewichten kombiniert (Rot=0,2126, Grün=0,7152, Blau=0,0722). Der grüne Kanal trägt am meisten zur wahrgenommenen Helligkeit bei.

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

Häufige Kontrastfehler

Die häufigsten Kontrastfehler in echten Designs: hellgrauer Text auf weißem Hintergrund (gedämpfter/Platzhaltertext scheitert oft mit 2,5:1), Markenfarben mit mittlerer Sättigung als Text auf Weiß, farbige Textlinks ohne Unterstreichung auf farbigen Hintergründen, deaktivierte Zustände mit zu geringer visueller Differenz, Icon-only-UI-Elemente mit unzureichendem Kontrast. Dark-Mode-Designs führen oft zu neuen Fehlern: Die gleiche Markenfarbe, die auf hellem Hintergrund bestand, kann auf dunklem scheitern.

Kontrast in Dark/Light-Themes korrigieren

Beim Aufbau eines Dual-Theme-Designsystems ist es wichtig, den Kontrast in beiden Modi unabhängig zu testen. Dasselbe Hintergrund-Text-Paar, das im hellen Modus AA besteht, kann im dunklen scheitern, wenn man einfach den Farbton invertiert. Der praktische Ansatz: separate Farbskalen für jedes Theme definieren. Für die primäre Markenfarbe könnte im Dark Mode eine andere Helligkeitsstufe als im Light Mode nötig sein.

Tools und Automatisierung

Manuelle Prüfung beim Design reicht nicht aus — Kontrast kann sich ändern, wenn Nutzer benutzerdefinierte Themes anwenden oder wenn Komponenten in unerwarteten Kontexten erscheinen. Automatisierte Barrierefreiheits-Tools (axe, Lighthouse, Pa11y) können Kontrastfehler zur Build-Zeit erkennen. Das PixCode Color Contrast Tool akzeptiert zwei beliebige Farben und gibt Verhältnis, WCAG-Stufe und Verbesserungsvorschläge aus.

Häufig gestellte Fragen