Saturday, November 26, 2022
HomeOutsourcingBarrierefreie Farben: Wie du die Richtlinien für barrierefreie Webseiten einhältst

Barrierefreie Farben: Wie du die Richtlinien für barrierefreie Webseiten einhältst


Farbe ist ein äußerst gutes Mittel, um eine sofortige Beziehung zu den Besuchern und Besucherinnen einer Web site herzustellen. Sie kann durch eine ansprechende Ästhetik zu einem starken ersten Eindruck beitragen. Sie kann die Aufmerksamkeit der Leute auf die wichtigsten Elemente einer Seite lenken. Vor allem aber kann sie die Stimmung festlegen und den Unterschied zwischen hell und freundlich oder stimmungsvoll und elegant ausmachen. Doch was von unschätzbarem Wert ist, kann schnell zu einem Hindernis werden, wenn Designer und Designerinnen nicht bedenken, wie unterschiedlich Consumer Farben wahrnehmen. Deshalb ist es wichtig, beim Designen einer Web site an barrierefreie Farben zu denken.

Illustration von OrangeCrush

Barrierefreie Farben für Webseiten sollen sicherstellen, dass Farben ihr volles Potenzial ausschöpfen: Sie sollen das Weberlebnis verbessern, nicht schmälern. Tatsächlich führt barrierefreies Design oftmals zu einer Web site, die intuitiver für alle Besucher und Besucherinnen ist. Daher wollen wir uns anschauen, was man bei der Wahl der Web site-Farben berücksichtigen muss, um diese barrierefrei zu gestalten.

Ein kurzer Überblick über barrierefreie Webseiten

Eine Web site barrierefrei zu gestalten bedeutet, eine Web site so zu designen (sowohl die visuelle Gestaltung des Entrance-Ends als auch den Code des Again-Ends), dass sie auch von Usern mit Einschränkungen genutzt werden können. Es gibt viele verschiedene Einschränkungen – beispielsweise Sehschwächen, Hörschwächen und Bewegungseinschränkungen – und Designer und Designerinnen werden entscheiden, auf welche Situationen sie sich konzentrieren wollen, und dafür Lösungen entwickeln.

Zu den häufigen barrierefreien Funktionen einer Web site zählen: die Unterstützung einer einfachen Navigation per Tastatur, Bereitstellung von Alt-Textual content zur Beschreibung von Bildern und Sicherstellung, dass eine Web site aufgrund von zu großem Textual content nicht umbricht. In diesem Artikel werden wir uns auf barrierefreie Farben konzentrieren, aber es lohnt sich ohne Zweifel auch, sich anzuschauen, wie Barrierefreiheit als Ganzes funktioniert.

Illustration von zwei Kindern, die Rollstuhlbasketball spielen
Illustration von pwsatya

Erfahre mehr über barrierefreies Webdesign >>

Barrierefreie Webseiten sind in vielen Ländern zudem eine rechtliche Angelegenheit, wobei die Nichteinhaltung der Barrierefreiheit einer Diskriminierung gleichkommt. In den USA gilt beispielsweise der Individuals with Disabilities Act und 2019 bestätigte der Oberste Gerichtshof der USA, dass Webseiten unter den ADA fallen, was Usern in bestimmten Situationen die Möglichkeit gibt, Unternehmen zu verklagen, die ihre Webseiten nicht barrierefrei gestalten.

Die Internet Content material Accessibility Tips (WCAG) für Farben

Internetstandards werden vom World Broad Internet Consortium (W3C) festgelegt. Dabei handelt es sich um ein Gremium, welches aus Hunderten von Organisationen besteht. Für die Barrierefreiheit hat das W3C die Internet Content material Accessibility Tips (WCAG) herausgegeben, um Entwicklern und Designschaffenden bestimmte Maßstäbe an die Hand zu geben. Wir werden uns in diesem Artikel auf die WCAG beziehen, da diese worldwide anerkannte Requirements enthalten.

Ein farbenfrohes Webseitendesign für eine Speiseeismarke
Webdesign von Hiroshy

