Anforderung 1.4: Unterscheidbar

Anforderung 1.4 der BITV 2.0 betrifft Farbkontrast, barrierefreie Farben, Kontrastverhältnis, Reflow und Textabstand, damit Inhalte auch bei eingeschränktem Sehen oder auf kleinen Bildschirmen gut nutzbar bleiben. Für Webdesign, Formulare, Icons, Grafiken und eingeblendete Inhalte ist das besonders wichtig, weil sonst Informationen schwer erkennbar oder schwer bedienbar werden können. WCAG 1.4 und EN 301 549 beschreiben dafür mehrere konkrete Prüfbereiche von Farbe über Kontrast bis zu Hover-Inhalten. Das ist für öffentliche Stellen ebenso relevant wie für bestimmte Produkte und Dienstleistungen für Verbraucherinnen und Verbraucher im BFSG-Kontext.

Was wird bei Anforderung 1.4 gefordert?

• 1.4.1 Verwendung von Farbe: Farbe darf nicht allein Informationen oder Zustände vermitteln.
• 1.4.2 Audio-Steuerung: Autoplay-Audio muss sich stoppen oder leiser stellen lassen.
• 1.4.3 Kontrast Minimum: Text braucht ein ausreichendes Kontrastverhältnis zum Hintergrund (4,5:1).
• 1.4.4 Textgröße ändern: Text muss sich ohne Funktionsverlust auf 200 % vergrößern lassen.
• 1.4.5 Bilder von Text: Text soll nicht als Bild verwendet werden, wenn echter Text möglich ist.
• 1.4.6 Kontrast Erweitert (Priorität II): Strengeres Kontrastniveau; in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet.
• 1.4.7 Hintergrundgeräusche (Priorität II): Sprach-Audio braucht klare Verständlichkeit; in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet.
• 1.4.8 Visuelle Präsentation (Priorität II): Textblöcke sollen gut anpassbar und lesbar sein; in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet.
• 1.4.9 Bilder von Text ohne Ausnahme (Priorität II): Textbilder nur in sehr begrenzten Fällen; in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet.
• 1.4.10 Reflow: Inhalte müssen bei schmalen Viewports ohne horizontales Scrollen nutzbar bleiben.
• 1.4.11 Kontrast von Nicht-Text-Inhalten: Bedienelemente und bedeutungsvolle Grafiken brauchen ausreichenden Kontrast.
• 1.4.12 Textabstand: Zeilen-, Wort-, Buchstaben- und Absatzabstände dürfen Text nicht unlesbar machen.
• 1.4.13 Eingeblendete Inhalte bei Zeigen oder Fokus: Hover- und Fokus-Inhalte müssen erkennbar, bedienbar und schließbar sein.

1.4.1 Verwendung von Farbe ohne alleinige Information

Farbe darf nicht die einzige Information sein, wenn Nutzerinnen und Nutzer etwas erkennen oder unterscheiden sollen. Wenn ein Formularfehler nur rot markiert ist, kann das Menschen ausschließen, die Rot nicht sicher wahrnehmen. Gleiches gilt für Diagramme, Statusanzeigen oder Links, bei denen die Bedeutung ausschließlich über Farbe transportiert wird. Die Anforderung verlangt zusätzliche Hinweise wie Text, Symbol oder Form.

Umsetzung: Fehler nicht nur rot markieren, sondern zusätzlich mit Text wie „Pflichtfeld fehlt" kennzeichnen. In einem Diagramm sollte jede Linie beschriftet sein oder ein Muster bekommen. Ein Linkzustand sollte sich nicht nur durch Blau, sondern auch durch Unterstreichung oder andere Merkmale abheben.

1.4.2 Audio-Steuerung bei automatisch startendem Audio

Wenn Audio automatisch startet und länger als drei Sekunden läuft, braucht es eine klare Möglichkeit zum Stoppen oder zur Lautstärkeregelung. Unerwarteter Ton kann Menschen stören, die mit Screenreader arbeiten oder sich in ruhiger Umgebung befinden. Die Anforderung schützt auch Nutzerinnen und Nutzer, die mehrere Inhalte parallel geöffnet haben. Wichtig ist, dass die Steuerung leicht erreichbar und nicht versteckt ist.

Umsetzung: Ein automatisch startender Videoplayer sollte eine sichtbare Pause-Taste und eine eigene Lautstärkeregelung haben. Besser ist es oft, Autoplay mit Ton ganz zu vermeiden. Wenn ein Hintergrundvideo eingesetzt wird, darf es nicht die einzige Form der Informationsvermittlung sein.

1.4.3 Kontrast Minimum für Text und Links

