Kontrast-Checker: Farbkontraste nach WCAG prüfen

Hellgraue Schrift auf weißem Hintergrund kann im Entwurf elegant wirken. Unter ungünstigen Lichtbedingungen wird sie jedoch schnell unlesbar. Auch Displays mit geringer Qualität oder eingeschränktes Sehvermögen verschärfen das Problem. Ob eine Farbkombination ausreichend kontrastreich ist, lässt sich nicht zuverlässig schätzen. Der Wert muss berechnet werden.

Nach Eingabe von Text- und Hintergrundfarbe ermittelt der Kontrast-Checker das genaue Kontrastverhältnis. Zusätzlich zeigt er die Ergebnisse für die relevanten WCAG-Prüfstufen. Eine Vorschau macht sichtbar, wie die Farbkombination in realer Schrift wirkt.

Diese Kontrastwerte gelten

Anwendung	Stufe AA	Stufe AAA
Normaler Text	4,5:1	7:1
Große Schrift	3:1	4,5:1
Bedienelemente und informative Grafiken	3:1	–

Stufe AA ist der verbreitete Zielwert für barrierefreie Websites. Stufe AAA stellt deutlich strengere Anforderungen. Eine vollständige Umsetzung ist deshalb nicht in jedem Designkontext realistisch.

Als große Schrift gelten mindestens 18 Punkt oder 14 Punkt bei Fettschrift. Im Web entsprechen diese Werte ungefähr 24 beziehungsweise 18,7 CSS-Pixeln. Sehr dünne oder ungewöhnliche Schriftarten können trotz ausreichender Größe schlechter lesbar bleiben. Die niedrigere Anforderung für große Schrift hat einen einfachen Grund. Größere und breitere Buchstabenformen bleiben auch bei geringerem Kontrast besser erkennbar.

Bedienelemente und Grafiken benötigen mindestens 3:1 Kontrast zu angrenzenden Farben. Dazu gehören beispielsweise Eingabefelder, Icons, Fokusmarkierungen und relevante Diagrammlinien. Die Anforderung gilt nur für visuelle Bestandteile, die für Bedienung oder Verständnis erforderlich sind. Logos, dekorative Grafiken und inaktive Bedienelemente sind ausgenommen.

Was das Kontrastverhältnis tatsächlich misst

Das Kontrastverhältnis vergleicht die relative Helligkeit zweier Farben. Schwarz auf Weiß erreicht den Höchstwert von 21:1. Zwei identische Farben ergeben 1:1. Die Berechnung basiert auf den Rot-, Grün- und Blauwerten der Farben. Daraus wird zunächst die relative Leuchtdichte ermittelt. Anschließend werden beide Leuchtdichten miteinander verglichen.

Die Reihenfolge der Farben verändert den berechneten Wert nicht. Schwarze Schrift auf gelbem Hintergrund besitzt denselben Kontrast wie gelbe Schrift auf schwarzem Hintergrund.

Die optische Wirkung kann sich trotzdem deutlich unterscheiden. Schriftgröße, Schriftstärke und Hintergrundgestaltung beeinflussen die tatsächliche Lesbarkeit. Die Vorschau ergänzt deshalb die reine Zahlenprüfung.

Der Kontrastwert bewertet hauptsächlich Helligkeitsunterschiede. Er prüft nicht, ob Informationen ausschließlich über Farben vermittelt werden. Eine rote und eine grüne Markierung können jeweils genügend Hintergrundkontrast besitzen. Als alleinige Kennzeichnung bleiben sie für Menschen mit Farbsehschwächen dennoch problematisch.

Fehlermeldungen benötigen deshalb neben einer Farbe auch Text, ein Symbol oder eine andere erkennbare Kennzeichnung. Farbe allein sollte keine wichtige Information transportieren.

Wo Farbkontraste häufig scheitern