Anmerkung: Als dieser Artikel verfasst wurde, waren die 2018 veröffentlichten WCAG 2.1 die aktuellste Model. Die aktualisierten WCAG 2.2 werden voraussichtlich im Sommer 2022 veröffentlicht.

Die Richtlinien des WCAG, die sich auf das Thema Farben beziehen, fallen größtenteils unter Sehbehinderungen. Ihr Fokus liegt auf Kontrast, um sicherzustellen, dass Textual content deutlich vom Hintergrund zu unterscheiden ist. Die Richtlinien legen besonderes Augenmerk darauf, wie Farben als optische Hinweise genutzt werden, und geben vor, dass andere Elemente vorhanden sein müssen, um diese Hinweise zu verdeutlichen. Die Farbe muss auch in Formatierungscodes wie CSS angegeben werden (auch wenn sie standardmäßig weiß oder schwarz ist), damit die Barrierefreiheit genau gemessen werden kann.

Häufige Einschränkungen, die im Zusammenhang mit Farben stehen

Stand 2021 schätzt die Weltgesundheitsorganisation, dass mindestens 1 Milliarde Menschen weltweit mit einer Kind von Behinderung leben, Tendenz steigend. Dabei handelt es sich um dokumentierte, messbare Fälle. Behinderungen gibt es in verschiedenen Schweregraden und manche können von der betroffenen Individual größtenteils völlig unbemerkt bleiben. Außerdem sind Behinderungen häufig mit Stigmata versehen, was einige Menschen daran hindert, sie diagnostizieren zu lassen oder gar anzuerkennen, dass sie eine Behinderung haben.

Buntes Webseitendesign für eine Psychologiemarke
Webdesign von Realysys

Behinderungen können auch temporär und/oder situationsabhängig sein. Beispielsweise wird jeder Mensch, der draußen in starkem Sonnenlicht auf einen Bildschirm schaut, von der Sonne geblendet sein. Die Möglichkeit, in einer solchen Scenario manuell die Helligkeit und den Kontrast des Bildschirms einstellen zu können, ist eine Kind der assistiven Technologie, die vom Hersteller bereitgestellt wird. Deshalb ist Barrierefreiheit im Design ein weitaus umfassenderes Thema, als vielen Menschen bewusst ist. Webseiten barrierefrei zu gestalten ist nicht nur moralisch richtig, sondern schlicht gesunder Menschenverstand.

Lass uns daher Behinderungen ansehen, die im Zusammenhang mit der Farbwahrnehmung stehen. Natürlich können Behinderungen komplex und unterschiedlich sein, aber für diesen Artikel werden wir allgemeine Definitionen verwenden, um den Kontext zu verdeutlichen. Das W3C stellt ausgezeichnete Quellen zur Verfügung, wenn du dich über diese Beeinträchtigungen genauer informieren möchtest.

Schwarz-weißes Landingpage-Design für eine Modemarke
Landingpage-Design von UD_Pro
  • Farbenblindheit: Der Begriff „Farbenblindheit“ kann irreführend sein – er bedeutet nicht, dass die Individual Farben überhaupt nicht sehen kann. Der Schweregrad kann von Individual zu Individual unterschiedlich sein, da manche Menschen nur eine oder verschiedene Farben nicht sehen können.
  • Sehschwäche: Dieser Begriff beschreibt einen Menschen, dessen Sehvermögen eingeschränkt ist, ohne dass er völlig blind ist. Sein Blick könnte verschwommen, unkoordiniert oder eingeschränkt sein (der Begriff Tunnelblick meint beispielsweise, dass ein Consumer nur in der Lage ist, die Mitte des Bildschirms zu sehen, wohingegen der Verlust des zentralen Sichtfelds das Gegenteil bedeutet).
  • Lern- und/oder Wahrnehmungsstörungen: Hier sprechen wir hauptsächlich über Aufmerksamkeitsdefizit-Störung mit Hyperaktivität (ADHS bzw. die Schwierigkeit, sich über einen längeren Zeitraum zu konzentrieren) und Lese-Rechtschreib-Schwäche (das Vertauschen von Wörtern während des Lesens). Die Nutzung mehrerer Farben kann in diesen Fällen ablenken. Doch wenn sie intestine eingesetzt werden, können Farben viel dazu beitragen, die Aufmerksamkeit aufrechtzuerhalten.

