Digitales

Kontraste

Über Kontraste eine bessere Lesbarkeit erreichen

9 rote Gummibärchen und ein grüner stehen in 2 Reihen auf einem Tisch

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.

Checkliste - Kontraste

  1. Stellen Sie sicher, dass Texte auf Ihrer Webseite ein Kontrastverhältnis von mindestens 4,5:1 besitzen. Für größere Texte mit einer Schriftgröße ab 18 Punkten ist ein Kontrastverhältnis von 3:1 ausreichend. Dies gilt auch für Texte ab einer Schriftgröße von 14 Punkten, wenn sie zusätzlich gefettet sind.
  2. Für Infografiken und grafische Elemente, wie Icons, Eingabefelder oder Diagramme, gilt ein Kontrastverhältnis von mindestens 3:1.

Beispiele

Im Folgenden werden verschiedene Farben dargestellt, die die Anforderungen an die Barrierefreiheit erfüllen:

  • Dieser Text besitzt ein Kontrastverhältnis von 5,1:1
  • Dieser Text besitzt ein Kontrastverhältnis von 6,5:1
  • Das Kontrastverhältnis zwischen dem folgenden Eingabefeld und dem Hintergrund beträgt 3,3:1
Eingabefeld mit oranger Umrandung

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:

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.

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

Ihre Ansprechpartnerin

Foto von Kathrin Wille

Kathrin Wille
Telefon: 0 39 23 / 7 51 - 81
Nutzen Sie das Formular auf der Seite Kontakt Überwachungsstelle, um eine Nachricht an Frau Kathrin Wille zu übermitteln.