Webseite Agentur » Barrierefrei » Farbkontrast

Mein Corporate Design sagt aber...

... hoffentlich dazu nichts. Viele Unternehmen haben ein Corporate Design. Darin sind Schriften festgelegt, Farben die verwendet werden dürfen für Text und für Hintergründe genauso wie Formate und Logo-Anwendungen. Das alles ist auch in Ordnung so, aber es darf - niemals - den Grundsätzen für eine barrierefreie Umsetzung einer Webseite widersprechen. Ansonsten machen Sie bitte nicht Ihre Webseite neu, sondern Ihr Corporate Design.


Eine Webseite über Webseiten - warum eine Agentur für eine Webseite eingesetzt wird, was SEO / Suchmaschinen-Optimierung genau bedeutet und warum Barrierfreiheit im Internet ein Geschäftsmodell auch für Webseiten-Betreibende ist. Außerdem: Etwas Content für Webseiten-Betreibende, Programmierende & Co. Alle Themen, die uns als Web-Agentur in Wien auffallen.

Betroffen von Farbkontrasten

Es ist ein lästige Diskussion, wenn Webseiten entwickelt werden und der Designer eine besonders schön abgestufte Version mit verschiedenen sehr harmonisch zueinander passenden Farben entwickelt hat. Aber es ist keine gute Idee eine Webseite so umzusetzen, dass man den Inhalt - letztlich soll der Ihre Kunden überzeugen - nur auf qualitativ hochwertigen Bildschirmen auch einigermaßen gut lesen kann. Und noch ein wichtiger Faktor: Selbst gute Bildschirme schützen Ihren vor dem Bildschirm sitzenden Kunden nicht vor einer möglichen Sehschwäche, schlechter Raumbeleuchtung...

Barrierefreie Farbkontraste - und der Hausverstand

Eines der wichtigsten Hilfsmittel für barrierefreie Farbkontraste ist er. Oder sie. Wie auch immer Sie diese fiktive Person in Ihrem Leben nennen wollen. Wir nennen diese Person jetzt einfach "Hausverstand". Dieser Hausverstand sagt Ihnen schon viel. Beispielsweise, dass Ihre potentiellen Kunden sich lieber eine andere Webseite von Ihrem Mitbewerb ansehen werden, wenn man den Text dort besser lesen kann als bei Ihnen. Der Hausverstand sollte aber noch mehr können. Und es ist keine erfundene Geschichte:

Farbkontraste und Onlinebanking: Es ist tatsächlich so, dass ein namhaftes Bankinstitut in Österreich als dominante Corporate-Design-Farbe grün hat. Wir nennen das Geldinstitut hier nicht, weil man dort inzwischen dieses Problem behoben hat und das Corporate Design angepasst hat. Was war de facto der Fall?
Das Online-Banking hatte einen durchgehenden grünen HintergrundLastschriftbuchungen oder negative Kontostände wurden in Zahlen mit "-" davor angezeigt und damit man sie besser sieht... waren sie rot. Rot/Grün-Sehschwächen gehören zu den am meisten verbreiteten Sehschwächen /Fachbegriff dafür ist "Deuteranomalie" oder "Deuteranopie") überhaupt. Eine Umsetzung, die sich definitiv nicht nur Freunde gemacht hat...

Wie werden Farbkontraste geprüft?

Wenn Sie einen Farbkontrast prüfen möchten, können Sie das mit Hifle von diversen Internet-Seiten tun. Es gibt etliche Anbieter, die solche Vergleichstools anbieten. Damit eine seriöse Auswertung entsteht, wird meist der Farbwert ("Hexadezimal-Code") der Vordergrundfarbe (also der Textfarbe) und der Farbwert der Hintergrundfarbe erfragt. Außerdem wollen diese Vergleichssysteme noch die Textgröße wissen. Warum das so ist? Die Textgröße selbst hat auch Einfluss auf die Lesbarkeit, das ist jetzt nicht überraschend. Aber in den meisten Staaten so wie auch in der Europäischen Union gelten die Regeln der sogenannten Web Accessibility Initiative (WAI) für etwaige juristische Definitionen in Sachen Barrierefreiheit und Behindertengleichstellung bzw. Diskriminierung. Und in diesen Richtlinien der Initiaitve (die wichtigsten für Webseiten nennen sich WCAG - Web Content Accessibility Guidelines) ist das Mindest-Kontrastverhältnis kombiniert mit der Textgröße versehen.

Es kann also durchaus sein, dass ein Farbkontrast etwa grauer Hintergrund unter schwarzem Text noch nach WCAG ausreichend ist, wenn dieser nur für Überschriften verwendet wird, die eine bestimmte Größe haben. Aber möglicherweise reicht dieser Kontrast nicht mehr aus, wenn sie diesen Hintergrund auch unter den normalen Fließtext einziehen.


Thema fertiglesen...

Webseite Agentur: SEO, Barrierefreiheit und mehr... - Digitale Plakatwand

1. Fläche: € 96 / Jahr

© Kate Trysh ( Unsplash) | Werbung?

1. Fläche: € 96 / Jahr

Online-Werbung mit einem statischen Eintrag zu einem hervorragenden Preis - das finden Sie auf dieser Plattform um Ihre Kunden und Zielgruppen mit unserer Hilfe zu erreichen. Wer zuerst kommt...

Online-Werbung

2. Fläche: € 106 / Jahr

© Kate Trysh ( Unsplash) | Werbung?

2. Fläche: € 106 / Jahr

Online-Werbung mit einem statischen Eintrag zu einem hervorragenden Preis - das finden Sie auf dieser Plattform um Ihre Kunden und Zielgruppen mit unserer Hilfe zu erreichen. Wer zuerst kommt...

