Unterscheidbar: So werden Inhalte lesbar und erkennbar

Die WCAG 2.1 Richtlinie 1.4 „Unterscheidbar“ (Distinguishable) sorgt dafür, dass Nutzer Inhalte sehen und hören können, einschließlich der Trennung von Vordergrund und Hintergrund. Mit dem BFSG 2025 wird dies für deutsche Unternehmen zur rechtlichen Pflicht.

Stellen Sie sich vor, Sie versuchen einen hellgrauen Text auf weißem Hintergrund zu lesen, oder Sie können rote und grüne Buttons nicht unterscheiden. Genau diese Probleme erleben täglich Millionen von Menschen: Etwa 4,5% der Bevölkerung haben eine Form der Farbenblindheit, viele leiden unter Sehschwächen, und praktisch jeder hat schon mal versucht, bei hellem Sonnenlicht auf dem Handy etwas zu lesen.

Unterscheidbare Inhalte sind nicht nur für Menschen mit Behinderungen wichtig. Sie verbessern die Benutzerfreundlichkeit für alle – in hellen Umgebungen, auf älteren Bildschirmen oder bei schwachen Internetverbindungen, wo Bilder nicht laden.

Die wichtigsten Erfolgskriterien

Nutzung von Farbe (Level A)

Farbe darf niemals das einzige Mittel sein, um Informationen zu übermitteln oder eine Aktion zu kennzeichnen. Menschen mit Farbenblindheit können bestimmte Farbkombinationen nicht unterscheiden, und Screenreader-Nutzer erhalten keine Farbinformationen.

Problematische Beispiele:

„Pflichtfelder sind rot markiert“
„Klicken Sie den grünen Button für Weiter“
Fehlerhafte Eingaben nur durch rote Umrandung kennzeichnen
Links nur durch Farbe vom normalen Text unterscheiden

Richtige Umsetzung:

„Pflichtfelder sind mit einem Sternchen (*) markiert und rot hervorgehoben“
„Klicken Sie den ‚Weiter‘-Button (grün)“
Fehler zusätzlich mit Icons, Text oder anderen visuellen Hinweisen kennzeichnen
Links durch Unterstreichung oder andere Formatierung zusätzlich zur Farbe kennzeichnen

Geltungsbereich:

Gilt für alle Unternehmen, die mehr als 9 Beschäftigte haben oder deren Jahresumsatz 2 Millionen Euro übersteigt.

ONLINE -INTERAKTIONEN:

Webseiten, Plattformen, und Apps für den Austausch mit Kunden

Audio-Steuerung (Level A)

Automatisch abgespielte Audioinhalte können störend sein und die Nutzung von Screenreadern beeinträchtigen. Hintergrundmusik oder automatische Ansagen müssen steuerbar sein.

Anforderungen:

Automatische Audioinhalte stoppen nach spätestens 3 Sekunden automatisch ODER
Pause- und Lautstärke-Regler müssen verfügbar sein
Audio darf nicht lauter sein als andere Systemtöne

Kontrast Minimum (Level AA)

Das Kontrastverhältnis zwischen Text und Hintergrund ist entscheidend für die Lesbarkeit. Zu schwache Kontraste machen Texte für viele Menschen unlesbar.

Mindestanforderungen:

4.5:1 für normalen Text
3:1 für großen Text (18pt oder 14pt fett)
Gilt auch für Text in Bildern
Ausnahmen: Logos, dekorative Texte, inaktive Elemente

Praktische Umsetzung: Schwarzer Text auf weißem Hintergrund hat ein perfektes Kontrastverhältnis von 21:1. Dunkelgrauer Text auf weißem Hintergrund erreicht 12.6:1 und ist ausgezeichnet lesbar. Hellgrauer Text auf Weiß erreicht nur 2.8:1 und ist problematisch.

Hilfreiche Tools:

WebAIM Contrast Checker (kostenlos online)
Colour Contrast Analyser (Desktop-App)
Chrome DevTools Lighthouse Audit
Stark Browser-Erweiterung

Text vergrößern (Level AA)

Nutzer müssen in der Lage sein, Text bis zu 200% zu vergrößern, ohne dass Funktionalität verloren geht oder horizontales Scrollen erforderlich wird. Dies ist besonders wichtig für Menschen mit Sehschwächen.

Wichtige Aspekte:

Text muss responsiv und flexibel gestaltet sein
Verwenden Sie relative Einheiten (rem, em) statt feste Pixel-Werte
Testen Sie Ihre Website bei verschiedenen Zoom-Stufen
Lange Wörter oder URLs dürfen horizontales Scrollen erfordern

