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
Wie prüfe ich Farbkontraste auf einer fertigen Website?
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.
Darf ich schwarzen Text auf farbigem Hintergrund verwenden?
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.
Wie gehe ich mit Dark Mode und Barrierefreiheit um?
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.
Sind Schriften wie Comic Sans wirklich besser für Dyslexie?
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.