Warum Kontrast und Schriftgröße für Barrierefreiheit entscheidend sind
Für barrierefreies Webdesign ist Lesbarkeit einer der wichtigsten Faktoren. Ein zu geringer Farbkontrast zwischen Text und Hintergrund macht Inhalte für viele Nutzer schwer oder gar nicht lesbar, vor allem bei Sehschwäche, Farbenblindheit, Blendung durch Sonne oder auf schlechteren Displays. Auch Schriftgrößen und Typografie entscheiden darüber, ob Inhalte schnell verstanden werden oder anstrengend wirken.
Das Ziel ist nicht, dass es „irgendwie geht“, sondern dass Inhalte in realen Situationen zuverlässig lesbar bleiben.
WCAG-Grundlagen: Kontrast und Text
Kontrastverhältnisse
Die WCAG definiert Mindestwerte für den Kontrast zwischen Vordergrund (Text) und Hintergrund.
- Normaler Text: mindestens 4.5:1 (Stufe AA)
- Großer Text: mindestens 3:1 (Stufe AA)
Großer Text bedeutet in der Praxis: deutlich größer oder deutlich fetter als Fließtext.
Wichtig: Kontrast betrifft nicht nur Fließtext, sondern auch:
- Buttons und Links
- Icons mit Bedeutung (z. B. Warnsymbol)
- Fokus-Ringe und Zustände
- Placeholder-Texte (oft zu hell)
- Text über Bildern oder Verläufen
Typische Problemstellen beim Kontrast
- hellgraue Texte auf weißem Hintergrund (sehen „clean“ aus, sind aber schlecht lesbar)
- Text über Bildern ohne Overlay
- Text auf Farbflächen, die in verschiedenen Zuständen wechseln (Hover, Disabled)
- reine Farb-Codierung (z. B. „grün = ok, rot = falsch“) ohne zusätzliche Hinweise
Schriftgrößen: Was bedeutet „lesbar“ in der Praxis?
Ausreichende Basisgröße
Als Orientierung gilt: Fließtext sollte auf Desktop und Mobile gut lesbar sein, ohne Zoomen. Es gibt keine einzelne perfekte Zahl, aber zu kleine Schriftgrößen sind ein häufiger Grund für schlechte UX.
Wichtiger als eine fixe Pixelzahl ist:
- ausreichende Zeilenhöhe
- gute Kontraste
- klare Textlängen und Absätze
- stabile Darstellung bei Zoom
Anpassbarkeit ohne Layout-Bruch
Ein WCAG-naher Anspruch ist: Nutzer müssen Text vergrößern können, ohne dass Inhalte verschwinden oder unbedienbar werden. Das heißt in der Praxis:
- Layout funktioniert auch bei hoher Textgröße
- keine überlappenden Elemente
- Buttons bleiben klickbar
- Navigation bleibt nutzbar
Typografie: Welche Regeln helfen sofort?
Klare Hierarchie
- Überschriften klar vom Fließtext absetzen
- Absätze sinnvoll gliedern
- genug Abstand zwischen Abschnitten, damit scannen möglich ist
Zeilenlänge und Zeilenhöhe
- zu lange Zeilen sind anstrengend
- zu enge Zeilenhöhe macht Text „dicht“ und schwer erfassbar
Schriftwahl
Eine gut lesbare Schrift muss nicht langweilig sein. Wichtig ist:
- klare Zeichenformen
- ausreichende Strichstärke
- gute Unterscheidbarkeit ähnlicher Zeichen (z. B. I, l, 1)
Kontrast testen: Wie geht man sinnvoll vor?
1) Design prüfen
- Farben für Text, Links, Buttons und Zustände testen
- auch Varianten testen: Hover, Disabled, Error, Success
- Fokuszustände nicht vergessen
2) Implementierung prüfen
Selbst wenn das Design passt, kann die Umsetzung abweichen:
- CSS überschreibt Farben
- Transparenz verändert Kontrast
- Hintergrundbilder oder Overlays verändern die reale Farbe
3) Realistische Szenarien berücksichtigen
- Mobile in hellem Licht
- ältere Monitore
- Nutzer mit aktivierter Schriftvergrößerung
- Dark Mode (falls vorhanden)
Praktische Empfehlungen nach WCAG 2.1
- Kontrastverhältnis für normalen Text mindestens 4.5:1
- großer Text mindestens 3:1
- Schriftgröße muss vergrößerbar sein, ohne Layoutbruch
- klare Typografie und saubere Hierarchie verwenden
- Text nicht nur über Farbe verständlich machen (zusätzliche Signale)
Häufige Fehler und schnelle Fixes
Placeholder ist zu hell
Placeholder sollte nicht der Hauptträger wichtiger Information sein. Labels sind besser. Wenn Placeholder genutzt wird, sollte er lesbar bleiben.
Text über Bildern
Nutzen Sie Overlays, Hintergründe oder Boxen, statt Text direkt über unruhige Motive zu legen.
Fokus kaum sichtbar
Fokus-Ringe brauchen Kontrast zum Hintergrund. Ein kaum sichtbarer Fokus ist für Tastaturbedienung ein echtes Problem.
Disabled Zustände
Disabled Text und Buttons werden oft so stark „ausgegraut“, dass sie kaum noch lesbar sind. Disabled sollte als Zustand erkennbar sein, aber nicht unsichtbar.
Checkliste: Farbkontraste und Schriftgrößen optimieren
- Kontraste für Fließtext erfüllen mindestens 4.5:1
- großer Text erfüllt mindestens 3:1
- Links sind klar erkennbar, nicht nur über Farbe
- Buttons und Zustände (Hover, Disabled, Error) sind geprüft
- Fokuszustände sind deutlich sichtbar
- Text bleibt bei Zoom und größerer Schriftgröße nutzbar
- Zeilenlänge und Zeilenhöhe sind angenehm lesbar
- Text über Bildern ist abgesichert (Overlay oder Hintergrund)
Fazit
Die Optimierung von Farbkontrasten und Schriftgrößen ist ein grundlegender Schritt für barrierefreies Webdesign. Sie verbessert Lesbarkeit für Menschen mit Sehschwäche und macht die Website für alle Nutzer klarer und angenehmer. Wenn Kontrast, Typografie und Skalierbarkeit sauber umgesetzt sind, steigt nicht nur die Zugänglichkeit, sondern auch die allgemeine UX.
