Farben machen eine Website lebendig – sie wecken Emotionen, steuern die Aufmerksamkeit und tragen zur Markenidentität bei. Doch was passiert, wenn diese Farben nicht zugänglich sind? Ab dem 28. Juni 2025 macht das Barrierefreiheitsstärkungsgesetz (BFSG) ausreichende Farbkontraste zur Pflicht. Erfahren Sie, wie Sie optimale Kontraste schaffen, welche Herausforderungen es gibt und warum Barrierefreiheit die Nutzererfahrung verbessert.
Wollen Sie Ihre komplette Website ganz einfach auf Barrierefreiheit testen lassen? Dann nutzen Sie doch das kostenlose Tool von WebAim.
Warum sind Farbkontraste so wichtig?
Ausreichende Kontraste machen Inhalte für alle Nutzer sichtbar und lesbar – egal, ob sie eine Sehbehinderung, Farbfehlsichtigkeit oder altersbedingte Einschränkungen haben. Doch oft ist genau das der Knackpunkt: Ein zu geringer Kontrast macht Texte schwer erkennbar, während ein zu extrem hoher Kontrast das Auge ermüden kann. Tendenziell kann man aber sagen: Je höher der Kontrast, desto besser ist der Text lesbar.
Das Barrierefreiheitsstärkungsgesetz (BFSG) stützt sich hinsichtlich der Farbkontraste auf die WCAG (Web Content Accessibility Guidelines). Diese geben klare Vorgaben zu Kontrasten:
- Text zum Hintergrund: Texte sollten zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 besitzen. Für größere Texte mit einer Schriftgröße ab 24 Pixel ist ein Kontrastverhältnis von 3:1 ausreichend. Dies gilt auch für Texte ab einer Schriftgröße von 18 Pixel, wenn sie zusätzlich gefettet sind.
- Grafiken, grafische Elemente, Icons, Eingabefelder oder Diagramme: Hier sollte ein Kontrastverhältnis von mindestens 3:1 gelten.
Die Herausforderungen bei der Arbeit mit Farben
- Corporate Design vs. Barrierefreiheit
Oftmals stehen Markenfarben im Widerspruch zu den Anforderungen der Barrierefreiheit. Ein heller Pastellton kann zwar ästhetisch sein, erfüllt aber möglicherweise nicht das notwendige Kontrastverhältnis. Hier gilt es, Farben gezielt anzupassen, ohne die Markenidentität zu verlieren. Steht ein Rebranding an, sollte bei der Farbauswahl direkt von Anfang auf ausreichende Farbkontraste geachtet werden. - Unterschiedliche Farbwahrnehmung berücksichtigen
Nicht alle Menschen sehen Farben gleich. Etwa 8 % der Männer und 0,5 % der Frauen sind von Farbfehlsichtigkeit betroffen. Das bedeutet, dass bestimmte Farbkombinationen – wie Rot und Grün – für diese Nutzer schwer unterscheidbar sind. Neben Farbfehlsichtigkeit gibt es auch altersbedingte Einschränkungen. Mit dem Alter nimmt die Fähigkeit ab, feine Farbdifferenzen zu erkennen, insbesondere bei ähnlichen Helligkeiten. - Unterschiedliche Geräte und Displays
Farben können je nach Gerät, Bildschirmtyp und Farbeinstellungen (z. B. sRGB, P3, HDR) unterschiedlich dargestellt werden. Ein Design, das auf einem modernen Monitor gut aussieht, könnte auf einem älteren Gerät problematisch sein. Ausreichende Kontraste verhindern dieses Problem. - Wechselnde Inhalte
Farbkontraste müssen auch bei dynamischen und interaktiven Elementen einer Website stimmen. Beispielsweise können Hover-, Focus- oder Klick-Zustände von Buttons zu Problemen führen, wenn sich der Kontrast durch eine Änderung des Hintergrunds oder der Textfarbe verringert. Ähnlich verhält es sich mit Fehlermeldungen oder Warnhinweisen, die oft allein durch Farbe signalisiert werden. Ist der Kontrast nicht ausreichend oder fehlen zusätzliche Hinweise wie erklärender Text, können wichtige Informationen verloren gehen. Auch Pop-ups und Overlays sollten so gestaltet sein, dass ihre Kontrastverhältnisse in jeder Situation barrierefrei bleiben. - Prüfung und Umsetzung
Selbst für erfahrene Webdesigner ist es oft eine Herausforderung, den Überblick über alle Kontrastverhältnisse auf einer Website zu behalten. Automatisierte Tests helfen, sind jedoch kein Ersatz für manuelle Prüfungen.
Wie Sie Kontrastprobleme lösen
- Tools nutzen: Kostenlose Tools wie der Contrast Checker von WebAIM helfen, Kontrastverhältnisse schnell zu analysieren.
- Farbschemen optimieren: Erstellen Sie alternative Farbvarianten, die sowohl barrierefrei als auch markenkonform sind.
- Testen, Testen, Testen: Nutzen Sie Tools, die Ihre Website aus der Perspektive von Nutzer mit Sehbeeinträchtigungen anzeigen, und testen Sie reale Szenarien.
Unser Tipp
Um den Überblick der Kontrastverhältnisse aller Farben zu behalten, empfehlen wir das Tool Contrast Grid von EightShapes.
Nutzen Sie die linke Spalte, um die Hex-Codes Ihrer Farben einzutragen. Anschließend sehen Sie im Farbraster jede mögliche Kombination Ihrer Farben, einschließlich des Kontrastverhältnisses und der Einordnung in die Konformitätsstufen des WCAG.
Warum jetzt handeln?
Das BFSG 2025 wird viele Unternehmen vor Herausforderungen stellen, da die Anforderungen nicht nur für öffentliche Stellen, sondern auch für viele privatwirtschaftliche Unternehmen gelten. Wer jetzt schon handelt, spart sich spätere Umstellungen und zeigt Verantwortung für alle Nutzer. Eine barrierefreie Website ist dann nicht nur gesetzliche Pflicht, sondern auch ein Wettbewerbsvorteil – sie erreicht mehr Menschen und schafft eine positive Nutzererfahrung.
Fazit: Farbkontraste mit Mehrwert schaffen
Die richtigen Kontraste zu wählen, bedeutet weit mehr als nur gesetzliche Anforderungen zu erfüllen. Es geht darum, Ihre Website für alle zugänglich zu machen und gleichzeitig ein positives Nutzererlebnis zu bieten.