Wie Farbe auf einer Web site genutzt wird

Als essenzielles Designelement ist Farbe ein starkes Mittel, um auf visuelle Weise zu kommunizieren. Sie ist so nützlich, dass sie oftmals intuitiv eingesetzt wird, ohne sich darüber bewusst zu sein, wie sie funktioniert. Um die für die Barrierefreiheit verwendeten Farben neu zu bewerten, sollten wir uns genauer ansehen, zu welchen Zwecken Farbe auf einer Web site eingesetzt wird.

Design einer Dark-Mode-Webseite für eine Fitness-App
Farbe kann genutzt werden, um eine visuelle Hierarchie zu erzeugen und den Blick der Betrachter auf der Seite zu lenken.  Webdesign von andrei2709

Grundsätzlich werden Farben genutzt, um etwas zu kennzeichnen, Aufmerksamkeit auf etwas zu lenken und Suggestions zu geben. Darüber hinaus werden Farben genutzt für…

  • Branding – Ein charakteristisches Farbschema ist ein wichtiger Teil der visuellen Identität eines Unternehmens. Denke nur mal an das Rot von Netflix oder das Blau von Twitter. Farbe dient in diesen Fällen als visuelle Abkürzung für den Markennamen. Dies ist zwar wichtig, läuft aber oft im Hintergrund und auf einer unterbewussten Ebene ab.
  • Visuelle Hierarchie – Farbe kann genutzt werden, um Akzente zu setzen und eine Seite zu strukturieren und so visuelle Orientierungspunkte für den Blick der Betrachter zu bieten. Es können beispielsweise ganze Bereiche einer Seite in unterschiedlichen Farben gestaltet sein, um verschiedene Themen zu kennzeichnen. In geringerem Ausmaß könnte auch ein helleres Kästchen weniger wichtigen Content material wie einen Tooltip umgeben.
  • Visuelles Suggestions – Farbe kann anzeigen, ob ein Consumer erfolgreich eine Aktion durchgeführt hat. Rot und Grün werden zu diesem Zweck am häufigsten verwendet – ein grünes Häkchen, wenn ein Consumer etwas ausgewählt hat oder ein rotes „X“, wenn ein Consumer auf etwas klickt, auf das er keinen Zugriff hat (eine Rot-Grün-Sehschwäche ist nebenbei bemerkt die häufigste Kind der Farbenblindheit).
  • Datenvisualisierungen – Farbe kann komplexe Diagramme und Schaubilder leichter verständlich machen. Dies gilt besonders für Tortendiagramme, bei denen Farben nebeneinander dargestellt werden.
  • Interaktiver Textual content – Farbe kann anzeigen, was passiv gelesen werden soll und was man anklicken kann. Das bekannteste Beispiel hierfür ist die Tatsache, dass Hyperlink-Texte in der Regel blau sind.

Wie man barrierefreie Farbschemata für Webseiten designt

Schauen wir uns nun additionally an, wie du barrierefreie Farben für die Farbschemata eines Webdesigns nutzen kannst. Bevor wir loslegen, solltest du dich noch einmal mit den Grundlagen der Farbenlehre, vor allem mit dem Farbkreis, beschäftigen.

Verstehe die Grundlagen des Kontrasts

Genau betrachtet geht es bei Farben immer um Kontrast. Wenn alles dieselbe Farbe hätte, gäbe es nichts zu sehen. Die grundlegendste Aufgabe von Farben im Webdesign besteht darin, etwas auf dem Bildschirm herausstechen zu lassen: Die Frage ist, in welchem Umfang und im Verhältnis zu welchen anderen Elementen.

