Inhaltsverzeichnis
Die folgenden Erläuterungen stellen lediglich einen Überblick über das Thema Kontraste dar. Wir bieten Hinweise und Empfehlungen, die dabei helfen sollen, digitale Inhalte schnell und effektiv barrierefreier zu gestalten. Diese Tipps richten sich an alle, unabhängig von ihren Vorkenntnissen, und sollen praktische Werkzeuge zur Verbesserung der digitalen Barrierefreiheit bereitstellen. Wir erheben keinen Anspruch auf Vollständigkeit. Diese Hinweise dienen als Orientierungshilfe und sollen eine erste Einführung in das Thema bieten.
Was sind Kontraste?
Kontraste beschreiben den Unterschied in Helligkeit oder Farbe zwischen zwei oder mehreren visuellen Elementen und ihrem Hintergrund. Im Fokus steht dabei, Texte, informationstragende Grafiken und grafische Bedienelemente bzw. deren Zustände klar wahrzunehmen und vom Hintergrund zu unterscheiden. Je höher der Kontrast, desto leichter lassen sich die Elemente voneinander abheben.
Warum sind Kontraste wichtig für die digitale Barrierefreiheit?
Die Einhaltung von Kontrastabständen ist ein wesentlicher Bestandteil der digitalen Barrierefreiheit, da sie die Wahrnehmbarkeit und Lesbarkeit von Inhalten verbessert. Dies ist besonders für Menschen mit eingeschränktem Sehvermögen, wie Sehschwächen, Farbenblindheit oder altersbedingten Beeinträchtigungen entscheidend. Menschen mit diesen Einschränkungen haben oft Schwierigkeiten, Inhalte mit geringer Helligkeits- oder Farbunterscheidung zu erkennen. Beispielsweise kann ein hellgrauer Text auf einem weißen Hintergrund für sie nahezu unsichtbar sein, während ein hoher Kontrast, wie schwarzer Text auf weißem Hintergrund, deutlich wahrgenommen wird.
Welche Nutzergruppen profitieren davon?
- Menschen mit Sehbeeinträchtigungen: Personen mit eingeschränktem Sehvermögen benötigen starke Kontraste.
- Menschen mit Farbsehschwächen: Farbkombinationen wie Rot-Grün oder Blau-Gelb können von Personen mit Farbsehschwäche nicht deutlich unterschieden werden. Durch bewusste Farbwahl und Kontrastgestaltung wird die Zugänglichkeit für diese Nutzenden erhöht.
- Ältere Menschen: Mit zunehmendem Alter nimmt die Fähigkeit, Kontraste zu erkennen, ab. Ein kontrastreicheres Design sorgt für bessere Lesbarkeit und Wahrnehmbarkeit.
- Alle Menschen: Guter Kontrast hilft jedem, Inhalte klarer und schneller zu erfassen, was die allgemeine Nutzerfreundlichkeit steigert.
Relevante WCAG-Erfolgskriterien
WCAG 1.4.1 – Benutzung von Farbe (Minimum)
Dieses Erfolgskriterium stellt sicher, dass Informationen nicht ausschließlich durch Farbe vermittelt werden. Das bedeutet, dass alle wichtigen Informationen auch ohne Farbwahrnehmung zugänglich sein müssen. Dies ist besonders wichtig für Menschen mit Farbenfehlsichtigkeit oder anderen Einschränkungen bei der Farbwahrnehmung. Weitere Informationen findet ihr auf der WCAG Seite zur Verwendung von Farbe.
WCAG 1.4.3 – Kontrast (Minimum)
Dieses Erfolgskriterium fordert einen Mindestkontrast von 4,5:1 für normalen Text (unter 24px bzw. ab 18,7px fettgedruckt) und 3:1 für große Schrift (ab 24px). Dies stellt sicher, dass Text und Hintergrund gut voneinander abgehoben sind, wodurch die Wahrnehmbarkeit erleichtert wird. Weitere Informationen findet ihr auf der WCAG Seite zu Mindestkontrasten
WCAG 1.4.6 – Kontrastverstärkung
Für Nutzende mit stärkeren Sehbeeinträchtigungen empfiehlt die WCAG für großen Text und wesentliche grafische Inhalte ein Kontrastverhältnis von 7:1 (AAA-Erfolgskriterium). Dieses ist zwar nicht in der europäischen Norm (EN 301 549) gefordert, aber sinnvoll, besonders bei mobiler Nutzung in schlechten Lichtverhältnissen, z. B. in der Bahn oder im Bus. Dieser erhöhte Kontrastwert verbessert die Wahrnehmbarkeit und Nutzerfreundlichkeit besonders für ältere Menschen und Personen mit eingeschränkter Sehfähigkeit. Weitere Informationen dazu findet ihr unter Kontrastverstärkung in der WCAG
WCAG 1.4.11 – Nicht-Text-Kontrast
Informationsgrafiken wie Diagramme sowie grafische Bedienelemente wie Buttons und Icons müssen einen Kontrast von mindestens 3:1 zu den direkt benachbarten Farben aufweisen, um für alle Nutzenden deutlich wahrnehmbar zu sein. Diese Vorgabe gilt nicht für Logos, Fotos, Screenshots, Flaggen etc. Details findet ihr in der WCAG Erklärung zu Nicht-Text-Kontrasten.
Praktische Umsetzung der WCAG-Erfolgskriterien
Informationen nur über Farbe vermittelt (WCAG- Erfolgskriterium 1.4.1)
Beispiel 1: Im Hauptmenü einer Webseite werden die aktuell ausgewählten Menüeinträge durch eine Farbänderung hervorgehoben.
Umsetzung: Die ausgewählten Menüeinträge sollten entweder einen Kontrastabstand von mindestens 3:1 zu benachbarten Einträgen aufweisen oder zusätzlich durch weitere visuelle Merkmale wie Unterstreichung oder Umrandung hervorgehoben werden.
Mit Kontrast-Tools lässt sich überprüfen, ob die gewählten Farbkombinationen die Kontrast-Anforderung erfüllen.
Beispiel 2: In einem Formular wird der Status eines Feldes mit Farben dargestellt:
- Grün für „gültig“.
- Rot für „ungültig“.
- Gelb für „unvollständig“.
Umsetzung: Es sollten Farbkombinationen gewählt werden, die für Menschen mit Farbsehschwächen gut unterscheidbar sind, wie z. B. Blau und Orange anstelle von Rot und Grün. Zusätzlich können Symbole wie ein Haken (✓), ein Kreuz (✕) oder ein Ausrufezeichen (!) verwendet werden, um die Statusanzeige auch unabhängig von Farben verständlich zu machen. Mit Tools wie einem Color Blindness Simulator lassen sich Farbpaletten auf ihre Zugänglichkeit prüfen und problematische Kombinationen vermeiden.
Ausreichender Kontrast zwischen Text und Hintergrund (WCAG- Erfolgskriterium 1.4.3 und 1.4.6)
Beispiel: Ein Abschnitt einer Webseite verwendet hellgrauen Text auf einem weißen Hintergrund.
Text ist schwer zu erkennen
Grafik 5: Hellgrauer Text auf weißem Hintergrund
Umsetzung:
Zur Erfüllung des WCAG-Erfolgskriterium 1.4.3 sollte der Mindestkontrast zwischen Text und Hintergrund 4,5:1 bei normaler Schrift (unter 24px bzw. ab 18,7px fettgedruckt) und bei größerer Schrift (ab 24px) 3:1 betragen.
Das WCAG-Erfolgskriterium 1.4.6 (erweiterter Kontrast, Level AAA) verlangt, dass der Kontrast zwischen Text und Hintergrund für normalen Text mindestens 7:1 beträgt und für großen Text mindestens 4,5:1.
Mit Kontrast-Checkern lässt sich sicherstellen, dass die gewählten Farbkombinationen diese Anforderung erfüllen.
Text ist schwer zu erkennen
Grafik 6: Schwarzer Text auf weißem Hintergrund
Interaktive Elemente deutlich hervorheben (WCAG 1.4.11)
Beispiel: Interaktive grafische Bedienelemente wie ein Play-Button (z. B. ein weißes Dreieck auf schwarzem Hintergrund) oder Navigationspfeile für „Vor“ und „Zurück“ in einem Karussell.
Umsetzung: Für eine gute Wahrnehmbarkeit müssen die Bedienelemente zu den benachbarten Farben ein Kontrastverhältnis von mindestens 3:1 aufweisen. Mit Kontrast-Tools lässt sich überprüfen, ob die gewählten Farbkombinationen diese Anforderung erfüllen.
Checkliste zur Kontrastgestaltung
- Informationen nur Farbe (WCAG-Erfolgskriterium 1.4.1)
- Der Kontrast wichtiger Informationen ist mindestens 3:1 zur Farbe des benachbarten Elements
- Wenn nicht, müssen die betreffenden Informationen (z. B. Links im Fließtext oder aktive Menüeinträge) durch zusätzliche visuelle Merkmale wie Unterstreichungen oder Umrandungen hervorgehoben werden.
- Farben wurden gewählt, die auch für Menschen mit Farbsehschwäche gut unterscheidbar sind
- Farbpaletten wurden auf ihre Zugänglichkeit überprüft und problematische Kombinationen vermieden
- Prüfung via eines Contrast Checkers
- Kontrast zwischen Text und Hintergrund (WCAG-Erfolgskriterium 1.4.3)
- Der Kontrast zwischen Text und Hintergrund erfüllt mindestens das Verhältnis 4,5:1 bei normaler Schrift (unter 24px bzw. ab 18,7px fettgedruckt) und bei größerer Schrift (ab 24px)
- Prüfung via eines Contrast Checkers
- Kontrast zwischen Text und Hintergrund (WCAG-Erfolgskriterium 1.4.6 AAA)
- Der Kontrast zwischen Text und Hintergrund erfüllt mindestens das Verhältnis 7:1 für normalen Text und 4,5:1 für große Schrift (mindestens 24px oder fettgedruckt in 18,7px)?
- Prüfung via eines Contrast Checkers
- Interaktive Elemente hervorheben (WCAG-Erfolgskriterium 1.4.11)✓
- Grafische Bedienelemente (z.B. Icons) haben einen ausreichend hohen Kontrast von mindestens 3:1 zu ihrem umliegenden Hintergrund
- Der Rahmen eines Bedienelements, welches nur durch den Rahmen erkennbar ist, hat mindestens ein Kontrastverhältnis von 3:1 zum Hintergrund
- Prüfung via eines Contrast Checkers
Tools
Coblis – Colora Blindness Simulator – Colblindor
Weitere Informationen
Handreichung zur barrierefreien Gestaltung von Webauftritten und Apps
Handreichung zur Erstellung barrierefreier User Interface-Elementen
Reference book for creating accessible user interface elements
WCAG Understanding Docs guideline 1.4
Die aufgeführten Tools und Informationen sind nicht als vollständig oder als die besten verfügbaren Lösungen zu verstehen. Sie dienen lediglich der ergänzenden Informationssammlung und sollen einen ersten Überblick über die verfügbaren Möglichkeiten bieten. Für eine umfassende Evaluierung empfehlen wir weiterführende Recherchen und den Vergleich mehrerer Optionen.