Farbkontraste auf Websites
von Christian Röckl
Die Schonfrist ist abgelaufen. Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) verbindlich – auch für viele Unternehmenswebsites. Wer seitdem nichts unternommen hat, bewegt sich in einer rechtlichen Grauzone. Doch beim Thema Farbkontraste geht es nicht nur um Paragraphen. Es geht darum, ob Ihre Inhalte überhaupt gelesen werden können.
Was der Kontrastwert aussagt – und warum er wichtig ist
Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Textfarbe und Hintergrund. Gemessen wird er als Verhältnis, zum Beispiel 4,5:1. Je höher der Wert, desto besser lesbar ist der Text.
Die WCAG 2.1 – das internationale Regelwerk für Barrierefreiheit im Web, auf das das BFSG verweist – definiert zwei Stufen: Stufe AA verlangt für normalen Text mindestens 4,5:1, für großen Text mindestens 3:1. Stufe AAA geht noch weiter, ist für die meisten Websites aber nicht verpflichtend.
Klingt technisch. Ist es auch. Aber die Konsequenz ist simpel: Hellgrau (#999999) auf Weiß (#ffffff) erreicht nur etwa 2,85:1. Das reicht nicht. Für Menschen mit Sehschwäche, älteren Nutzern oder wer das Smartphone in der Sonne hält, ist dieser Text schlicht nicht lesbar.
Hellgrau auf Weiß: Ein Designtrend mit Nebenwirkungen
Das minimalistische Design der letzten Jahre hat viel Gutes gebracht – klare Strukturen, weniger visuelle Überladung. Aber es hat auch einen Irrglauben befördert: dass zurückhaltende Farben automatisch elegant wirken.
Das Ergebnis sind Websites mit hellgrauen Fließtexten, blassen Platzhaltertexten in Formularen und kaum sichtbaren Links. Sieht im Designprogramm auf dem kalibrierten Bildschirm des Designers gut aus. In der Realität – auf günstigen Monitoren, Smartphones oder bei schlechten Lichtverhältnissen – versagt es.
Barrierefreiheit korrigiert hier keinen Sonderfall. Sie setzt einen Standard, der für alle Nutzer besser ist.
Welche Elemente auf Ihrer Website betroffen sind
Kontrastvorgaben gelten nicht nur für den Fließtext. Betroffen sind alle Textelemente, die Informationen transportieren:
- Überschriften, Fließtext, Bildunterschriften
- Texte in Buttons und Formularen
- Linktexte (auch im nicht-unterstrichenen Zustand)
- Platzhaltertexte in Eingabefeldern
- Texte auf Bildern oder farbigen Hintergründen
Dekoratives, rein visuelles Element ohne Informationswert ist ausgenommen – aber diese Ausnahme ist eng gefasst. Im Zweifel gilt: Kontrast prüfen.
Kontrast prüfen: So geht es
Der einfachste Einstieg ist ein kostenloses Online-Tool. Der WebAIM Contrast Checker (webaim.org/resources/contrastchecker) erlaubt es, zwei Hex-Farbwerte einzugeben und zeigt sofort, ob WCAG AA oder AAA erreicht wird.
Wer systematischer vorgehen will, nutzt die Entwicklerkonsole im Browser (F12 → Accessibility-Tab in Chrome oder Firefox) oder Tools wie Lighthouse, das Google direkt in Chrome integriert hat. Beide liefern eine Liste aller Kontrastverstöße auf der aktuellen Seite.
Ein vollständiges Audit ergibt sich daraus allerdings nicht – dafür braucht es eine strukturierte Überprüfung aller Seiten und Zustände, auch Hover- und Fokus-Zustände von interaktiven Elementen.
Meine Einschätzung
Die Realität sieht so aus: Die meisten Webseitenbetreiber ignorieren das Thema. Das merke ich auch an den Anfragen. Barrierefreiheit taucht selten als Anforderung auf, Kontraste so gut wie nie. Das BFSG hat daran bisher wenig geändert.
Das wird sich ändern, sobald die ersten Abmahnungen kommen. Dann wird das Thema plötzlich dringend, und die Umsetzung unter Zeitdruck teurer als nötig. Das dachte ich zwar auch bei der Einführung der DSGVO, aber die Realität ist eine andere.
Wer jetzt prüft, hat die Wahl: Entweder passt man ein paar Farbwerte an und ist fertig. Oder man stellt fest, dass das Corporate Design grundsätzlich überarbeitet werden muss
