Barrierefreiheit
Barrierefreies Design ist gutes Design
Barrierefreies Design ist kein ästhetischer Kompromiss — es ist gutes Design. Ausreichende Kontraste, klare Typografie und verständliche Formulare helfen allen Nutzern, nicht nur Menschen mit Behinderungen. Die Prinzipien barrierefreien Designs überschneiden sich stark mit den Prinzipien guten UX-Designs.
Farbkontraste — das wichtigste Design-Kriterium
Farbkontrast ist der häufigste WCAG-Verstoß auf kommerziellen Websites. WCAG definiert Mindestkontrastverhältnisse die sicherstellen, dass Text auch für Menschen mit Sehbeeinträchtigungen oder Farbenblindheit lesbar ist.
Normaler Text (unter 18px)
Mindest-Kontrast: 4,5:1 — WCAG-Kriterium: 1.4.3 AA
Großer Text (ab 18px oder 14px bold)
Mindest-Kontrast: 3:1 — WCAG-Kriterium: 1.4.3 AA
UI-Komponenten (Buttons, Input-Rahmen)
Mindest-Kontrast: 3:1 — WCAG-Kriterium: 1.4.11 AA
Grafische Elemente (Icons, Charts)
Mindest-Kontrast: 3:1 — WCAG-Kriterium: 1.4.11 AA
Dekoratives
Mindest-Kontrast: kein Minimum — Kein WCAG-Kriterium
Normaler Text (Enhanced)
Mindest-Kontrast: 7:1 — WCAG-Kriterium: 1.4.6 AAA
Kontrast-Tools
WebAIM Contrast Checker
webaim.org/resources/contrastchecker — kostenlos, browser-basiert. Eingabe von Vordergrund- und Hintergrundfarbe als Hex, RGB oder HSL. Zeigt Kontrastverhältnis und ob AA/AAA für normal und großen Text erfüllt ist.
Browser DevTools
Chrome und Firefox DevTools zeigen Kontraste direkt im Inspector. Element auswählen, Color Picker öffnen — das Tool zeigt das Kontrastverhältnis zur Hintergrundfarbe und warnt bei WCAG-Verletzungen.
Figma Plugins
Stark und Contrast für Figma prüfen Kontraste direkt im Design-Tool. Ideal für frühe Design-Phase bevor Code geschrieben wird — günstiger als nachträgliche Korrekturen.
axe DevTools
Browser-Extension für Chrome und Firefox. Findet Kontrast-Fehler auf ganzen Seiten automatisch — nicht nur einzelne Elemente. Teil des Standard-Accessibility-Test-Toolkits.
Farbe nicht als einziges Mittel
WCAG 1.4.1 (Use of Color, Level A) verlangt, dass Farbe nicht das einzige Mittel ist um Informationen zu vermitteln. Das betrifft besonders Formular-Validierung, Status-Indikatoren und Diagramme. Typische Verstöße: Pflichtfelder nur durch roten Rahmen markiert, Erfolg/Fehler nur durch grün/rot kommuniziert, Diagramm-Datensätze nur durch Farbe unterschieden.
Formular-Validierung
Fehler: Fehlermeldung als roten Text + Symbol (x oder Ausrufezeichen) + beschreibenden Text. Erfolg: grünen Text + Symbol (Häkchen). Nie nur Farbe — Menschen mit Farbenblindheit (8% der Männer) können rot und grün nicht unterscheiden.
Status-Indikatoren
Online/Offline, Aktiv/Inaktiv, Verfügbar/Ausgebucht: immer zusätzlich mit Text, Icon oder Muster kommunizieren. Grüner Punkt allein ist kein barrierefreier Status-Indikator.
Diagramme und Charts
Datensätze in Charts durch Muster, Formen oder Direktbeschriftung zusätzlich zur Farbe unterscheiden. Legende mit Mustern statt nur Farb-Kästchen. Farbenblindheits-freundliche Paletten (z.B. IBM Color Blind Safe Palette) verwenden.
Barrierefreie Typografie
Lesbarkeit ist der Kern barrierefreier Typografie. Schriftgröße, Zeilenabstand, Zeilenlänge und Zeichenabstand beeinflussen alle die Lesbarkeit — besonders für Menschen mit Dyslexie, Sehbeeinträchtigungen oder kognitiven Einschränkungen.
Schriftgröße Body
WCAG: Mindestens skalierbar auf 200% — Empfehlung: 16–18px Basis (rem)
Zeilenabstand
WCAG: Mindestens 1,5x Schriftgröße — Empfehlung: 1,5–1,65 line-height
Zeilenlänge
WCAG: Nicht geregelt — Empfehlung: 45–75 Zeichen optimal
Barrierefreie Formulare
Formulare sind die häufigste Interaktionsfläche auf Websites — und eine der häufigsten Quellen für Barrierefreiheitsprobleme. Die wichtigsten Anforderungen für barrierefreie Formulare.
Labels für alle Inputs
Jedes Input-Element braucht ein sichtbares, programmatisch verknüpftes Label. Entweder label for='input-id' oder aria-label. Placeholder-Text allein ist kein Label — er verschwindet beim Tippen und ist oft zu wenig kontrastreich.
Fehlermeldungen zugänglich
Fehlermeldungen müssen: in Text formuliert sein, mit dem fehlerhaften Feld verknüpft sein (aria-describedby), das fehlerhafte Feld als ungültig markieren (aria-invalid='true'), und nach Submit den Fokus auf den ersten Fehler setzen.
Ausreichende Klickziele
Form-Elemente (Checkboxen, Radio-Buttons) haben oft kleine Klickflächen. Klickbereich auf mindestens 44x44 Pixel vergrößern — per CSS auf das Label oder einen Wrapper, nicht unbedingt auf das Element selbst.
Autocomplete für persönliche Daten
Für Felder die persönliche Informationen abfragen (Name, E-Mail, Adresse) das autocomplete-Attribut setzen. Das ermöglicht Password-Manager und Browser-Autofill — besonders wichtig für Nutzer mit motorischen Einschränkungen.
Häufig gestellte Fragen zum Thema Barrierefreies Design
axe DevTools (Browser-Extension) scannt die gesamte Seite automatisch. Für einzelne Elemente: Browser DevTools Color Picker zeigt das Kontrastverhältnis direkt. WebAIM Contrast Checker für manuelle Prüfung spezifischer Farbkombinationen.
Ja — schwarzer (#000000) oder sehr dunkler Text auf hellen Hintergründen erfüllt fast immer die Kontrast-Anforderungen. Problematisch wird es bei dunklen Hintergründen mit nicht-weißem Text, oder hellen Farben mit grauem Text.
Dark Mode ist für viele Nutzer mit Sehbeeinträchtigungen hilfreicher als Light Mode. Beide Themes müssen die Kontrast-Anforderungen erfüllen — getrennt prüfen. prefers-color-scheme CSS Media Query für systemweite Präferenz respektieren.
Der Mythos hält sich — die Forschungslage ist aber unklar. Studien zeigen keinen konsistenten Vorteil von 'Dyslexie-Schriften' gegenüber gut gestalteten Standard-Schriften. Wichtiger als die Schriftwahl: ausreichende Schriftgröße, großzügiger Zeilenabstand und guter Kontrast.