Barrierefreies DesignBarrierefreies Design bezeichnet die Gestaltung von Inhalten, Oberflächen und Produkten, die für möglichst viele Menschen nutzbar sind, unabhängig von Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen. Im Englischen spricht man von Accessibility. Gemeint ist nicht nur eine Rücksicht auf eine kleine Gruppe, denn Barrieren entstehen auch situativ, etwa durch grelles Sonnenlicht auf dem Display, eine gebrochene Hand oder eine laute Umgebung.…
Weiterlesen: Barrierefreies Design ist längst keine Kür mehr. Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), und für viele digitale Angebote ist damit klar, dass Kontraste, Schriftgrößen und Bedienbarkeit Pflichtthemen sind. Der Beitrag erklärt, was das für Gestaltung bedeutet und welche Regeln der Standard WCAG konkret nennt.
Der rechtliche Rahmen: Was das BFSG verlangt
Das Gesetz betrifft Unternehmen, die Verbraucherinnen und Verbrauchern bestimmte Produkte und Dienstleistungen anbieten, etwa Online-Shops, Apps, Ticketsysteme oder Bankdienste. Ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme. Bei digitalen Angeboten verweisen die Anforderungen auf die harmonisierte europäische Norm EN 301 549 in der Fassung 3.2.1. Sie übernimmt für Webinhalte die Kriterien der Web Content Accessibility Guidelines (WCAG) 2.1 auf den Stufen A und AA. Die neuere WCAG 2.2 ist in dieser Fassung nicht als Maßstab verankert. Die Norm liegt seit September 2026 auch in der Fassung 4.1.1 vor, die WCAG 2.2 auf Stufe AA übernimmt. Diese Fassung ist aber noch nicht im Amtsblatt der EU zitiert (Stand Oktober 2026), eine Zitierung wird für etwa Ende November erwartet.
Bei Verstößen drohen laut IHK Köln Bußgelder bis zu 100.000 Euro, außerdem sind Abmahnungen durch Wettbewerber und Verbandsklagen möglich. Für Online-Shops gibt es keine Übergangsfrist. Welche Pflichten im Einzelfall gelten, hängt vom Angebot ab; dieser Beitrag ersetzt keine Rechtsberatung.
Kontraste nach WCAG: Die wichtigsten Werte
Die WCAG messen Kontrast als Verhältnis der relativen Helligkeit zweier Farben. Der Farbton spielt dabei keine Hauptrolle, deshalb hilft die Messung auch Menschen mit Farbsehschwäche. Auf Konformitätsstufe AA gelten folgende Mindestwerte:
- Normaler Text: mindestens 4,5 : 1
- Großer Text: mindestens 3 : 1. Als groß gelten 18 Punkt (etwa 24 Pixel) oder 14 Punkt fett (etwa 18,5 Pixel). Die WCAG rechnen dabei in CSS-Punkten (pt), nicht in Pixeln: Ein Punkt entspricht etwa 1,33 Pixeln.
- Bedienelemente und aussagekräftige Grafiken: mindestens 3 : 1 gegenüber der Umgebung, etwa Rahmen von Eingabefeldern oder Fokusindikatoren.
- Erweiterte Stufe AAA: 7 : 1 für normalen Text.
Keine Mindestkontraste gelten unter anderem für deaktivierte Elemente, reine Dekoration sowie Logos und Markennamen. Gerechnet wird ohne Runden: Ein Wert von 2,999 : 1 erfüllt die Anforderung von 3 : 1 nicht.
Die Beispiele zeigen, wie knapp es werden kann. Ein mittleres Grau (#767676) auf Weiß erreicht gerade 4,54 : 1, ein etwas helleres (#999999) mit 2,85 : 1 dagegen nicht. Weiße Schrift auf einem kräftigen Gelb erreicht nur 2,15 : 1, auf einem dunkleren Braunorange dagegen gut 5 : 1.
Praxis: Checkliste für barrierefreie Entwürfe
Farbe nie allein einsetzen. Nach WCAG 1.4.1 darf Farbe nicht das einzige Mittel sein, um Informationen zu vermitteln. Pflichtfelder in Rot brauchen zusätzlich ein Sternchen oder einen Hinweistext, Diagramme zusätzlich Muster oder Beschriftungen.
Kontraste früh prüfen. Die Palette sollte schon in der Markenentwicklung auf Kontrast getestet werden, nicht erst im fertigen Webdesign. Ein Markenorange, das auf Weiß nur knapp scheitert, lässt sich als Akzentfarbe oft in einer dunkleren Variante für Text nutzen.
Lesbare Typografie. Ausreichende Schriftgrößen, klare Zeilenabstände und eine Schrift mit gut unterscheidbaren Zeichen verbessern die Lesbarkeit für alle. Sehr dünne Schnitte auf farbigem Grund sind ein häufiger Stolperstein.
Sichtbare Fokuszustände. Wer mit der Tastatur navigiert, muss erkennen können, wo er sich befindet. Der Fokusrahmen sollte deshalb genügend Kontrast zur Umgebung haben.
Alternativtexte und Struktur. Bilder mit Aussage brauchen einen Alt-Text, Überschriften sollten eine logische Hierarchie bilden, und Links müssen auch ohne Umgebung verständlich sein.
Werkzeuge nutzen. Kontrastrechner, Browser-Entwicklertools und Prüfwerkzeuge wie Lighthouse oder WAVE finden viele typische Fehler. Sie ersetzen aber keinen Test mit Tastatur und Screenreader.
Barrierefreiheit von Anfang an
Barrierefreiheit gehört in die erste Skizze, nicht ans Ende eines Projekts. Wer Kontraste, Farbe und Struktur früh mitdenkt, erfüllt nicht nur rechtliche Anforderungen, sondern erreicht auch mehr Menschen und hat weniger Nacharbeit.