Bilder von Text (Level AA)

Text sollte als echter HTML-Text und nicht als Grafik dargestellt werden. Echter Text ist vergrößerbar, durchsuchbar und für Screenreader zugänglich.

Erlaubte Ausnahmen:

Logos und Markenkennzeichen
Text als Teil von Fotografien (z.B. Straßenschilder)
Dekorative Schriftzüge ohne informationellen Wert
Text, bei dem die spezifische Darstellung essentiell ist

Moderne CSS-Alternativen können fast jede visuelle Textgestaltung ersetzen: Schatten, Verläufe, spezielle Schriftarten und Effekte sind heute problemlos mit CSS umsetzbar.

Kontrast Verstärkt (Level AAA)

Für höchste Barrierefreiheit gelten noch strengere Kontrastanforderungen:

7:1 für normalen Text
4.5:1 für großen Text

Dies ist besonders wichtig für öffentliche Websites oder Anwendungen, die von Menschen mit starken Sehbeeinträchtigungen genutzt werden.

Umbruch (Level AA)

Inhalte müssen bei einer Breite von 320px ohne horizontales Scrollen lesbar und nutzbar sein. Dies entspricht einer 400%igen Vergrößerung auf einem Desktop-Bildschirm.

Umsetzung:

Verwenden Sie flexible Layouts (Flexbox, CSS Grid)
Vermeiden Sie feste Breiten
Testen Sie bei verschiedenen Bildschirmbreiten
Navigationselemente müssen auch bei schmalen Bildschirmen funktionieren

Nicht-Text-Kontrast (Level AA)

Nicht nur Text, sondern alle visuellen UI-Komponenten müssen ausreichende Kontraste haben. Das Kontrastverhältnis muss mindestens 3:1 betragen.

Betrifft:

Button-Rahmen und Hintergründe
Formular-Eingabefelder
Icons mit informativer Bedeutung
Grafische Elemente in Diagrammen
Focus-Indikatoren
Slider und andere Steuerelemente

Textabstand (Level AA)

Nutzer müssen in der Lage sein, Textabstände anzupassen, ohne dass Inhalte verloren gehen oder überlappen. Browser-Erweiterungen oder Benutzer-CSS können folgende Abstände erzwingen:

Mindestanforderungen:

Zeilenhöhe: mindestens 1.5x der Schriftgröße
Absatzabstand: mindestens 2x der Schriftgröße
Buchstabenabstand: mindestens 0.12x der Schriftgröße
Wortabstand: mindestens 0.16x der Schriftgröße

Praktische Bedeutung: Ihre Website muss auch dann funktionieren, wenn Nutzer diese Abstände über Browser-Erweiterungen oder eigene Stylesheets anpassen.

Inhalt bei Hover oder Fokus (Level AA)

Zusätzliche Inhalte wie Tooltips, Dropdown-Menüs oder Hover-Karten müssen bestimmte Regeln befolgen, um für alle Nutzer zugänglich zu sein.

Die drei Hauptregeln:

Verwerfbar: Inhalte müssen mit der ESC-Taste schließbar sein
Schwebefähig: Der Mauszeiger muss über den zusätzlichen Inhalt bewegt werden können, ohne dass dieser verschwindet
Beständig: Inhalte bleiben sichtbar, bis Hover oder Focus entfernt wird

Dies ist besonders wichtig für Nutzer mit motorischen Einschränkungen, die mehr Zeit brauchen, um Inhalte zu lesen oder zu verstehen.

Praktische Umsetzung für Ihr Unternehmen

Farbpalette entwickeln

Entwickeln Sie von Anfang an eine Farbpalette, die ausreichende Kontraste garantiert. Definieren Sie für jede Hintergrundfarbe passende Textfarben und testen Sie diese Kombinationen systematisch.

Vorgehen:

Wählen Sie Grundfarben für Ihre Marke
Testen Sie alle Kombinationen mit Kontrast-Checkern
Dokumentieren Sie erlaubte Farbkombinationen
Erstellen Sie ein Styleguide für Ihr Team

Alternative Kennzeichnungen implementieren

Nutzen Sie immer mehrere visuelle Hinweise gleichzeitig:

Bei Formularen:

Pflichtfelder mit Sternchen UND Farbe markieren
Fehlermeldungen mit Icon, Farbe UND erklärendem Text
Erfolgsmeldungen ebenfalls mehrfach kennzeichnen

Bei Links und Buttons:

Links durch Unterstreichung zusätzlich zur Farbe kennzeichnen
Buttons mit ausreichendem Kontrast und klaren Beschriftungen
Hover- und Focus-Zustände deutlich sichtbar machen

