Farbkontrast nach WCAG: Anforderungen und richtige Prüfung

Zu schwacher Farbkontrast ist eine der häufigsten – und zugleich am leichtesten behebbaren – Barrieren. Text, der zu hell auf seinem Hintergrund steht, ist für Menschen mit Sehbeeinträchtigung, mit einer Farbsehschwäche oder schlicht bei Sonnenlicht auf dem Bildschirm schwer bis gar nicht lesbar. Die WCAG legen dafür konkrete, messbare Schwellen fest. Dieser Artikel erklärt die Anforderungen, was als „großer Text” gilt, welche Ausnahmen es gibt und wie du Kontrast richtig prüfst.

Was Farbkontrast bedeutet – und warum er zählt

Kontrast ist der Helligkeitsunterschied zwischen Vordergrund (Text) und Hintergrund, ausgedrückt als Verhältnis von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto besser lesbar.

Betroffen sind viele Nutzer: Menschen mit Sehbeeinträchtigung, mit Farbsehschwächen, ältere Augen – und letztlich alle, die ein Gerät bei hellem Umgebungslicht nutzen. Weil Kontrast rechnerisch eindeutig bestimmbar ist, gehört er zu den wenigen Punkten, die automatisierte Werkzeuge zuverlässig prüfen können – mehr dazu in Automatisierte WCAG-Tests

Die WCAG-Anforderungen im Detail

Maßgeblich für das BFSG ist Stufe AA (siehe WCAG-Konformitätsstufen). Sie verlangt:

• Normaler Text: mindestens 4,5:1.
• Großer Text: mindestens 3:1.
• Nicht-Text-Kontraste: mindestens 3:1 für Bedienelemente und bedeutungstragende Grafiken – also etwa Rahmen von Eingabefeldern, Icons, Fokusanzeigen oder die unterscheidenden Farben in einem Diagramm (WCAG 1.4.11).

Die höhere Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text – sie ist, wie generell, keine flächendeckende Pflicht, aber an einzelnen Stellen anstrebenswert.

Was als „großer Text” zählt

Die Grenze ist klar definiert: Als großer Text gilt Text ab 18 Punkt (etwa 24 Pixel) oder ab 14 Punkt fett (etwa 19 Pixel fett). Alles darunter zählt als normaler Text – dann gilt der strengere Wert von 4,5:1.

Ausnahmen

Nicht alles unterliegt den Kontrastanforderungen:

• Logos und Markennamen in ihrer gestalteten Form.
• Rein dekorative Texte und Elemente ohne Informationsgehalt.
• Inaktive (deaktivierte) Bedienelemente.
• Beiläufiger Text, der Teil eines Bildes, aber nicht der eigentliche Inhalt ist.

Kontrast richtig prüfen

Zum Prüfen genügt ein Kontrast-Checker – etwa unser Kontrast-Checker: Du gibst die Farbwerte von Vorder- und Hintergrund ein und erhältst das Verhältnis. Viele Werkzeuge und auch die Entwicklertools im Browser zeigen den Wert direkt an. Da Kontrast eindeutig berechenbar ist, ist das die Paradedisziplin automatisierter Tests.

Manuell prüfen musst du dort, wo der Hintergrund nicht einheitlich ist: Text über Farbverläufen oder Bildern, bei dem der Kontrast über die Fläche schwankt, Text mit Transparenz sowie Hover- und Fokus-Zustände. Für solche Fälle reicht der reine Rechenwert nicht.

Häufige Kontrast-Fehler

Ein paar Muster tauchen immer wieder auf:

• Hellgrauer Fließtext auf Weiß – wirkt „elegant”, scheitert aber an der Lesbarkeit.
• Warme oder helle Akzentfarben (Orange, Gelb, helles Grün) für kleinen Text. Solche Farben gehören als Flächen oder auf große Elemente, nicht in kleine Schrift.
• Zu helle Platzhaltertexte in Formularfeldern.
• Text über unruhigen Hintergrundbildern ohne abdunkelnde Ebene.
• Weiße Schrift auf hell gefärbten Schaltflächen.