Barrierefreies 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.

Maßstab für digitale Angebote sind die Web Content Accessibility Guidelines, kurz WCAG, des World Wide Web Consortiums. Sie sind in die drei Konformitätsstufen A, AA und AAA gegliedert und folgen vier Grundprinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. In der Praxis wird meist Stufe AA angestrebt. Die aktuelle Fassung ist WCAG 2.2. Die europäische Norm EN 301 549 verweist für Webinhalte ebenfalls auf die Anforderungen der Stufe AA: die bisherige Fassung 3.2.1 auf WCAG 2.1, die im September 2026 veröffentlichte Fassung 4.1.1 auf WCAG 2.2.

Sechs Farbkombinationen mit berechneten Kontrastverhältnissen nach WCAG
Grafik: designbote.com

In Deutschland ist das Barrierefreiheitsstärkungsgesetz, kurz BFSG, wichtig. Es setzt die europäische Richtlinie über Barrierefreiheitsanforderungen um und gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, darunter etwa Online-Shops und Bankdienstleistungen für Verbraucher. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen von den Pflichten ausgenommen, bei Produkten dagegen nicht. Für Gestaltende bedeutet das, dass Barrierefreiheit zunehmend auch rechtlich relevant wird.

Auf Ebene der Gestaltung geht es vor allem um Kontraste, Typografie und Bedienbarkeit. Normaler Text sollte ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund haben. Für großen Text sowie für grafische Objekte und die sichtbaren Grenzen von Bedienelementen, etwa den Rahmen eines Eingabefelds, genügt 3 zu 1. Die erweiterte Stufe AAA verlangt für normalen Text sogar 7 zu 1. Farbe darf nie allein Information tragen, sodass beispielsweise Fehlermeldungen zusätzlich über Symbole oder Text erkennbar sind. Weitere Bausteine sind ausreichend große und gut lesbare Schriften, sichtbare Fokuszustände für die Tastaturbedienung, Alternativtexte für Bilder und eine klare Überschriftenstruktur, die auch Screenreader nutzen können.

Barrierefreiheit gelingt am besten, wenn sie von Beginn an mitgedacht wird. Nachträgliche Korrekturen sind meist aufwendiger, als Kontraste, Raster und Komponenten gleich korrekt anzulegen. Für Prüfungen stehen Kontrastrechner, Browser-Erweiterungen und Screenreader zur Verfügung, ersetzen aber keine Tests mit realen Nutzerinnen und Nutzern.

Barrierefreies Design verbessert zudem häufig die Nutzbarkeit für alle: Klare Kontraste, verständliche Sprache und logische Strukturen helfen auch Menschen ohne Einschränkungen und wirken sich positiv auf Suchmaschinenoptimierung und Bedienkomfort aus.

Zu den praktischen Bausteinen gehört auch die Bedienung ohne Maus. Alle interaktiven Elemente müssen sich per Tastatur erreichen lassen, und die Reihenfolge der Fokussierung sollte der visuellen Logik folgen. Texte sollten sich ohne Hilfsmittel wie eine Bildschirmlupe bis zu 200 Prozent vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen. Videos benötigen Untertitel, Audioinhalte Transkripte. Animationen sollten sich abschalten lassen, damit Menschen mit Bewegungsempfindlichkeit nicht beeinträchtigt werden. Formulare brauchen sichtbare Beschriftungen und klare Fehlermeldungen. Für Designteams lohnt es sich, Barrierefreiheit bereits im Designsystem zu verankern, etwa durch geprüfte Farbpaare und Komponenten, damit die Qualität nicht von jedem einzelnen Entwurf abhängt.