Kontraste

Über Kontraste eine bessere Lesbarkeit erreichen

Kennen Sie das Problem, dass Sie manche Texte nur schwer lesen können, weil die Schriftfarbe nicht gut zu erkennen ist? Dann ist diese Seite wahrscheinlich nicht barrierefrei. Auf was Sie achten müssen, damit die Schrift einen guten Kontrast zum Hintergrund hat, wollen wir in diesem Artikel erklären.

Schauen Sie sich einmal folgende Texte an und schätzen Sie ein, wie gut diese lesbar sind (Achtung: Nicht barrierefreie Darstellung):

Dies ist ein Text mit einem Kontrastverhältnis von 3,4:1
Dies ist ein Text mit einem Kontrastverhältnis von 1,6:1
Dies ist ein Text mit einem Kontrastverhältnis von 3,3:1
Dies ist ein Text mit einem Kontrastverhältnis von 1,4:1

Einige dieser Texte werden Sie besser lesen können als andere und doch haben sie eines gemeinsam: Keiner der oben aufgeführten Texte erfüllt die Anforderungen an die Barrierefreiheit. Das überrascht Sie vielleicht. Es zeigt aber auch, dass die Wahrnehmung, was ein „guter Kontrast“ ist, von Menschen unterschiedlich wahrgenommen wird. Um möglichst vielen Menschen das Lesen zu erleichtern, gibt es auch hier Anforderungen, wann ein Kontrast „gut“ und damit barrierefrei ist.

Texte

Insbesondere Menschen mit einer Sehschwäche haben große Probleme Texte überhaupt lesen zu können. Deshalb ist vor allem ein guter Kontrast notwendig. Doch welcher Kontrast ist ausreichend, welcher nicht? Da sich dies mit dem bloßen Auge nicht eindeutig einschätzen lässt, ermittelt man mit Hilfe verschiedener Tools ein sogenanntes Kontrastverhältnis. Dieses ergibt sich aus dem Kontrast zwischen Hintergrundfarbe und dem darauf liegenden Text.

In der Regel wird schwarzer Text auf weißem Hintergrund verwendet. Dies entspricht dem höchstmöglichen Kontrastverhältnis von 21:1. In Bezug auf die Barrierefreiheit ist für Texte auf Ihrer Webseite ein Kontrastverhältnis von mindestens 4,5:1 erforderlich.

Es gibt aber auch einige Ausnahmen: Dekorative Texte und Textlogos sind von dieser Anforderung ausgenommen. Für größere Texte mit einer Schriftgröße ab 18 Punkten (abgekürzt pt) ist bereits ein Kontrastverhältnis von 3:1 ausreichend. Dieses Kontrastverhältnis gilt auch für Texte ab einer Schriftgröße von 14 pt, wenn sie zusätzlich gefettet sind.

Bedienelemente

Neben Texten ist es auch wichtig, grafische Elemente auf einer Webseite zu erkennen. Dies betrifft insbesondere Infografiken und Formularfelder. Hier ist ein Kontrastverhältnis von mindestens 3:1 erforderlich. Damit wird sichergestellt, dass zum Beispiel Diagramme, Icons oder leere Eingabefelder in einem Kontaktformular gut erkennbar sind.

Weitere Informationen zu den Anforderungen an Barrierefreiheit

Die Checkliste auf dieser Seite soll Ihnen als erster Einstieg in das Thema dienen. Sie gewährleistet keinen Anspruch auf Vollständigkeit. Zentrale Regelwerke mit weiterführenden Informationen finden Sie:

•  in der Europäischen Norm (EN) 301 549 (externes Dokument öffnet in englischer Sprache in neuem Fenster) und
•  in der Richtlinie der Web Content Accessibility Guidelines (externer Link öffnet in englischer Sprache in neuem Fenster), kurz WCAG 2.1.

Weitere Informationen zur EN 301 549 und zum Aufbau der WCAG finden Sie auch in unseren Normen und Richtlinien zur Barrierefreiheit.

Erfolgskriterien der WCAG zum Thema Kontraste

Die Anforderungen an die Barrierefreiheit sind in den WCAG als Erfolgskriterien festgeschrieben. Ein Thema kann dabei auch in mehrere Erfolgskriterien behandelt werden. Im Folgenden erhalten Sie eine Übersicht der erforderlichen WCAG-Kriterien zum Thema Kontraste.

• WCAG Erfolgskriterium WCAG 1.4.3 „Kontrast (Minimum)“ (externer Link öffnet in englischer Sprache in neuem Fenster)
• WCAG Erfolgskriterium WCAG 1.4.11 „Nicht-Text Kontrast“ (externer Link öffnet in englischer Sprache in neuem Fenster)

Kontrast für Nicht-Text
(Erfolgskriterium WCAG 1.4.11)

Für die visuelle Präsentation der folgenden Elemente muss ein Mindestkontrast von 3:1 zu benachbarten Farben gelten:

• Komponenten: Visuelle Information, die zur Identifikation von Komponenten der Benutzerschnittstelle und deren Zustand benötigt werden
  • Ausnahme: bei interaktiven Komponenten und wo das Aussehen der Komponente vom Benutzeragenten bestimmt wird und nicht durch den Autor verändert wurde.
• Grafische Objekte: Teile der Grafik, die nötig sind, um den Inhalt zu verstehen
  • Ausnahme: wenn eine bestimmte Präsentation der Grafik wesentlich für die übermittelte Information ist