Mithilfe von Kontrast stellen Designer und Designerinnen Unterschiede zwischen Designobjekten optisch dar. Er kann auf einer Skala von Hoch bis Niedrig gemessen werden. Ein analoges Farbschema wäre ein Beispiel für geringen Kontrast, da es sich größtenteils um die gleichen Farben handelt. Ein komplementäres Farbschema hat dagegen einen hohen Kontrast, da diese Farben sich im Farbkreis gegenüberliegen.

Webseitengestaltung für einen Podcast
Ein hoher Kontrast ist essenziell für barrierefreie Farben. Webdesign von RLisboa_Designs

Eine Möglichkeit, Farbkontrast zu betrachten, ist in Kind von Werten. Der Wert (in der Kunst) bezieht sich darauf, wie hell oder dunkel eine Farbe ist. Wenn eine farbenblinde Individual oder jemand mit einer Sehschwäche auf den Bildschirm schaut, ist der Wert das, was sie statt bestimmter Farben sieht. Um einen hohen Kontrast zu erzeugen, werden Dunkelheit und Licht einander gegenübergestellt.

Die WCAG enthält empfohlene Verhältnisse für den Kontrast zwischen Textual content und Hintergrund. Diese können je nach Größe des Textes (größerer Textual content erfordert weniger Kontrast) und wie sehr du dich an die Richtlinien halten willst, variieren. Die WCAG bewerten die erreichte Barrierefreiheit in verschiedenen Stufen, wobei AA für die Mindestanforderungen an die Barrierefreiheit steht und AAA den höchsten Commonplace darstellt.

Degree AA Kontrast-Commonplace

  • 4.5:1 für Textual content kleiner als 18pt
  • 3:1 für Textual content größer als 18pt

Degree AAA Kontrast-Commonplace 

  • 7:1 für Textual content kleiner als 18pt
  • 4.5:1 für Textual content größer als 18pt
Screenshot des Adobe Color Contrast Checker Tools
Bild by way of Adobe

Am einfachsten lässt sich mit einem der zahlreichen On-line-Kontrast-Checker herausfinden, ob ein Farbschema diesem Verhältnis entspricht. Zu den beliebtesten zählen Stark (einem Plugin für Sketch), Adobe Colour und Distinction. Darüber hinaus sollte dir eine Google-Suche nach „Kontrast Checker“ jede Menge Optionen aufzeigen.

In der Regel wirst du für diese den Hex-Code deiner Vorder- und Hintergrundfarben herausfinden müssen (ein sechsstelliger Code mit einer vorangestellten Raute, der für eine bestimmte Farbe steht) und ihn dort eingeben müssen. Es ist wichtig zu beachten, dass die „1“ in den zuvor erwähnten Verhältnissen für deine Hintergrundfarbe steht und manche Kontrast-Checker diese Zahl nicht berücksichtigen.

Entwirf bereits im Voraus eine barrierefreie Farbpalette für deine Web site

Web site-Farben existieren nicht in einem Vakuum, sondern müssen im Einklang miteinander funktionieren. Deshalb ist es wichtig, bereits im Voraus ein barrierefreies Farbschema zu planen, um sicherzustellen, dass die Farben harmonisch sind und gleichzeitig den WCAG-Richtlinien für Kontrast entsprechen.

Zusätzlich zu den bereits festgelegten Markenfarben, die Teil einer visuellen Identität sind, müssen Webdesigner und -designerinnen oftmals eine Reihe verschiedener Szenarien berücksichtigen, in denen Farben verwendet werden: einschließlich einer Akzentfarbe (häufig für Buttons genutzt), Suggestions-Farben (z.B. eine Farbe, die anzeigt, dass ein Consumer on-line ist) und die verschiedenen Zustände eines Hyperlinks (wenn man mit der Maus über ihn fährt, bevor man ihn anklickt und nachdem man ihn angeklickt hat). Sie werden auch bestimmte neutrale Farben festlegen müssen (in der Regel im Bereich von Weiß, Grau und Schwarz), die üblicherweise für den Hintergrund, den Fließtext und die Überschriften verwendet werden.

Website-Design für ein NFT-Unternehmen, das mehrere Farbverläufe verwendet
Auf Webseiten müssen oftmals verschiedene Farben und neutrale Farbtöne harmonieren. Webdesign von M2Design.Company

