Kontraste von Texten, Grafiken und Bedienelementen

Der Kontrast ist ein Unterscheidungsmerkmal für den Helligkeitsverlauf eines Bildes oder zwischen zwei Bildpunkten. Allgemein betrachtet geht es um das Verhältnis zwischen hellen und dunklen Farben. Das Kontrastverhältnis 10:1 besagt, dass eine Farbe um das 10-fache heller als eine andere Farbe ist. Kontraste ermöglichen Besuchenden des digitalen Angebots den Vordergrund vom Hintergrund und Hervorgehobenes von Normalem zu unterscheiden. Je besser die Kontrastwerte von Texten, Textgrafiken, Grafiken und Bedienelementen zum Hintergrund sind, umso besser ist deren Lesbarkeit. Sehbehinderte und sehschwache Menschen, sowie Menschen mit einer Farbsehschwäche profitieren von guten Kontrasten.

Oft werden Farbkombinationen für Vorder- und Hintergrund benutzt, die zueinander schlechte, also unzureichende Kontrastwerte aufweisen. So können notwendige visuelle Informationen sowie Bedienelemente und deren Zustände nicht oder nur schlecht erfasst werden.

• 1.4.1 Benutzung von Farbe
• 1.4.3 Kontrast (Minimum)
• 1.4.11 Kontrast für Nicht-Text
• 2.4.7 Fokus sichtbar

Die nach der EU-Norm vorgegebenen Kontrastwerte für Text und Grafik werden nicht beachtet bzw. es werden Techniken wie Transparenz oder Unschärfe benutzt.

Die notwendigen Mindestwerte für das Kontrastverhältnis sind für Text und Textgrafiken in kleiner Schrift mit 4,5:1, in großer Schrift mit 3:1 angegeben. Als große Schrift gilt Text mit einer Größe von mindestens 18 pt (Punkt) oder 24 px (Pixel nach CSS) oder 14 pt bei fetter Schrift. Als kleine Schrift gilt Text mit einer Größe von unter 18 pt oder unter 24 px oder unter 14 pt bei fetter Schrift. Für Grafiken und Bedienelemente gilt das Kontrastverhältnis 3:1. Die im CSS angegebenen Farbwerte für den Hintergrund, den Text und die Bedienelemente müssen den EU-Vorgaben entsprechen. Wenn eine Textfarbe definiert wird, muss auch immer eine passende Hintergrundfarbe festgelegt werden. Empfehlenswert ist bei bedeutungstragenden Texten, Grafiken und Bedienelementen auf die Anwendung von Transparenz- und Unschärfe-Attributen zu verzichten. Des Weiteren gilt zu beachten, dass Text auf Hintergrundbildern ohne eine unterlegte Farbe seine Lesbarkeit stark einschränken kann (siehe Abb. 1).

Ein besonderes Augenmerk liegt auf den verschiedenen Zuständen, die der Link, die Grafik oder das Bedienelement einnehmen kann. Dabei muss trotzdem das den Vorgaben entsprechende Kontrastverhältnis erfüllt sein. Das folgende Beispiel soll verdeutlichen, welchen Umfang diese möglichen Zustände haben können.

Es braucht beispielsweise mindestens 15 Prüfschritte, um die Konformität dieses einfachen Kontrollkästchens mit Beschriftungstext und Link, mit den WCAG-Anforderungen für Kontrast und Farbverwendung zu testen.

Für die WCAG-Konformität erfordert dieses einfache Beispiel:

Mindestens 4,5:1 Kontrast zwischen:

1. Beschriftungstext - Hintergrund
2. Linktext - Hintergrund
3. Linktext – Mauszeiger (Hover)
4. Linktext – Tastaturfokus
5. Linktext – aktiv
6. Linktext – besucht

Mindestens 3:1 Kontrast:

1. zwischen Labeltext und Linktext
2. visueller Hinweis, wenn der Link den Tastaturfokus hat
3. visueller Hinweis, dass das Kontrollkästchen den Tastaturfokus hat
4. Checkbox-Rahmen – Standard (unfokussiert)
5. Checkbox-Rahmen – Mauszeiger (Hover)
6. Checkbox-Rahmen – Tastaturfokus
7. Checkbox-Rahmen – aktiv (onclick)
8. Checkbox-Rahmen – aktiviert
9. Das Häkchen, das das Kontrollkästchen anzeigt, ist aktiviert.

Quelle: Bewertung von Farbe und Kontrast - Wie schwer kann das sein?

Dies schließt mögliche Farb- und Kontrastprobleme im Zusammenhang mit Fehlerzuständen oder Rückmeldungen nicht ein. Daher ist 15 die niedrigste Anzahl von erforderlichen Prüfungen.

• TPGi: Colour Contrast Analyser (CCA)
• WCAG 2.1 - 1.4.6 Kontraste von Texten ausreichend (erweitert)
• WCAG 2.1 - 1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend

Informationen zu diesem Artikel

Datum:

11.07.2023

Lizenz:

CC-BY-SA 4.0

Version:

1.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!