• Platzhaltertexte in Formularen. Hellgraue Hinweise wie „E-Mail-Adresse“ unterschreiten häufig den erforderlichen Wert von 4,5:1. Platzhalter sollten wie normaler Text geprüft werden.
• Weiße Schrift auf Fotos. Der Kontrast verändert sich mit jedem Bildbereich. Eine halbtransparente, abdunkelnde Ebene sorgt meist zuverlässiger für ausreichende Lesbarkeit.
• Helle Markenfarben. Gelb, Orange oder helle Grüntöne funktionieren häufig gut als Fläche. Als Farbe für kleinen Text oder Links sind sie oft ungeeignet. Eine dunklere Abstufung der Markenfarbe löst das Problem meist ohne grundlegende Änderung des Corporate Designs.
• Interaktive Zustände. Normalzustände wie z.B. bei Links und Buttons werden häufig geprüft, Hover-, Aktiv- und Fokuszustände dagegen übersehen. Jeder relevante Zustand benötigt eine erkennbare Darstellung. Für inaktive Bedienelemente besteht eine WCAG-Ausnahme. Aus Gründen der Benutzerfreundlichkeit sollte der deaktivierte Zustand trotzdem verständlich bleiben.
• Kleine Texte in Fußzeilen. Fußzeilen enthalten oft kleine, graue Schrift auf dunklem Hintergrund. Auch Impressum, Datenschutzlinks und rechtliche Hinweise müssen lesbar bleiben.

Für wen gelten die Anforderungen?

Öffentliche Stellen unterliegen in Deutschland bereits seit mehreren Jahren gesetzlichen Anforderungen an digitale Barrierefreiheit. Seit dem 28. Juni 2025 gilt zusätzlich das Barrierefreiheitsstärkungsgesetz (BFSG), welche die europäische Richtlinie 2019/882 in deutsches Recht umsetzt.

Erfasst werden bestimmte Produkte und Dienstleistungen für Verbraucher. Dazu gehören unter anderem Dienstleistungen im elektronischen Geschäftsverkehr, Bankdienstleistungen, Telekommunikation, E-Books und bestimmte Personenbeförderungsdienste. Auch viele Online-Shops fallen unter den elektronischen Geschäftsverkehr.

Für Dienstleistungen besteht eine Ausnahme für Kleinstunternehmen. Als Kleinstunternehmen gelten Betriebe mit weniger als zehn Beschäftigten. Zusätzlich darf der Jahresumsatz oder die Jahresbilanzsumme höchstens zwei Millionen Euro betragen. Die Ausnahme gilt nicht automatisch für alle Produkte. Kleinstunternehmen können weiterhin betroffen sein, wenn sie bestimmte erfasste Produkte in Verkehr bringen.

Reine Informationsseiten ohne erfasste Verbraucherdienstleistung fallen nicht allein aufgrund ihrer Website unter das BFSG. Entscheidend sind das konkrete Angebot und der Zweck der Website.

Für die technische Umsetzung dienen derzeit die EN 301 549 und die WCAG als zentrale Orientierung. Die geltende EN 301 549 verweist bei Websites auf Kriterien der WCAG 2.1. Eine überarbeitete Fassung soll künftig die WCAG 2.2 berücksichtigen. Solange neue harmonisierte Normen noch nicht veröffentlicht wurden, bleiben die geltende EN 301 549 und die WCAG wichtige praktische Maßstäbe. (Stand: August 2026.)

Diese Einordnung ersetzt keine Rechtsberatung. Ob ein konkretes Angebot unter das BFSG fällt, hängt vom jeweiligen Einzelfall ab.

Ausreichende Kontraste sind jedoch unabhängig von gesetzlichen Pflichten sinnvoll. Sie verursachen kaum Zusatzaufwand, wenn sie früh im Designprozess berücksichtigt werden. Davon profitieren nicht nur Menschen mit Sehbehinderungen. Gute Kontraste verbessern die Lesbarkeit auch bei Sonnenlicht, mobilen Geräten und ungünstigen Displays.