Hellgrauer Text auf weißem Hintergrund kann auf den ersten Blick elegant und minimalistisch wirken – und für Benutzer mit Sehbehinderungen, starkem Sonnenlicht auf dem Bildschirm oder einfach nur normaler Augenbelastung am Ende eines Arbeitstages völlig unlesbar sein. Der Farbkontrast ist eines der „technischsten“ Kriterien für Barrierefreiheit – es gibt genaue Zahlen, die eingehalten werden müssen –, aber er lässt sich auch am einfachsten im Voraus testen und beheben.

Kurz gesagt – was dieser Leitfaden behandelt

  1. Welche Verhältnisse erfordert die WCAG?
  2. Warum großer Text weniger Kontrast haben darf
  3. So überprüfen Sie ein Kontrastverhältnis in der Praxis
  4. So wählen Sie im Voraus eine zugängliche Farbpalette aus

Welche Verhältnisse WCAG erfordert

WCAG beschreibt Kontrastverhältnisse von 1:1 bis 21:1. Für normalen Text fordert Erfolgskriterium 1.4.3 auf Stufe AA mindestens 4,5:1 zum Hintergrund; Stufe AAA fordert 7:1. Ausnahmen gelten unter anderem für großen Text und bestimmte dekorative oder inaktive Inhalte. Welche rechtlichen Pflichten gelten, hängt vom jeweiligen Anwendungsbereich ab.

Warum bei großem Text weniger Kontrast zulässig ist

Großer Text bleibt auch bei geringerem Kontrast lesbar, daher legt WCAG einen einfacheren Schwellenwert fest: 3:1 auf Stufe AA (statt 4,5:1) und 4,5:1 auf Stufe AAA (statt 7:1). „Großer Text“ ist als Text definiert, der 18 Punkt oder größer (ca. 24 Pixel) ist, bzw. 14 Punkt oder größer (ca. 18,7 Pixel), wenn er fett gedruckt ist. Große Überschriften können beispielsweise einen etwas geringeren Kontrast als ein normaler Hauptabsatz „leisten“ und dennoch die Anforderung erfüllen.

Anschauliches Diagramm Kontrastverhältnisse vergleichen Drei Text-auf-Hintergrund-Beispiele mit unterschiedlichen Kontrastverhältnissen Kontrastverhältnis zwischen Text und Hintergrund Beispieltext 1,8:1 – ✕ schlägt fehl Beispieltext 7,1:1 – ✓ erfüllt auch AAA Beispieltext 5.4:1 – ✓ erfüllt Stufe AA Normaler Text: mindestens 4,5:1 · Großer Text (24 Pixel+ oder 18,7 Pixel fett): mindestens 3:1 Tools wie der WebAIM Contrast Checker liefern Ihnen das genaue Verhältnis, bevor Sie eine Farbpalette finalisieren
Drei Beispiele für Text auf Hintergrund: Ein zu niedriges Verhältnis (1,8:1) führt zum Scheitern der Grundstufe; Die anderen beiden Verhältnisse erfüllen die AA- bzw. AAA-Anforderungen.

So überprüfen Sie ein Kontrastverhältnis in der Praxis

Sie müssen es nicht manuell berechnen – mit kostenlosen Tools wie dem WebAIM Contrast Checker können Sie die Text- und Hintergrundfarbcodes eingeben und erhalten sofort das genaue Verhältnis und eine Pass/Fail-Bewertung für jedes Level. Es lohnt sich, nicht nur Text auf einem einfarbigen Hintergrund zu überprüfen, sondern auch Text über Hintergrundbildern oder Farbverläufen – da der Kontrast zwischen verschiedenen Bereichen desselben Bildes variieren kann, ist es am besten, die „problematischste“ Stelle zu testen.

💡 Praxistipp

WCAG 1.4.11 verlangt für visuelle Informationen, die zur Erkennung von Bedienelementen und ihren Zuständen nötig sind, grundsätzlich 3:1 zu angrenzenden Farben. Das betrifft nicht automatisch jede Schaltflächenumrandung; dekorative oder nicht erforderliche Grenzen sind anders zu beurteilen.

So wählen Sie im Voraus eine zugängliche Farbpalette aus

Der effizienteste Ansatz besteht darin, den Kontrast bereits in der Entwurfsphase der Vorlage zu prüfen, nicht in jedem Dokument einzeln. Bei der Auswahl von Markenfarben für Überschriften, Textkörper und Links lohnt es sich, vorab zu bestätigen, dass jede tatsächlich verwendete Text-Hintergrund-Kombination mindestens 4,5:1 erfüllt. Auf diese Weise „erbt“ jedes neue Dokument, das aus der Vorlage erstellt wird, automatisch den richtigen Kontrast, anstatt jedes Dokument einzeln zu prüfen, nachdem es bereits geschrieben wurde.

Website-Demo ausprobieren

Der Test auf dieser Website ist derzeit eine Simulation mit Beispieldaten. Er führt keine echte Prüfung Ihrer URL oder PDF-Dateien durch. Die Anbindung an die reale Prüfengine ist geplant.

Zur Demo