Barrierefreies Design: Warum Zugänglichkeit und gutes Design kein Widerspruch sind

Tatsächlich schließen sich barrierefreies Design und gute Gestaltung nicht aus. Websites wie CSS Zen Garden oder die Auftritte spezialisierter Accessibility-Agenturen zeigen seit Jahren, dass sich Farbe, Typografie und Bewegung mit den Kriterien der WCAG 2.2 vereinbaren lassen. Hässliches Design ist in aller Regel das Ergebnis von Zeitdruck oder Nachlässigkeit, nicht der Standards selbst.

WCAG 2.2 schreibt an keiner Stelle eine Schriftart, eine Farbpalette oder einen Bildstil vor. Die Kriterien legen lediglich fest, welche Mindestwerte ein Ergebnis erreichen muss, etwa bei Kontrast oder Klickzielgröße, und lassen dabei bewusst offen, mit welchem gestalterischen Mittel dieses Ergebnis erreicht wird. Genau darin liegt der Spielraum, den viele Design-Teams unterschätzen.

Das POUR-Modell: die vier Grundprinzipien

WCAG 2.2 ordnet alle Anforderungen vier Prinzipien zu, dem sogenannten POUR-Modell. Für die Gestaltung sind besonders die ersten beiden unmittelbar relevant.

• ✓ Wahrnehmbar, Inhalte müssen über mehr als einen Sinneskanal zugänglich sein, etwa durch Alt-Texte, Untertitel und ausreichenden Kontrast
• ✓ Bedienbar, alle Funktionen müssen per Tastatur erreichbar sein, mit sichtbarem Fokus und ausreichend großen Klickzielen
• ✓ Verständlich, klare Sprache, konsistente Navigation und aussagekräftige Fehlermeldungen
• ✓ Robust, sauberer, semantischer Code, der mit Screenreadern und anderen assistiven Technologien zuverlässig funktioniert

Keines dieser vier Prinzipien schreibt eine bestimmte Optik vor. Sie legen fest, was am Ende funktionieren muss, nicht wie es aussehen soll. Ein Design-System, das diese vier Prinzipien von Anfang an mitdenkt, muss später kaum noch nachgebessert werden.

Typische Fehler in der Praxis

In der Praxis sind es meist dieselben Details, die ein an sich gut gemeintes Design unzugänglich machen.

• ✓ Hellgraue Schrift auf weißem Hintergrund, oft aus optischen Gründen gewählt, unterschreitet fast immer den geforderten Kontrast
• ✓ Fehlende oder unsichtbare Fokusindikatoren, häufig versehentlich per CSS entfernt, etwa mit outline: none ohne Ersatz
• ✓ Zu kleine oder zu eng stehende Klickziele, besonders bei Icon-Buttons und Filterlisten auf mobilen Oberflächen
• ✓ Rein farbliche Fehlermarkierungen in Formularen, ohne zusätzlichen Text oder Symbol
• ✓ Fehlende Sprachdeklaration im HTML, wodurch Screenreader Inhalte falsch aussprechen

Farbe und Kontrast richtig einsetzen

Farbe ist der Bereich, in dem Design und Barrierefreiheit am häufigsten aufeinandertreffen, meist unnötig. WCAG 2.2 schreibt für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund vor, für große Schrift ab 24 Pixel genügen 3 zu 1. Auch Bedienelemente wie Buttons und Formularfelder sowie grafische Objekte, die zum Verständnis nötig sind, brauchen ein Mindestverhältnis von 3 zu 1 zur Umgebung.

Genauso wichtig wie der reine Kontrastwert ist eine zweite Regel, Farbe darf nie das alleinige Unterscheidungsmerkmal sein. Ein rot markiertes Pflichtfeld im Formular muss zusätzlich einen Text, ein Symbol oder eine Umrandung tragen, damit auch Menschen mit Farbsehschwäche die Information erhalten. Dasselbe gilt für Diagramme, in denen Kategorien ausschließlich über Farbe unterschieden werden, und für Statusanzeigen, die grün und rot ohne zusätzliches Icon gegenüberstellen. Beide Regeln lassen sich mit nahezu jeder Markenfarbe umsetzen, oft reicht eine geringfügig dunklere oder hellere Abstufung, um von einem knapp verfehlten auf einen sicher eingehaltenen Kontrastwert zu kommen.

