Barrierefreiheit gehört in die Gestaltung, nicht in die Nachbesserung
83,9 %der Startseiten haben Text mit zu wenig Kontrast, der häufigste Fehler im Web [3]
Viele Barrieren entstehen im Entwurf, nicht im Code: zu wenig Kontrast, zu kleine Klickflächen, unsichtbarer Fokus. Was WCAG 2.2 für Gestalter bedeutet und welche zehn Punkte schon im Figma-Entwurf stimmen sollten.
Das Wichtigste in Kürze
Der häufigste Barrierefreiheitsfehler im Web ist ein Gestaltungsfehler. Auf 83,9 % der eine Million meistbesuchten Startseiten fand WebAIM 2026 Text mit zu wenig Kontrast, im Schnitt 34 Stellen pro Seite [3]. Kontrast, Größe von Klickflächen, sichtbarer Fokus und Alternativen zum Ziehen entscheiden sich im Entwurf. Wer sie dort richtig macht, spart später teure Nachbesserung. WCAG 2.2 auf Stufe AA ist dafür der Maßstab, auf den sich auch BaFG und BFSG beziehen [1].
Die Lage im Web
Was WCAG 2.2 für Gestalter neu gebracht hat
WCAG 2.2 ist seit Oktober 2023 die aktuelle Fassung und bringt mehrere Kriterien, die direkt den Entwurf betreffen [2]:
- Fokus nicht verdeckt (2.4.11, AA): Ein Element, das per Tastatur den Fokus bekommt, muss zumindest teilweise sichtbar bleiben, also nicht hinter einer festen Kopfzeile oder einem Cookie-Banner verschwinden [2].
- Ziehbewegungen (2.5.7, AA): Was sich nur durch Ziehen bedienen lässt, etwa ein Schieberegler oder eine sortierbare Liste, braucht eine einfache Alternative mit Klick oder Tippen [2].
- Zielgröße (2.5.8, AA): Klickflächen sollen mindestens 24 × 24 CSS-Pixel groß sein oder so viel Abstand haben, dass ein Kreis mit 24 Pixeln Durchmesser um sie herum kein anderes Ziel berührt. Ausgenommen sind etwa Links mitten im Fließtext [4].
- Einheitliche Hilfe (3.2.6, A): Kontakt oder Hilfe stehen auf allen Seiten an derselben Stelle [2].
- Barrierefreie Anmeldung (3.3.8, AA): Kein Rätsel, kein Abtippen, kein Merken als einzige Möglichkeit beim Login [2].
Die Klassiker, die weiterhin gelten
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5 : 1 zum Hintergrund, großer Text ab 18 Punkt oder 14 Punkt fett mindestens 3 : 1 [1]. Bedienelemente und wichtige Grafiken, etwa der Rand eines Eingabefelds oder ein Symbol ohne Text, brauchen mindestens 3 : 1 [1]. Informationen dürfen nicht nur über Farbe vermittelt werden, ein rotes Feld allein ist keine Fehlermeldung [1]. Wie man Kontraste prüft, zeigt Kontrast, Farben, Schrift.
Zehn Punkte für den barrierefreien Entwurf
0 von 10 erledigt
Warum das günstiger ist als Nachbessern
Eine zu helle Markenfarbe im Entwurf zieht sich durch Buttons, Links, Icons und Grafiken. Fällt sie erst bei der Prüfung nach dem Livegang auf, wird aus einer Farbentscheidung ein Umbau. Deshalb prüfen wir Kontraste schon beim Anlegen des Design-Systems und gestalten Fokus, Fehlerzustände und Klickflächen gleich mit. Das passt zu unserem Ansatz Gestaltet für den Code: Wer gestaltet, baut auch, und Barrierefreiheit geht bei der Übergabe nicht verloren.
Häufige Fragen zum Thema
Kann ein Figma-Entwurf schon barrierefrei sein?
Zu einem großen Teil ja. Kontraste, Klickflächen, Fokuszustände, Fehlermeldungen und die Gliederung lassen sich im Entwurf festlegen und prüfen. Der Rest, etwa Tastaturbedienung und Screenreader-Ausgabe, entsteht im Code.
Müssen Klickflächen wirklich 44 Pixel groß sein?
Für WCAG 2.2 auf Stufe AA reichen 24 × 24 CSS-Pixel oder genug Abstand zum nächsten Ziel. 44 Pixel sind die strengere Stufe AAA und auf dem Telefon angenehmer. Wir planen deshalb meist größer als das Minimum.
Unsere Markenfarbe hat zu wenig Kontrast. Was nun?
Die Farbe bleibt für Flächen, Akzente und große Schrift, für Text und Bedienelemente kommt eine dunklere oder hellere Variante dazu. So bleibt das Corporate Design erkennbar und die Website lesbar.
Für Agenturen
Wir gestalten barrierefrei von Anfang an: Kontraste, Fokus und Klickflächen schon im Entwurf, geprüft nach WCAG 2.2 AA. White-label und zum Fixpreis.
Sie sind ein Unternehmen? Rückruf vereinbaren
Weiterlesen
- European Accessibility Act: die EU-Richtlinie 2019/882Der European Accessibility Act (RL 2019/882) verpflichtet alle EU-Staaten seit 28. Juni 2025 zu einheitlichen Barrierefreiheitsanforderungen für Produkte und Dienstleistungen. BaFG und BFSG setzen ihn um.
- Leitfaden für Agenturen: Kunden beraten, white-label prüfenAgenturen haften nicht nach BaFG oder BFSG, ihre Kunden schon. Wer das Thema früh anspricht, sauber vertraglich regelt und die Umsetzung white-label einkauft, verkauft Sicherheit statt Stunden.
- Barrierefreie Website in Liechtenstein: BGlG und EAAStand 30. Oktober 2026 ist der European Accessibility Act in Liechtenstein nicht umgesetzt. Öffentliche Stellen müssen ihre Websites nach dem BGlG barrierefrei machen, für Private gilt das Diskriminierungsverbot.
Quellen
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 · abgerufen am 29.10.2026
- W3C WAI, What’s New in WCAG 2.2 · abgerufen am 29.10.2026
- WebAIM, The WebAIM Million 2026 (Februar 2026) · abgerufen am 29.10.2026
- W3C WAI, Understanding Success Criterion 2.5.8: Target Size (Minimum) · abgerufen am 29.10.2026
Recherchiert mit KI-Unterstützung, mit Quellen belegt und inhaltlich geprüft von Mike Joerihsen am .
Diese Inhalte sind eine Orientierung und keine Rechtsberatung. Bei konkreten Fragen zu Ihrer Situation wenden Sie sich an eine Rechtsberatung oder die zuständige Behörde.