Dann muss man diese Farben einfach nur noch testen (mithilfe des bereits erwähnten Kontrast-Checkers), um sicherzustellen, dass sie den zulässigen Kontrastverhältnissen entsprechen. Glücklicherweise musst du nicht alle Farben auf ihr Kontrastverhältnis testen, sondern nur die, die in einem Hintergrund-Vordergrund-Verhältnis zueinander stehen.

Zusätzlich zum allgemeinen Hintergrund der Web site musst du auch andere Farben berücksichtigen, die als Hintergrund für Textual content dienen, beispielsweise ein Formular oder eine Information-Field. Und natürlich sollte die Akzentfarbe den höchsten Kontrast aller Farben aufweisen, da sie am meisten herausstechen soll und nur sparsam verwendet wird.

Ergänze Farben mit zusätzlichen Designelementen

Eine Web site kann auch unter die Richtlinien für Barrierefreiheit fallen, wenn Farbe der einzige Indikator für wichtigen Content material ist. Webdesigner und -designerinnen sollte Farbindikatoren mit anderen Elementen wie Icons, Texten oder Animationen ergänzen.

Animiertes Gif zum Umschalten des farbenblindenfreundlichen Modus von Trello
Bild by way of Trello

Wenn beispielsweise ein Formular rot wird, wenn das falsche Passwort eingegeben wird, kann dies jemandem mit Sehschwäche schnell entgehen. Um dies zu vermeiden, fügen UX Designer in der Regel mindestens eines der folgenden Dinge hinzu: ein Tooltip, welches „Falsches Passwort“ anzeigt, ein Ausrufezeichen und/oder eine Animation, die das gesamte Formular wackeln lässt.

Auf ähnliche Weise ermöglicht die Projektmanagement-App Trello Usern die farbliche Kennzeichnung von Elementen mit Labeln. Sie bieten aber auch einen Modus für Farbenblinde, in dem den Labeln Texturen hinzugefügt werden, wodurch ihr Unterschied deutlicher wird.

Nutze Farbe als unterstützendes Device

Bei der Gestaltung von barrierefreien Farben geht es nicht nur um die Planung für ein Szenario ohne Farben. In einigen Fällen kann Farbe ein praktisches Hilfsmittel sein, um Consumer beim Lesen der Seite zu unterstützen.

In Fällen, in denen eine Individual mit einer Lese-Rechtschreib-Schwäche Probleme haben könnte, einen Textabschnitt zu lesen, könnte ein spezieller Modus Farbe nutzen, um einen Satz oder ein Wort farblich hervorzuheben. Dieses Vorgehen wird gern von Apps genutzt, mit denen man Fremdsprachen durch Lesen lernt, wie beispielsweise Beelinguapp. Zusätzlich können Designer und Designerinnen eine Umrandung oder ein Zeigefingersymbol nutzen, um die Farbe zu ergänzen.

Screenshot des hervorgehobenen Lesemodus von Beelinguapp
Bild by way of Beelinguapp

Barrierefreie Farben für Webseiten nützen allen

Bei Barrierefreiheit geht es nicht nur darum, ungewöhnliche und seltene Sonderfälle anzugehen. Tatsächlich werden so viele Consumer früher oder später in ihrem Leben unter einer Sehschwäche leiden (sei es temporär oder dauerhaft), dass Unternehmen es sich nicht leisten können, Barrierefreiheit zu ignorieren.

Die gute Nachricht ist, dass es klare Richtlinien und Instruments gibt, um Consumer mit Einschränkungen zu unterstützen. Natürlich hängt die Wahl der richtigen Farben von mehr ab als nur Verhältnissen und Mathematik – es ist eine Kunstform. Deshalb ist es wichtig, dass du mit talentierten Designern und Designerinnen arbeitest, wenn du ein Farbschema für deine Web site willst, das sowohl barrierefrei ist als auch fantastisch aussieht.

Du benötigst Hilfe dabei, deine Webseite farblich barrierefrei zu gestalten?
Dann arbeite mit unserer talentierten Design-Group.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments