Farben sind nicht nur Gestaltungselement, sondern haben direkten Einfluss darauf, ob eine Website als zugänglich gilt oder nicht. Gerade beim Thema Barrierefreiheit stehen Designer:innen und Entwickler:innen vor der Herausforderung, kreative Ansprüche mit gesetzlichen Vorgaben in Einklang zu bringen. Die wichtigste Kennzahl dafür ist das Kontrastverhältnis zwischen Vorder- und Hintergrundfarben.
Die Web Content Accessibility Guidelines (WCAG 2.1) definieren internationale Standards für digitale Barrierefreiheit. In Deutschland werden diese Standards zum einen über die BITV 2.0 für öffentliche Stellen verbindlich gemacht, zum anderen über das Barrierefreiheitsstärkungsgesetz (BFSG), das seit Juni 2025 viele Unternehmen mit digitalen Produkten und Dienstleistungen zur Barrierefreiheit verpflichtet.
| Text/Element | AA (WCAG + BITV) | AAA (WCAG) |
|---|---|---|
| Normaler Text: kleiner als 18 pt / 14 pt fett bzw. 24px / 19px fett * | min. 4.5 : 1 | min. 7 : 1 |
| Große Schrift: größergleich 18 pt / 14 pt fett bzw. 24px / 19px fett * | min. 3 : 1 | min. 4.5 : 1 |
| UI-Elemente, Icons, Bedienelemente | min. 3 : 1 | min. 3 : 1 |
* Hinweis: Umrechnung 1 pt ≈ 1,33 px (bei 96 ppi)
Pflicht oder Kür?
Barrierefreiheit nach WCAG, BITV & BFSG
In Deutschland gilt zumeist die WCAG 2.1 in der Konformitätsstufe AA als Maßstab für Barrierefreiheit im Web. Die rechtliche Umsetzung erfolgt über zwei verschiedene Regelwerke:
- Die BITV 2.0 verpflichtet vor allem öffentliche Stellen (Bund, Länder, Kommunen) zur barrierefreien Gestaltung ihrer Websites und mobilen Anwendungen.
- Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 und verpflichtet viele Unternehmen, die digitale Produkte und Dienstleistungen für Verbraucher:innen anbieten (z. B. Online-Shops, Apps, E-Books), zur Einhaltung der Barrierefreiheitsanforderungen.
Für andere Anbieter, etwa kleine Unternehmen oder Selbstständige außerhalb des BFSG-Anwendungsbereichs, besteht zwar keine generelle rechtliche Pflicht. Dennoch wird eine barrierearme Gestaltung zunehmend als Qualitätsmerkmal und Wettbewerbsvorteil verstanden.
Was fordert das BFSG konkret?
Zu den typischen Anforderungen zählen:
- Ausreichende Farbkontraste (z. B. Texte vor Hintergrundfarben)
- Alternativtexte für Bilder, Untertitel für Videos
- Tastaturbedienbarkeit, sichtbarer Fokuszustand
- Inhalte, die bei Zoom (bis 200 %) ohne Informationsverlust nutzbar bleiben
- Klickflächen und Interaktionen, die auch mit Assistenztechnologie nutzbar sind
- logische Überschriftenstruktur, sprechende Linktexte, überspringbare Inhalte usw.
Ob die eigene Seite tatsächlich betroffen ist, lässt sich z. B. mit dem Check von e-recht24 prüfen: https://www.e-recht24.de/barrierefreiheit.html
Best Practices
Kontraste frühzeitig im Designprozess prüfen, nicht erst nach dem Launch.
Primär- und Sekundärfarben so auswählen, dass sie in den gängigen Text-auf-Hintergrund-Kombinationen die Mindestwerte erfüllen.
Große Textgrößen gezielt einsetzen, wenn Designfarben für normalen Fließtext zu schwach kontrastieren.
Nicht nur Farben nutzen: Wichtige Informationen zusätzlich mit Symbolen, Mustern oder Schriftarten kennzeichnen.
AAA ist in der BITV nicht verpflichtend, sondern nur als Best-Practice empfohlen.
Interesse an barrierefreiem Design?
Farbkontraste sind nur der Anfang. Dieser Artikel hat Ihnen gezeigt, wie wichtig korrekte Farbkontraste für Barrierefreiheit sind. Doch es gibt noch viele weitere Aspekte: von klarer Navigation bis hin zu rechtlichen Anforderungen. Gerne unterstütze ich Sie dabei, Ihre Website barrierearm und zukunftssicher zu gestalten.