Berechnen Sie das Kontrastverhältnis zwischen der Textfarbe und der Hintergrundfarbe mit einem Kontrastwerkzeug. Das Kontrastverhältnis sollte mindestens 4,5:1 für normalen Text und 3:1 für großen Text betragen. Die Anforderungen gelten für echten Text, aber auch für Textbilder.

Wie wendet man das an?

Wenn Sie die folgenden Anforderungen erfüllen, ist der Text auf Ihrer Webseite in Bezug auf den Farbkontrast barrierefrei zugänglich:

  1. Für alle Texte (mit Ausnahme der nachfolgend beschriebenen Ausnahmen) erfüllt der Kontrast zwischen Vorder- und Hintergrundfarbe die folgenden Anforderungen:
    1. "Normaler" Text hat ein Kontrastverhältnis von 4,5:1, oder höher
    2. "Großer" Text hat ein Kontrastverhältnis von 3:1, oder höher
  2. Alternative zu Punkt 1: Es gibt einen Link oder eine Schaltfläche (mit ausreichendem Kontrast), über die Besucher zu einer Version der Webseite wechseln können, die den Anforderungen an den Kontrast entspricht. Dies wird oft als "kontrastreiche" Version bezeichnet.
  3. 3. Sowohl die Farbe des Textes, als auch die Farbe des Hintergrundes sind in der CSS-Datei definiert.
 

Tipp: Testen Sie das Kontrastverhältnis mit einem Kontrastwerkzeug

Testen Sie das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe mit einem Kontrastwerkzeug.

Ausnahmen

Die Anforderungen gelten nicht für:

  1. Text auf Schaltflächen und anderen inaktiven Elementen (z.B. eine Schaltfläche, die Sie nicht anklicken können).
  2. Rein dekorativer Text, z.B. ein Hintergrundmuster mit Buchstaben, die keine weitere Bedeutung haben.
  3. Text, der sich zufällig auf einem Foto befindet, aber nicht der Grund dafür ist, dass das Foto angezeigt wird (der Text selbst hat keinen informativen Wert).
  4. Text, der Teil eines Logos oder einer Marke ist.

„Normaler“ und „großer“ Text

Der erforderliche Kontrast hängt von der Größe des Textes ab. Unterschiedliche Geräte und Bildschirmgrößen zeigen Buchstaben in unterschiedlichen Größen an, da es Unterschiede in der Berechnung und Auflösung gibt. Die Art der Schrift selbst beeinflusst auch die Lesbarkeit. Eine „dünne“ und „schmale“ Schrift ist weniger lesbar, als eine schwere und breite Schrift.

In den Anforderungen an die barrierefreie Zugänglichkeit werden die Textgrößen, die „normal“ und „groß“ entsprechen, in der Maßeinheit „Punkt“ (pt) angegeben. Dies ist eine absolute Einheit, die nicht für den Einsatz im Web, sondern nur für den Druck geeignet ist.

  • „Normale“ Textgröße bezieht sich auf eine Größe von 14 Punkten oder weniger. Das entspricht etwa 1,2 em oder 120 %. Der Standardtext sollte dann auf 100 % gesetzt werden.
  • „Großer Text“ bezeichnet eine Größe von mindestens 18 Punkten oder 14 Punkten in Fettdruck. Das entspricht etwa 1,5 em oder 150 %.
 

Wollen Sie auf Nummer sicher gehen?

Wenn Sie auf Nummer sicher gehen wollen, folgen Sie einfach den Kontrastanforderungen für normalen Text für alle Texte, auch wenn er größer dargestellt wird.

Beispiele

Hintergrundbild

Auch wenn Sie ein Bild als Hintergrund unter einem Text verwenden, sollte der Kontrast zwischen dem Bild und dem Text ausreichend sein. Sie können dies überprüfen, indem Sie die Farben aus dem Hintergrundbild, die der Farbe des Textes am nächsten liegen, mit der Textfarbe vergleichen.

  • Wenn der Text weiß ist, wählen Sie die hellsten Farben aus dem Hintergrundbild.
  • Wenn der Text schwarz ist, wählen Sie die dunkelsten Farben.

Darüber hinaus können Sie auch gezielt sehen, welche Teile des Bildes wirklich hinter dem Text stecken und diese Farben vergleichen. Bitte beachten Sie, dass die Position des Hintergrundbildes, je nach Gerät und Bildschirmgröße, variieren kann.

Schatten und Rand um den Text herum

Eine Möglichkeit, den Kontrast zwischen Text und Hintergrund zu verbessern, besteht darin, einen Rahmen um jeden Buchstaben oder einen Schatten hinter dem Text zu platzieren.

  • Bei einem Rahmen verwenden Sie die Farbe des Rahmens als Vordergrundfarbe, anstelle der Farbe des Buchstabens selbst.
  • Bei einem Schatten verwenden Sie die Farbe des Schattens als Hintergrundfarbe, anstelle der ursprünglichen Hintergrundfarbe.
 

Wie trägt dies zu einer besseren Webseite bei?

Durch den ausreichenden Kontrast zwischen Text und Hintergrund stellen Sie sicher, dass die Farbe nicht mehr entscheidend dafür ist, ob ein Text wahrgenommen werden kann oder nicht.

Studien haben gezeigt, dass die oben genannten Kontrastverhältnisse für Menschen mit unterschiedlichen Sehbehinderungen, wie z.B. verschiedenen Formen der Farbenblindheit, ausreichend sind. Menschen, die altersbedingt weniger Kontrast wahrnehmen können, profitieren auch von Texten mit ausreichendem Kontrast.

Für Designer (Ersteller)

Der Ersteller muss sicherstellen, dass der Farbkontrast überall ausreichend ist. Er sollte sich auch die Farben für einen besuchten Link überlegen.

Für Developer (Entwickler)

Der Entwickler muss sicherstellen, dass bei der Umwandlung des Designs in Code die genauen Farben beibehalten werden. Der Entwickler kann Einschränkungen in das CMS einbauen, so dass Redakteure bei der Erstellung und Bearbeitung der Inhalte der Webseite keine niedrigen Farbkontraste verwenden können.