• ✓ Normaler Text, mindestens 4,5 zu 1 Kontrastverhältnis zum Hintergrund
• ✓ Große Schrift ab 24 Pixel oder fett ab 19 Pixel, mindestens 3 zu 1
• ✓ Bedienelemente und wichtige Grafiken, mindestens 3 zu 1 zur Umgebung
• ✓ Farbe niemals als einziges Merkmal, immer zusätzlich Text, Symbol oder Muster verwenden

Fokus, Tastatur und Klickzielgrößen

Nicht jede Person bedient eine Website mit der Maus. Menschen mit motorischen Einschränkungen, aber auch viele Power-User, navigieren ausschließlich per Tastatur, mit der Tab-Taste von Element zu Element. Wer so navigiert, braucht einen sichtbaren Fokusindikator, der jederzeit zeigt, welches Element gerade ausgewählt ist. Verschwindet dieser Indikator hinter einem Cookie-Banner oder einer Sticky-Navigation, verliert die Nutzerin die Orientierung komplett. Ebenso wichtig ist eine logische Fokusreihenfolge, die der visuellen Leserichtung entspricht, und das vollständige Fehlen von Tastaturfallen, aus denen ein Element nicht mehr verlassen werden kann.

Seit WCAG 2.2 gilt zusätzlich eine konkrete Vorgabe für Klickziele, das Kriterium 2.5.8 verlangt mindestens 24 mal 24 CSS-Pixel für Zeigegeräte, mit wenigen klar definierten Ausnahmen wie Links im Fließtext. Für Design-Systeme bedeutet das vor allem eines, ausreichend Abstand zwischen Icons, Buttons und Menüpunkten, gerade auf mobilen Oberflächen.

Typografie und Abstände

Auch bei Schrift lässt sich Gestaltung und Barrierefreiheit gut verbinden. Inhalte müssen bis zu einer Vergrößerung von 200 Prozent lesbar und bedienbar bleiben, ohne dass Text abgeschnitten wird oder horizontal gescrollt werden muss. Nutzerinnen und Nutzer müssen außerdem in der Lage sein, Zeilenabstand auf mindestens das 1,5-fache, Absatzabstand auf das 2-fache sowie Buchstaben- und Wortabstand zu vergrößern, ohne dass Inhalte verloren gehen. Für Menschen mit Leseschwierigkeiten oder Sehbehinderung entscheidet genau dieser Spielraum darüber, ob ein Text überhaupt nutzbar ist. Wer von Anfang an mit ausreichendem Weißraum, einer klaren Zeilenhöhe und flexiblen, relativen Einheiten statt fester Pixelgrößen arbeitet, erfüllt diese Anforderung meist automatisch, ganz ohne separates Zoom-Konzept.

Der rechtliche Rahmen für Ihr Design

Barrierefreies Design ist längst nicht mehr nur eine gute Idee. Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) B2C-Online-Shops in Deutschland zur Einhaltung von WCAG 2.2 Stufe AA, orientiert an genau den Kriterien zu Kontrast, Fokus und Klickzielgröße, die in diesem Beitrag beschrieben sind. Verstöße können mit Bußgeldern bis 100.000 Euro geahndet werden. Wer Design und Barrierefreiheit von Anfang an zusammendenkt statt sie am Ende eines Projekts nachzurüsten, spart sich damit nicht nur ein rechtliches Risiko, sondern auch teure Nacharbeit am fertigen Produkt.

Wie SiteCockpit Sie bei barrierefreiem Design unterstützt

easyMonitoring prüft automatisiert Kontraste, Fokusindikatoren, Klickzielgrößen und weitere WCAG-Kriterien im gesamten Design und zeigt genau, wo Handlungsbedarf besteht, statt das Design-Team mit einer unsortierten Fehlerliste allein zu lassen. Der Kontrastchecker testet einzelne Farbkombinationen in Echtzeit, direkt im Browser, noch während Sie am Design arbeiten, und zeigt sofort, ob ein geplantes Farbpaar die 4,5-zu-1- oder 3-zu-1-Grenze einhält. So lässt sich eine Website barrierefrei gestalten, ohne auf ein bestehendes Design komplett zu verzichten, und ohne jede Farbentscheidung von Hand nachzurechnen.

Gutes Design und Barrierefreiheit verfolgen am Ende dasselbe Ziel, Inhalte klar, verständlich und nutzbar zu machen. Wer diese Anforderungen von Beginn an mitdenkt statt sie als nachträgliche Korrekturliste zu behandeln, gestaltet nicht trotz, sondern wegen der Standards eine bessere Website, für Menschen mit Behinderung und für alle anderen gleichermaßen.