Responsive Schriftgrößen

Implementieren Sie flexible Schriftgrößen, die bei verschiedenen Zoom-Stufen funktionieren:

Verwenden Sie rem oder em statt px
Testen Sie bei 200% Browser-Zoom
Stellen Sie sicher, dass Text nicht abgeschnitten wird
Nutzen Sie CSS clamp() für flexible aber begrenzte Schriftgrößen

Regelmäßige Tests durchführen

Kontrast-Tests:

Prüfen Sie alle Farbkombinationen systematisch
Testen Sie auch Hover- und Focus-Zustände
Verwenden Sie automatisierte Tools wie axe oder Lighthouse

Vergrößerungs-Tests:

Testen Sie bei 200% Browser-Zoom
Prüfen Sie schmale Bildschirmbreiten (320px)
Nutzen Sie verschiedene Browser und Geräte

Häufige Probleme vermeiden

Problem: Nur Farbe als Unterscheidungsmerkmal

Viele Websites verwenden nur Farbe, um wichtige Informationen zu vermitteln. Das schließt Menschen mit Farbenblindheit aus und ist nicht robust bei technischen Problemen.

Lösung: Verwenden Sie immer mehrere visuelle Hinweise: Text, Icons, Formen, Positionen oder Formatierungen zusätzlich zur Farbe.

Problem: Schlechte Kontraste bei interaktiven Elementen

Buttons und Links sind oft zu schwach kontrastiert, besonders in Hover- oder Focus-Zuständen.

Lösung: Alle interaktiven Elemente müssen die 3:1 Regel für Nicht-Text-Kontraste erfüllen. Focus-Indikatoren müssen besonders deutlich sichtbar sein.

Problem: Text in Grafiken verwenden

Viele Designer erstellen Headlines oder Buttons als Grafiken, um spezielle Schriftarten oder Effekte zu nutzen.

Lösung: Moderne CSS kann fast alle gewünschten Effekte erzeugen. Webfonts, CSS-Verläufe, Schatten und Transformationen ersetzen meist Text-Grafiken.

BFSG 2025 und rechtliche Konsequenzen

Schlechte Kontraste und unzureichende Unterscheidbarkeit sind die häufigsten Gründe für Abmahnungen im Bereich digitale Barrierefreiheit. Das BFSG macht diese Anforderungen seit Juni 2025 rechtlich verbindlich für alle Unternehmen, die digitale Dienstleistungen anbieten.

Besonders risikoreiche Bereiche:

Online-Shops mit schlecht erkennbaren Buttons oder Preisen
Formulare ohne klare Fehlerkennzeichnung
Websites, die ausschließlich auf Farbkodierung setzen
Text, der bei Vergrößerung unlesbar wird oder verschwindet

Positive Nebeneffekte: Websites mit guten Kontrasten und klarer visueller Hierarchie haben oft bessere Conversion-Raten, da sie für alle Nutzer einfacher zu verstehen und zu bedienen sind. Suchmaschinen bewerten gut strukturierte und zugängliche Websites ebenfalls positiver.

BarriGo. unterstützt Sie bei der Umsetzung

BarriGo. unterstützt Sie bei der systematischen Prüfung der Kontrast- und Unterscheidbarkeitsanforderungen.
Mit BarriGo. Live Inspect erkennen Sie automatisch viele häufige Probleme wie zu schwache Farbkontraste, unzureichende Nicht-Text-Kontraste oder problematische Zustände bei interaktiven Elementen. Manche Aspekte – wie die semantische Nutzung von Farbe als einziges Unterscheidungsmerkmal – erfordern weiterhin eine manuelle Bewertung. So kombinieren Sie automatisierte Prüfungen mit fundierter Fachkenntnis und minimieren das Risiko von Verstößen frühzeitig.

Parallel dazu bietet das BarriGo. Tool Ihren Nutzern praktische Anpassungsmöglichkeiten direkt auf der Website: Kontraste erhöhen, Text vergrößern, Farbfilter aktivieren oder alternative Darstellungen wählen – ganz ohne Eingriff in den Code. Damit kombinieren Sie technische Barrierefreiheit und echte Nutzungsfreiheit.

👉 Jetzt BarriGo. testen: Melden Sie sich kostenlos an und erleben Sie, wie einfach Sie visuelle Barrieren identifizieren und reduzieren können.

Weiterführende Informationen finden Sie im offiziellen WCAG 2.2 Standard: WCAG 2.2 – Richtlinie 1.4 Unterscheidbar