Online-Werbung

Welches Kontrastverhältnis ist wichtig?

Es gibt zwei Kontrastverhältnisse, die man sich ansehen sollte. Einerseits das Kontrastverhältnis zwischen Vordergrund und Hintergrund. Das ist die logische Variante, denn der Kontrast zwischen dem Text und der Farbe des Untergrundes auf dem der Text steht, ist für jeden nachvollziehbar relevant.

Ein zweites wichtiges Kriterium beim Ermitteln der nötigen Kontrast-Verhältnisse ist aber auch die Wechsel-Vorgehensweise zwischen Vordergrund und Vordergrund bzw. zwischen Hintergrund und Hintergrund. Gemeint ist damit die sogenannte "Link-Contrast-Ratio". Die wird einfach so benannt, weil das häufigste Auftreten der Einsatz von "Links" im Internet ist. Und zwar besonders dann, wenn ein Link außer seiner Farbe keine weiteren "Eigenschaften" hat. (Daher ist es ganz gut und sinnvoll Links entsprechend zu unterstreichen, damit nicht nur die Farbe den Ausschlag darüber gibt, dass hier ein Link ist.) Wenn Sie mehr über diese Farbkontraste wissen wollen, wir haben die Kontrast-Verhältnisse auf einer eigenen Seite erklärt. Was ist sonst noch über Kontraste zu wissen gibt, finden Sie wenn Sie zum zweiten Teil dieses Artikels scrollen mit dem hier stehenden Button.

Farbkontrast-Umschalter im Web

Viele verschiedene Seiten haben sogenannte "Farbkontrast-Schalter". Die unprofessionellste Idee dahinter ist es einfach die komplette Webseite im reinen Textmodus mit einer Farbe im Vordergrund und einer Farbe im Hintergrund darzustellen. Das hilft, dankenswerter Weise, zumindest jenen, die die "Originalversion" nicht lesen können.

Eine "alternative Version" für eine barrierefreie Darstellung darf man übrigens auch nach den WCAG erstellen. Das gilt aber nur, wenn absolut beweisbar ist, dass eine normale barrierefreie Webseite dem Betreiber nicht zuzumuten wäre. Das beweisen Sie bitte dann ohne uns zu zitieren vor Gericht im Fall der Fälle...

Grundsätzlich sollte Ihre Webseite also schon auch mit barrierefreiem Kontrast in der Grundeinstellung vorhanden sein. Trotzdem können diese Farbkontrast-Umschalter für einige Ihrer Kunden nützlich sein. In der "fortgeschrittenen Variante" solcher Umschalter werden nämlich zwei wichtige Dinge berücksichtigt:

  • Darstellende Fotos, die den Inhalt begleiten, bleiben unverändert sichtbar.
  • Das grundsätzliche Layout der Seite bleibt 1:1 erhalten.

Und hier hat der Umschalter einen ganz einfachen Sinn. Er soll den Kontrast nicht nur erhöhen, sondern auch helligkeitsmässig anpassen. Darum werden oftmals, wenn es richtig gemacht wird, Blau-Weiss und Schwarz-Gelb-Varianten angeboten, weil dies extrem starke optische Kontraste sind.

Wer mit Betroffenen spricht - und das haben wir im Rahmen dieser Idee getan -, die ein sehr eingeschränktes Sehvermögen haben, wird lernen, dass diese Menschen eine Sache bewegt: Sie wollen Bilder sehr wohl betrachten können, die sind sogar sehr wichtig für sie. Problematisch ist nur, wenn ein Hintergrund zu dunkel oder zu hell ist - daher ist es gut und richtig die Kontrastschalter anzubieten, aber was ein tatsächliches Bild (nicht eine Grafik, ein Diagramm oder ein Logo, sondern gemeint ist ein Foto) ist, sollte unverändert sichtbar bleiben.

Konsequent bleiben bei Farbkontrasten

Ein wichtiger Aspekt bei Farbkontrasten ist, dass man dabei sehr konsequent bleibt. Da nicht klar ist für den Anbieter der Webseite mit welcher Vergrößerung - beispielsweise per "Bildschirmlupe" - die Person vor der Webseite agiert, sollten auch kleinere Flächen nicht "invertiert" werden. Was eine Fläche ist (zB ein Absende-Button eines Formulars) sollte nicht bei einer Kontrasteinstellung mit schwarzem Hintergrund und gelbem Text plötzlich eine gelbe Fläche mit schwarzer Beschriftung sein. Eine solche Fläche umrahmt man mit der Vordergrundfarbe, behält die Hintergrundfarbe und beschriftet in der Vordergrundfarbe. Mehr dazu kann man auch auf einer Webseite des "Funktionssets" »easy2see« für mehr Barrierefreiheit nachlesen.

Kurz gesagt: Jeder zu lesende Text ist in der Vordergrundfarbe und jeder Text hat als Hintergrundfarbe die definierte Hintergrundfarbe.

Sie wissen nicht ob schwarz oder weiß?

Wenn Sie es noch nicht wissen, ob Sie einen dunklen oder einen hellen Hintergrund haben werden, können wir Ihnen - mit einem Augenzwinkern - eine Antwort geben auf die Frage: Was ist die beste Farbe im Internet?


Startseite Inhaltsverzeichnis

Fehler gefunden?

Wir freuen uns über Ihren Input, bitte teilen Sie uns mit, was auf dieser Seite falsch ist, damit wir es schnell korrigieren können, es ist dabei egal ob Sie einen relevanten Rechtschreibfehler gefunden haben, oder beispielsweise einfach Daten oder Angaben nicht mehr aktuell sind. Wir freuen uns immer auf Ihre Anregung. Nutzen Sie diesen Link hier: Fehler melden!