Kompatibilität:

WebSite X5 Evo und Pro

Einer der wichtigsten Aspekte bei der Erstellung einer barrierefreien Website ist der Farbkontrast.


Ein unzureichender Kontrast kann eine erhebliche Hürde für Menschen mit Sehbehinderungen bei der Navigation darstellen. Daher ist es essenziell, der Farbauswahl besondere Aufmerksamkeit zu schenken und sicherzustellen, dass stets ein angemessener Kontrast gegeben ist. Dies verbessert nicht nur die Navigationserfahrung für Menschen mit Behinderungen, sondern trägt auch zu einem durchdachten und funktionalen Design bei, das allen Nutzern zugutekommt.


In dieser Anleitung behandeln wir:


Bedeutung und Wichtigkeit vom Farbkontrast

Der Farbkontrast bezeichnet den Helligkeitsunterschied zwischen Text (oder anderen Vordergrundelementen) und dem Hintergrund, auf dem er platziert ist. Dieser Helligkeitsunterschied wird als Verhältnis ausgedrückt und reicht von 1:1 (z. B. Weiß auf Weiß) bis 21:1 (z. B. Schwarz auf Weiß). Zur Orientierung gilt auf einem weißen Hintergrund:

  • Reines Rot (#FF0000) hat ein Kontrastverhältnis von 4:1. Zum Beispiel: "Ich bin rot".
  • Reines Grün (#00FF00) hat ein sehr niedriges Kontrastverhältnis von 1,4:1. Zum Beispiel: "Ich bin grün".
  • Reines Blau (#0000FF) hat ein Kontrastverhältnis von 8,6:1. Zum Beispiel: "Ich bin blau".

Anhand dieser Beispiele wird deutlich, dass ein unzureichender Kontrast das Lesen erschweren kann, insbesondere für Menschen mit Sehbehinderungen oder Erkrankungen wie Farbenblindheit. Daher sorgt ein ausreichender Kontrast für eine bessere Benutzerfreundlichkeit und Barrierefreiheit einer Website.


WCAG-Richtlinien – Erfolgskriterien zur Verbesserung des Farbkontrasts

Wie sollte der Farbkontrast richtig gehandhabt werden? Die Erfolgskriterien der Web Content Accessibility Guidelines (WCAG), auf die Bezug genommen wird, sind im Wesentlichen drei:

Zusätzlich gibt es das Erfolgskriterium 1.4.1 Verwendung von Farben, das sich auf das Kontrastverhältnis bezieht und angibt, wie Links korrekt behandelt werden sollten, die sich nur durch Farbe unterscheiden.


1.4.3 Kontrast (Minimum)

Laut den genannten Richtlinien muss Text einen ausreichenden Farbkontrast zum Hintergrund haben, auf dem er angezeigt wird, um gut lesbar zu sein. Zu diesem Zweck gibt das Kriterium Minimaler Kontrast vor, dass das Kontrastverhältnis mindestens 4,5:1 für normalen Text und 3:1 für großen oder fettgedruckten Text betragen muss.


Hier sind einige Beispiele für Text mit einem Kontrastverhältnis von fast genau 4,5:1.

  • Grau (#767676) auf Weiß
  • Violett (#CC21CC) auf Weiß
  • Blau (#000063) auf Grau (#808080)
  • Rot (#E60000) auf Gelb (#FFFF47)

Wie man sieht, sind einige dieser Kombinationen, obwohl sie das erforderliche Kontrastverhältnis erfüllen, nicht besonders gut lesbar. Deshalb ist das Verhältnis 4,5:1 der minimale Wert, den WCAG vorschreibt.


Es ist wichtig zu beachten, dass das Mindestkontrast-Kriterium auch für Text innerhalb eines Bildes gilt. Im folgenden Beispiel hat der Text nicht genügend Kontrast.


Die WCAG 2 spezifizieren zudem, dass die Farbe, die als Umrandung, Schattierung oder Hintergrund für Text verwendet wird, als Vordergrundfarbe betrachtet werden kann, wenn der Kontrast gemessen wird. Basierend auf dieser Spezifikation haben die folgenden Texte alle dasselbe Kontrastverhältnis. 


Schließlich gibt es einige Ausnahmen von der Mindestkontrastanforderung:

  • Großer Text: Laut WCAG ist dies Text mit einer Größe von mindestens 18 pt (24 px) oder 14 pt (18,67 px) in Fettdruck. Da dieser Text bereits leichter lesbar ist, wird das erforderliche Kontrastverhältnis auf 3:1 reduziert.
  • Unwesentlicher Text: Dazu gehören Texte in inaktiven Elementen (z. B. deaktivierte Schaltflächen), dekorative Texte, versteckte Texte oder Texte innerhalb von Bildern, die keine wichtigen Informationen enthalten.
  • Logos: Text, der Teil eines Logos oder eines Markennamens ist, muss keine Kontrastanforderungen erfüllen.


1.4.6 Kontrast (erweitert)

Die Einhaltung der Mindestkontrastanforderung stellt die Konformität mit Level AA sicher, das durch geltende Vorschriften vorgeschrieben ist. Die erweiterte Kontrastanforderung geht einen Schritt weiter und verlangt ein Kontrastverhältnis von 7:1 für normalen Text und 4,5:1 für größeren Text. Die Einhaltung dieses strengeren Kriteriums ist ein Schritt in Richtung Level AAA-Zugänglichkeit – sie wird empfohlen, ist aber nicht erforderlich.


1.4.11 Nicht-textlicher Kontrast

Das Kriterium für nicht-textlichen Kontrast (Level AA) legt fest, dass für Benutzeroberflächenkomponenten und grafische Objekte ein Kontrastverhältnis von mindestens 3:1 zwischen angrenzenden Farben erforderlich ist.


Zu den Benutzeroberflächenkomponenten gehören beispielsweise Schaltflächen und Formularfelder. Im Allgemeinen müssen alle Farben, die für verschiedene Zustände dieser Komponenten verwendet werden, das Kontrastverhältnis von 3:1 erfüllen, es sei denn, es werden die Standardstile des Browsers verwendet.


Hinsichtlich grafischer Objekte müssen diese nur dann das erforderliche Kontrastverhältnis einhalten, wenn sie für das Verständnis des Inhalts wesentlich sind und die Einhaltung die Bedeutung des Objekts nicht verändert. Fotos, Screenshots und Logos fallen in diese Kategorie: Auch wenn sie angrenzende Farben enthalten, die das Kontrastverhältnis nicht erfüllen, sollten sie nicht verändert werden.


1.4.1 Verwendung von Farben

Das Kriterium 1.4.1 verlangt, dass Farbe nicht das einzige visuelle Mittel zur Übermittlung bedeutungsvoller Informationen oder Anweisungen sein darf.


Betrachten wir ein Beispiel, um dieses Kriterium besser zu verstehen. Das einfache Markieren der Ränder nicht ausgefüllter Formularfelder in Rot ist nicht korrekt: Für Benutzer, die Rot nicht sehen oder unterscheiden können, wäre die Fehlermeldung nicht wahrnehmbar. Wenn jedoch zusätzlich zum roten Rand ein Warnsymbol angezeigt wird, wird die Nachricht für alle Benutzer verständlich.


Das Kriterium zur Verwendung von Farben überschneidet sich mit den Kontrastanforderungen, wenn Farbe das einzige Merkmal zur Unterscheidung eines Links ist. Wenn sich der Link innerhalb des Fließtexts befindet (nicht in Navigationsmenüs) und die Farbe das einzige Unterscheidungsmerkmal ist (weil die Unterstreichung entfernt wurde), müssen folgende Anforderungen erfüllt sein:

  • Der Linktext muss ein Kontrastverhältnis von 4,5:1 haben (Kriterium 1.4.3 Mindestkontrast).
  • Es muss ein Kontrastverhältnis von 3:1 zwischen dem Fließtext und dem Linktext bestehen (Kriterium 1.4.11 Nicht-textlicher Kontrast).
  • Es muss eine „visuelle Kennzeichnung“ (nicht nur eine Farbänderung) erscheinen, wenn der Mauszeiger über den Link bewegt wird, z. B. eine Unterstreichung (Kriterium 1.4.1 Verwendung von Farben).

Die gleichzeitige Erfüllung aller drei Anforderungen kann schwierig sein, insbesondere da sich die Linkfarben je nach Zustand ändern können. Aus diesem Grund ist die einfachste Lösung für optimale Zugänglichkeit und Benutzerfreundlichkeit oft die Beibehaltung der Unterstreichung von Links.


Farbkontrast in WebSite X5 verwalten

In WebSite X5 gibt es viele Situationen, in denen Sie eine Farbe festlegen oder die Textgröße definieren müssen: von der Anpassung von Stilen in verschiedenen Texteditoren bis hin zur Erstellung von Elementen wie Schaltflächen, Formularen und Galerien.


Die Software bietet volle Gestaltungsfreiheit, ohne Einschränkungen bei der Farbkombination. Es liegt jedoch in der Verantwortung des Nutzers sicherzustellen, dass der Kontrast ausreichend ist, um barrierefreie Seiten zu gewährleisten.


Zur Unterstützung dieser Überprüfung können Sie Online-Tools verwenden, die speziell entwickelt wurden, um zu prüfen, ob der Kontrast zwischen zwei Farben den von den WCAG festgelegten Standards zur Web-Barrierefreiheit entspricht. Zu den beliebtesten Tools gehören:


Hier sind einige Tipps, um den Farbkontrast richtig zu verwalten und die Barrierefreiheit Ihrer Website zu verbessern:

  • Verwenden Sie hohe Kontraste zwischen Text und Hintergrund.
  • Vermeiden Sie zu ähnliche Farbkombinationen, da sie den Text schwer lesbar machen können.
  • Stellen Sie sicher, dass der Text ausreichend groß und leicht lesbar ist.
  • Verwenden Sie Fettschrift oder Kursivschrift, um wichtige Informationen hervorzuheben.
  • Stellen Sie sicher, dass Links leicht erkennbar sind, ohne sich ausschließlich auf die Farbe zu verlassen.
  • Vermitteln Sie wesentliche Informationen nicht nur durch Farben, sondern kombinieren Sie diese mit anderen visuellen Indikatoren (z. B. Unterstreichungen oder Icons).


Durch die Befolgung dieser Richtlinien können Sie die Barrierefreiheit Ihrer Website verbessern und allen Nutzern eine optimale Navigationserfahrung bieten.