Barrierefreiheit im Web: Kontraste für alle Nutzer optimieren

Eine barrierefreie Internetpräsenz bedeutet, dass alle Nutzerinnen und Nutzer – unabhängig von ihren individuellen Fähigkeiten und Einschränkungen – die Webseite ohne Schwierigkeiten nutzen können. Farben und Kontraste spielen dabei eine wichtige Rolle, denn sie beeinflussen maßgeblich die Lesbarkeit von Texten und anderen Inhalten auf einer Webseite.

Im Folgenden erfährst du, welche Aspekte du bei der Gestaltung von Kontrasten auf deiner Webseite beachten solltest.

Viele bunte Dreiecke die unterschiedlich angeordnet sind. — Bild von Gerd Altmann über die Plattform Pixabay

Was genau ist 'Kontrast'?

Unter Kontrast bei Farben versteht man den Unterschied zwischen den Helligkeits- oder Farbwerten von zwei oder mehr Farben, die nebeneinander platziert oder aufeinanderfolgend verwendet werden. Ein hoher Kontrast bedeutet, dass die Farben stark voneinander abweichen, während ein geringer Kontrast bedeutet, dass die Farben ähnlicher sind.

Ein Beispiel für hohen Kontrast wäre schwarze Schrift auf weißem Hintergrund, da das Schwarz sehr dunkel und das Weiß sehr hell ist. Ein Beispiel für geringen Kontrast wäre helle graue Schrift auf weißem Hintergrund, da die Farben ähnlicher sind und weniger Unterschiede aufweisen.

Kontrast ist ein wichtiges Element im Design, da er die Lesbarkeit und die visuelle Wirkung von Texten und Grafiken beeinflusst. Ein hoher Kontrast kann dazu beitragen, dass Texte und Grafiken besser lesbar sind und sich deutlicher von ihrem Hintergrund abheben, während ein geringer Kontrast zu einer schlechteren Lesbarkeit und einer weniger klaren visuellen Wirkung führen kann.

Farben und Kontraste im barrierefreien Web

Wenn es um barrierefreie Internetpräsenz geht, ist es wichtig, Farben und Kontraste entsprechend einzusetzen und zu gestalten. Denn nicht alle Nutzer können Farben gleich wahrnehmen, und manche sehen Farben nur sehr eingeschränkt oder gar nicht. Ein ausreichender Kontrast ist daher unverzichtbar, um die Inhalte auf einer Webseite für alle Nutzerinnen und Nutzer zugänglich zu machen.

Testen des Kontrast

Um den Kontrast einer Webseite zu testen, gibt es verschiedene Werkzeuge, die dir dabei helfen können. Eines der bekanntesten ist beispielsweise der Contrast Checker von der englisch-sprachigen Seite von WebAIM. Hier kannst Du Deine Farben eintragen und direkt prüfen lassen, ob der Kontrast ausreichend ist oder nicht. Auch Browser-Erweiterungen wie Lighthouse, ist bereits in die Web Developer Tools vom Google Chrome integriert, oder die Firefox Accessibility Extension bieten dir die Möglichkeit, den Kontrast auf deiner Webseite zu überprüfen.

Techniken, Tools und Plugins

Eine gute und einfache Möglichkeit den Kontrast einer Webseite zu testen, ist sich eine schwarz-weiss bzw. Graustufenversion davon zu erstellen. Hier kann man schnell erkennen ob Kontraste an den wichtigen Stellen ausreichen oder nicht.

Es gibt verschiedene Tools und Plugins, mit denen man eine Webseite in Graustufen darstellen kann, um den Kontrast zu prüfen. Hier sind einige Möglichkeiten:

Browser-Erweiterungen: Es gibt verschiedene Erweiterungen für gängige Webbrowser wie Google Chrome, Mozilla Firefox und Microsoft Edge, mit denen man eine Webseite in Graustufen umwandeln kann. Ein Beispiel hierfür ist Webpage Grayscale für Google Chrome.
Online-Tools: Es gibt auch verschiedene Online-Tools, die eine Webseite in Graustufen umwandeln, wie z.B. "GrayBit", "Grayscale Tool" oder "Gray Scale".
Farbkontrast-Checker: Einige Farbkontrast-Checker-Tools, wie z.B. der von WebAIM, bieten auch die Möglichkeit, eine Webseite in Graustufen anzuzeigen, um den Kontrast zu prüfen.

Es ist jedoch wichtig zu beachten, dass die Umwandlung einer Webseite in Graustufen nicht immer eine genaue Darstellung des tatsächlichen Kontrasts ergibt, da dies von verschiedenen Faktoren abhängt, wie z.B. der Bildschirmauflösung und den Farbeinstellungen des Betrachters. Es empfiehlt sich daher, verschiedene Tools und Methoden zur Überprüfung des Kontrasts zu kombinieren, um ein genaues Ergebnis zu erzielen.

WCAG Vorgaben

Die Vorgaben für die Barrierefreiheit von Webseiten sind in den Web Content Accessibility Guidelines (WCAG) festgelegt. Diese Richtlinien werden in drei Stufen unterteilt: A, AA und AAA. Jede Stufe enthält verschiedene Anforderungen, die erfüllt werden müssen, um die entsprechende Stufe zu erreichen. Für eine barrierefreie Webseite empfehlen sich mindestens die Anforderungen der Stufe AA, da diese bereits viele wichtige Kriterien abdecken.

Die WCAG verlangen beispielsweise, dass der Kontrast zwischen Text und Hintergrund ausreichend sein muss, damit der Text gut lesbar ist. Dabei wird zwischen normalen Texten und größeren Texten (wie Überschriften) unterschieden. Der Kontrast zwischen normalen Texten und Hintergrund sollte mindestens 4,5:1 betragen, während der Kontrast bei größeren Texten bei mindestens 3:1 liegen sollte.

Aber nicht nur der Kontrast zwischen Text und Hintergrund ist wichtig. Auch der Kontrast zwischen anderen Elementen auf der Webseite muss ausreichend sein, um eine gute Lesbarkeit zu gewährleisten. So sollten beispielsweise Links von umgebendem Text durch ausreichend hohen Kontrast unterschieden werden.

Zusammenfassend lässt sich sagen, dass barrierefreie Internetpräsenz auch die Berücksichtigung von Farben und Kontrasten erfordert. Der Kontrast von Texten und anderen Elementen auf einer Webseite sollte ausreichend hoch sein, um eine gute Lesbarkeit für alle Nutzer sicherzustellen. Es gibt verschiedene Werkzeuge, mit denen du den Kontrast auf deiner Webseite überprüfen kannst, und die WCAG enthalten detaillierte Anforderungen an die Gestaltung von Webseiten.