Text braucht genügend Kontrast zum Hintergrund, damit er lesbar bleibt. Wenn Schrift und Hintergrund zu nah beieinanderliegen, kann das Menschen mit Sehschwäche oder in schlechter Beleuchtung ausschließen. Die Regel gilt für normalen Text und Bilder von Text, mit Ausnahmen wie Logos oder großen Texten. Das Kontrastverhältnis von 4,5:1 ist der zentrale Prüfpunkt für normale Schrift.

Umsetzung: Farbpaare mit einem Kontrastwerkzeug prüfen – nicht nur nach Bauchgefühl. Dunkelgrau auf Weiß ist oft besser als helles Grau, und pastellige Farbkombinationen reichen häufig nicht aus. Auch Linktexte, Formulare und Infoboxen sollten auf ausreichenden Farbkontrast geprüft werden.

1.4.4 Textgröße ändern ohne Funktionsverlust

Text muss sich auf bis zu 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen. Das ist wichtig für Menschen, die größere Schrift brauchen, und auch für kleinere Displays oder Zoom-Nutzung. Wenn Layouts bei Vergrößerung brechen, kann das die Orientierung und Bedienung erschweren. Besonders kritisch sind feste Höhen und starre Container.

Umsetzung: Relative Einheiten wie rem oder em statt fester Pixelgrößen für Schrift verwenden. Container vermeiden, in denen größerer Text abgeschnitten wird, und die Seite mit 200 Prozent Zoom testen. Wenn Überschriften oder Buttons umbrechen, sollten sie trotzdem vollständig lesbar und bedienbar bleiben.

1.4.5 Bilder von Text vermeiden

Text sollte nicht als Bild eingesetzt werden, wenn echter Text technisch möglich ist. Bilder von Text lassen sich schlechter vergrößern, übersetzen oder mit Assistenztechnik auslesen. Sie werden vor allem dort problematisch, wo Inhalte häufig angepasst oder auf mobilen Geräten gelesen werden. Ausnahmen gibt es etwa bei Logos oder wenn die Darstellung selbst wesentlich ist.

Umsetzung: HTML-Text für Überschriften, Slogans und Schaltflächen verwenden statt grafischer Textbilder. Ein Kampagnenbanner sollte nicht nur als PNG mit Text vorliegen, wenn derselbe Inhalt als echte Überschrift möglich ist. Logos oder künstlerische Wortmarken sind typische Ausnahmen.

1.4.6 Kontrast Erweitert (Priorität II)

Diese Priorität-II-Anforderung verlangt ein strengeres Kontrastniveau als 1.4.3 und ist in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet. Sie ist für Menschen mit Sehschwäche besonders hilfreich, weil Texte und Bilder von Text noch leichter erkennbar werden. Für öffentliche Stellen und Projekte mit hohem Qualitätsanspruch ist sie eine sinnvolle zusätzliche Orientierung.

Umsetzung: Sehr klare Farbkontraste wählen und auch kleinere UI-Texte, Hilfetexte und Formularbeschriftungen prüfen. Ein dunkler Text auf hellem Hintergrund ist meist robuster als schwache Grautöne. Wenn Farbakzente genutzt werden, sollten sie nie die einzige Lesbarkeitshilfe sein.

1.4.7 Hintergrundgeräusche reduzieren (Priorität II)

Diese Priorität-II-Anforderung ist in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet. Sprache soll so verständlich bleiben, dass Hintergrundgeräusche sie nicht unnötig überlagern. Das betrifft vor allem aufgezeichnete Sprach-Audios mit Musik oder Umgebungsgeräuschen. Menschen mit Hörproblemen oder Konzentrationsschwierigkeiten profitieren besonders davon.

Umsetzung: Hintergrundmusik leiser halten als die Sprache oder ganz darauf verzichten, wenn sie keinen Mehrwert hat. Ein Lernvideo mit Erklärstimme sollte nicht von dauernder Musik begleitet werden, wenn das die Verständlichkeit mindert. Wenn Musik unvermeidbar ist, sollte eine Version ohne Musik angeboten werden.

1.4.8 Visuelle Präsentation von Text (Priorität II)

Diese Priorität-II-Anforderung ist ebenfalls in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet. Sie verlangt, dass Textblöcke gut lesbar bleiben, wenn Nutzerinnen und Nutzer Farben, Abstände, Ausrichtung und Schriftgröße anpassen. Das hilft besonders bei langen Texten und Lesestoff, der auf dem Bildschirm schnell ermüdet. Die Anforderung ist eng mit Textabstand und flexibler Typografie verknüpft.

Umsetzung: Eine ruhige, gut skalierbare Typografie verwenden und feste Layouts vermeiden, die sich nicht anpassen lassen. Ein längerer Wissensartikel sollte auch mit mehr Zeilenabstand oder schmalerem Textblock noch angenehm lesbar sein. Für Lesetexte sind umbruchfähige Layouts meist besser als starre Spalten.

1.4.9 Bilder von Text ohne Ausnahme (Priorität II)

Diese Priorität-II-Anforderung ist in EN 301 549 V3.2.1 nur informativ in Tabelle 9.1 gelistet. Sie verschärft die Regel aus 1.4.5: Textbilder sollen nur noch in sehr engen Ausnahmen eingesetzt werden, etwa wenn eine besondere Darstellung selbst wesentlich ist. Dadurch bleiben Texte besser skalierbar, lesbar und technisch zugänglich.

Umsetzung: Echte Schrift statt Textgrafiken verwenden, auch in Teasern und Bannern. Wenn ein markenbezogenes Wortbild unvermeidbar ist, sollte es die Ausnahme bleiben und nicht zum Standard werden. Normale Inhalte wie Überschriften oder Hinweise gehören als HTML-Text in den Quellcode.

1.4.10 Reflow für mobile Ansichten und Zoom

Reflow sorgt dafür, dass Inhalte auch bei schmalem Viewport ohne horizontales Scrollen nutzbar bleiben. Das ist besonders wichtig auf Mobilgeräten oder bei 400 Prozent Vergrößerung. Wenn Nutzerinnen und Nutzer ständig seitlich scrollen müssen, wird Lesen und Bedienen unnötig schwer. Die Anforderung betrifft nicht nur Text, sondern auch Layouts, Menüs und Tabellen.

Umsetzung: Responsiv bauen mit flexiblen Spalten, umbruchfähigen Boxen und ohne feste Breiten, die Inhalte abschneiden. Eine Tabelle sollte auf kleinen Bildschirmen entweder umbruchfähig oder anders sinnvoll dargestellt werden. Die Seite bei 320 CSS-Pixel Breite und bei 400 Prozent Zoom testen.

1.4.11 Kontrast von Nicht-Text-Inhalten

Nicht nur Text braucht Kontrast, sondern auch Bedienelemente und bedeutungsvolle Grafiken. Wenn Schaltflächen, Checkboxen oder Zustandsanzeigen kaum vom Hintergrund zu unterscheiden sind, können sie schwer erkennbar werden. Das betrifft auch Symbole, die Information tragen – etwa Warn- oder Statusicons. Der Kontrast muss so stark sein, dass das Element als Bedienobjekt oder Information sichtbar bleibt.

Umsetzung: Checkbox-Rahmen, Buttons, Fokusanzeigen und Icons mit einem Kontrastwerkzeug prüfen. Ein graues Icon auf hellgrauem Hintergrund ist oft zu schwach, selbst wenn der Text daneben lesbar ist. Auch die Zustände „aktiv", „inaktiv" oder „ausgewählt" sollten visuell klar unterscheidbar sein.

1.4.12 Textabstand und Lesbarkeit

Text muss lesbar bleiben, wenn Nutzerinnen und Nutzer Zeilen-, Wort-, Buchstaben- oder Absatzabstände anpassen. Das ist wichtig, weil manche Menschen mit größerem Abstand besser lesen können. Wenn ein Layout diese Abstände hart blockiert, kann der Text überlappen oder abgeschnitten werden. Die Anforderung schützt besonders längere Fließtexte und Formulare.

Umsetzung: Feste Textboxen mit zu geringer Höhe vermeiden und mit erhöhtem line-height und größerem letter-spacing testen. Ein Artikelabschnitt sollte auch bei mehr Abstand noch vollständig lesbar bleiben. Wenn sich durch Abstandseinstellungen Buttons verschieben, darf die Funktion nicht verloren gehen.

1.4.13 Eingeblendete Inhalte bei Zeigen oder Fokus

Wenn sich Inhalte bei Hover oder Fokus einblenden, müssen sie erkennbar, bedienbar und wieder schließbar sein. Typische Beispiele sind Tooltips, Dropdowns oder Hover-Menüs. Solche Inhalte können Menschen ausschließen, wenn sie zu schnell verschwinden oder den Fokus überdecken. Wichtig ist, dass die Nutzerin oder der Nutzer sie mit Tastatur oder Zeiger kontrollieren kann.

Umsetzung: Ein Hover-Menü sollte offen bleiben, solange es gebraucht wird, und sich nicht sofort schließen, wenn der Zeiger den Auslöser verlässt. Tooltips müssen per Tastatur erreichbar und wieder ausblendbar sein. Bei Fokuselementen sollte der eingeblendete Inhalt nicht wichtige Bedienelemente verdecken.

Häufige Fragen zu Anforderung 1.4

Einordnung in weitere Normen

Anforderung 1.4 basiert auf WCAG 2.2 Richtlinie 1.4. Im europäischen Standard EN 301 549 sind die Priorität-I-Anforderungen unter Abschnitt 9.1.4 normativ verankert. Die Priorität-II-Anforderungen 1.4.6–1.4.9 (WCAG AAA) sind dort nur informativ in Tabelle 9.1 gelistet.