Teil 1 – Theorie
Bedeutet digitale Barrierefreiheit den Kontrollverlust über Corporate-Design?

Teil 2 – Praxis
Ein Design für eine barrierefreie Webseite erstellen – wie gehe ich vor?

Und dann das: Menschen mit visuellen Einschränkungen können das bereitgestellte Webangebot nicht nutzen und die angebotenen Produkte und Dienstleistungen nicht kaufen:

• weil das viele Weiß sie blendet und sie die Seite wieder schließen.
• weil sie die Farben nicht richtig sehen und die Links nicht finden.
• weil sie die Schrift in der festgelegten Größe nicht lesen können.
• weil sie die Funktion hinter den schicken Icons nicht deuten können.
• …

In dieser Artikelserie geht es darum aufzuzeigen, dass es möglich ist, ein Corporate Design so zu erweitern, dass es (visuell) barrierefrei nutzbar ist.

Teil 1 – Theorie

Elemente von Corporate-Design und -Identity

Zu einer Corporate-Identity gehören:

1. Corporate Culture
2. Corporate Communication
3. Corporate Behavior (inklusive Corporate Social Responsibility)
4. Corporate Design

Das Corporate-Design umfasst den visuellen Firmen-Auftritt und wird in einem Styleguide bzw. Brand Book festgehalten:

• das Logo bzw. Wort-Bild-Marke inkl. Regeln wie es einzusetzen ist
• die Farben und Farbkombinationen die verwendet werden dürfen
• die erlaubten Schriften und Schriftschnitte bis zu einer eigenen Hausschrift
• die Bildsprache von Fotos und Illustrationen
• weitere gestalterische Stilmittel z.B. Icons, Formen, Kombinationen

Die meisten Corporate-Designs sind darauf ausgelegt, auf und in allen Medien ein einheitliches Erscheinungsbild zu transportieren.

Was ist das Problem?

Corporate Designs werden für Menschen entwickelt, deren Augen …

• nahezu 100% Sehkraft haben
• gut sehen können:
  • alle Farben
  • alle Sättigungsabstufungen von grau bis knallig
  • alle Kontraste unabhängig der Farben und ihrer Sättigung
  • alle Schriftgrößen
• generell gut fokussieren können
• sich an helle und dunkle Lichtverhältnisse adaptieren können
• nicht blendempfindlich sind
• unterschiedlich große Schriften lesen können
• räumlich sehen können

Die Realität sieht anders aus!

Die folgende Tabelle stellt eine grobe Übersicht über Seheinschränkungen dar, ohne Vollständigkeit zu bieten. Es geht mir darum, zu verdeutlichen, dass viel mehr Menschen betroffen sind als allgemein angenommen. Auffällig ist die ungleiche Verteilung auf Männer und Frauen bei den Farbsehschwächen und Migräne. Daten für nichtbinäre und agender Menschen liegen nicht vor. Alle Zahlen sind eher mit Vorsicht zu genießen, weil sie in Deutschland nicht offiziell erfasst werden. Das gilt insbesondere auch für Blindheit [2].

Wie bei allen anderen Behinderungen auch, nehmen Seheinschränkungen im Alter zu. Zwar gibt es Menschen, die gar keine Probleme haben, oder deren Probleme sich mit Brillen, Kontaktlinsen und Operationen ausgleichen lassen, aber sie sind nicht in der Mehrzahl.

Farbsehschwächen

Haben Sie eine Farbsehschwäche? Manch einer erfährt es erst beim Führerscheintest. Um das zu testen, gibt es die Ishihara-Farbtafeln. Wer in den unten stehenden Kreisen aus verschiedenen farbigen Punkten keine Zahl oder nicht die Zahl sieht, die Menschen mit voller Farbwahrnehmung sehen, hat möglicherweise die darunter stehende Farbschwäche.

Abbilding 1: Ishihara-Farbtafeln

Die oben abgebildeten Farbtafeln sind aus der Wikipedia [4]. Die linke zeigt eine einstellige Zahl, die beiden anderen eine zweistellige. Weitere Tafeln und auch eine animierte Darstellung des Prinzips für Farbenblinde gibt es in der Wikipedia.

Die häufigsten Farbsehschwächen liegen im Rot-Grün-Bereich. Speziell diese sind auch Chromosomen-spezifisch, weshalb mehr Männer betroffen sind.

Einen kleinen Einblick, wie es ist in einer Welt ohne Farben zurecht zu kommen ist im folgenden Video beschrieben: https://youtu.be/ChQ9bpK2oU4

Kurzsichtigkeit, Weitsichtigkeit und Astigmatismus

Kurzsichtigkeit ist von den genannten Einschränkungen in der digitalen Barrierefreiheit am wenigsten zu beachten, wenn sie mit einer Brille oder Kontaktlinsen ausgeglichen werden.

Für Weitsichtige ist die Möglichkeit, die Schriftgröße auf ihren Geräten größer einstellen zu können, wichtig. 

Menschen mit Astigmatismus (die Lichtbündel brechen nicht nur an einem Punkt im Auge, es kommt zu Überstrahlungen) oder Menschen, die nur noch eine sehr geringe Restsehkraft haben, benötigen noch weit größere Schriften und Kontraste bzw. die Möglichkeit, die ganze Seite zu skalieren. Alles, was sich automatisch oder unerwartet bewegt, stört den ohnehin schwierigen Prozess der Orientierung und unterbricht den Lesevorgang.

Migräne

Nicht direkt ein Problem mit den Augen, aber mit Lichteinfall können z.B. Migräneschübe zusammenhängen. “Weltweit leiden zehn bis 15 Prozent der Erwachsenen an Migräne. Etwa 6 bis 8% aller Männer und 12 bis 14% aller Frauen sind betroffen. Bei Frauen sind die Attacken meist länger und intensiver.

Alleine in Deutschland sind etwa 3,7 Millionen Frauen und rund 2 Millionen Männer betroffen. Am häufigsten ist die Migräne in der Gruppe der 35 – 45- Jährigen. Danach gehen bei beiden Geschlechtern Schwere und Häufigkeit der Attacken zurück.” Heißt es im Manual der Deutschen Migräne- und Kopfschmerzgesellschaft. [5]

Auswirkungen der visuellen Barrierefreiheit auf das Corporate Design

Jede Brand hat das Bestreben, einen größtmöglichen Bekanntheitsgrad zu erlangen. Nur wenigen gelingt dies wie Coca-Cola. Was in Deutschland der Ausspruch “Du lebst wohl hinter dem Mond” ist, ist in Griechenland “Aber Coca-Cola ist in deinem Dorf angekommen?” [6]. Einen größeren Erfolg kann sich eine Marke wohl kaum wünschen.

Der Grund, weshalb ich Coca-Cola im weiteren Verlauf dieses Artikels nicht beschreibe liegt daran, dass deren Webseite absolut unbrauchbar als gutes Beispiel für Barrierefreiheit ist. 

Kontraste – elegant vs. lesbar

Lange Zeit galt es als “Schick” im Design mit eher geringen Farbkontrasten zu arbeiten. So sollte z.B. eine graue Schrift auf weiß wie Silber anmuten. Der Farbcode des Farbnamens “silver” wird mit #C0C0C0 angegeben. Im ContrastChecker [7] wird bei dem Farbton auf weißem Grund ein Kontrastverhältnis von 1.83 ausgerechnet. Um mindestens das Konformitäts-Level AA zu erreichen braucht es ein Kontrastverhältnis von 3 für Schriften über 18pt (1pt entspricht 1,333px und somit sind 18pt umgerechnet 24px [8] – was bei einer normalen Darstellungsgröße von 16px  wiederum 1.5rem entspricht).

Das Verhältnis von 4.5 reicht laut Definition für Schriftgrößen unter 24px aus. Erst ab einem Kontrastverhältnis über 7 wird das Konformitäts-Level AAA erreicht.

Farben im Corporate Design

Die verwendeten Medien haben schon immer einen Einfluss auf die farbliche Gestaltung einer Marke genommen. So war Gelb beispielsweise lange Zeit in Logos verpönt, um das Problem zu umgehen, dass es beim Versenden von analogen Faxen nicht übertragen wird. Da Faxe weitgehend (!) keine Rolle mehr spielen, ist das inzwischen obsolet.

Abgesehen von solchen Überlegungen spielen die Erkenntnisse der Farbpsychologie, aber auch das brancheninterne Benchmarking hinsichtlich Zugehörigkeit und Abgrenzung eine Rolle. Ob auch die Verfügbarkeit der gewünschten Farben für verschiedene Druckverfahren berücksichtigt wird, hängt natürlich stark davon ab, was das Unternehmen vertreibt. 

Gerade Wohlfühlprodukte haben es in der digitalen Barrierefreiheit visuell schwer, da sie oft auf Pastelltöne auf weißem Grund zurückgreifen. Oft hilft es jedoch, den Einsatz der Farbe anzupassen: helle Farben im Hintergrund können durchaus eingesetzt werden. Solange die Schriftfarbe einen ausreichenden Kontrast zum Hintergrund hat, kann auch das barrierefrei sein!

Tag-Modus – Nacht-Modus – Egal-Modus?

Früher habe ich gerne einzelne Elemente der Webseite invertiert. Wenn beispielsweise der Inhalt selbst dunkle Schrift auf hellem Hintergrund enthalten hat, habe ich den Header und Footer sowie Elemente, die ich hervorheben wollte, oft mit heller Schrift auf dunklem Hintergrund angelegt. Im Nacht-Modus habe ich die Bereiche einfach invertiert.

Dabei bin ich jedoch dem Trugschluss erlegen, es gäbe einen “Egal-Modus”, also eine Einstellung mit der Nutzende sagen können, dass sie mit beiden Modi gut zurechtkommen. Das ist leider nicht der Fall.

Meiner kleinen und ganz bestimmt nicht repräsentativen Stichprobe bei LinkedIn und unter Freund:innen nach, gibt es durchaus einen großen Anteil an Menschen, denen es nichts oder wenig ausmacht, wenn eine Seite durchmischt ist. Dies sind dann aber oft die Menschen, die eben nicht auf barrierefreies Design angewiesen sind. Diejenigen, die sich aus medizinischen Gründen für einen Modus entschieden haben, bevorzugen es, wenn möglichst wenig Flächen invertiert sind.  

Wenn wir uns nicht aktiv darum bemühen, sowohl einen Tag- als auch Nacht-Modus bereit zu stellen, dann kann es uns passieren, dass Menschen im Betriebssystem einstellen, dass der Bildschirm invertiert werden soll. Dann werden aber nicht nur die Hintergründe und Texte invertiert, sondern auch unsere Brand-Farben und je nach Einstellung auch alle Bilder.

Abbildung 2: Original-Design und invertierte Darstellung auf dem Mac mit der Systemeinstellung Barrierefreiheit/Ansicht/Farben umkehren.

Das Design soll sich nicht wie in Abbildung 2 gezeigt von türkis/lila in rot/grün verändern, sondern vom invertierten Bereich im Content her sollen die Farben grundsätzlich im genannten Spektrum bleiben, aber so dunkel werden, dass sie mit heller Schrift funktionieren.

Abbildung 3: Tag-Modus-Design und Nacht-Modus-Design wie gewünscht.

Nun kann es natürlich sein, dass Nutzende den Nacht-Modus UND das Invertieren des Screens aktiviert haben. In dem Fall würde auch die dunkle Variante invertiert werden.

Abbildung 4: Nacht-Modus-Design und invertierte Darstellung

Dadurch, dass ich beide Farbvarianten gestaltet und die gewünschten Farben im Code zugewiesen habe, behalte ich (weitgehend) unabhängig von der Einstellung der Nutzenden die Kontrolle über die Farben meiner Webseite.

Manche Webseiten bieten deshalb auf der Seite selbst die Möglichkeit an, die Webseiten zu invertieren oder mit anderen Farbvarianten darzustellen. Dies ist an sich gut gemeint, besser ist es jedoch, wenn sich jeder Mensch die benötigten oder gewünschten Einstellungen im Betriebssystem des Gerätes einstellt und dann das Betriebssystem, alle Webseiten und Apps sich daran anpassen. Additional können solche Tools gerne eingesetzt werden, jedoch nicht als Ersatz für eine barrierefreie Gestaltung und Programmierung.

Darum lautet meine Empfehlung:

1. Stellen Sie einen Tag- und Nacht-Modus bereit!
2. Invertiert so wenig Elemente wie möglich!
   Gerade Webseiten, auf deren Inhalte Sie später keinen Einfluss mehr haben, sollten diesbezüglich robust angelegt werden.

Telekom-Tochter t-online zeigt wie es gelingen kann

Dass Farben wichtig sind, zeigt in Deutschland vor allem die Telekom, die sich bereits im Jahr 2000 die Farbe Magenta eintragen lassen hat. Beim DPMA [9] heißt es, der Markenrechtsschutz (der noch bis zum 31.12.2025 läuft) gelte u. A. für “Zurverfügungstellung von über das Internet abrufbaren Inhalten”. Die Telekom selbst hat eine eigene Seite über die Farbe Magenta verfasst, auf der es heißt “Heute ist Magenta ein eingetragenes Markenzeichen in der Europäischen Union, den USA und weiteren Ländern.” [10].

Die unterschiedlichen Tochterfirmen der Telekom verwenden den eingetragenen Farbcode in unterschiedlicher Weise. Was zum einen zeigt, dass es sich um eigenständige Seiten handelt, aber auch, wie viel Varianz innerhalb einer Marke möglich ist, ohne den grundsätzlichen Wiedererkennungswert einzubüßen.

Abbildung 5: Header der Webseite Telekom.com – nur im Tag-Modus verfügbar

Abbildung 6: Header der Webseite Telekom.de – nur im Tag-Modus verfügbar

t-online.de ist hier unser (nicht perfektes, aber gutes) Beispiel dafür, dass ein Corporate Design im Tag- und Nacht-Modus funktionieren kann, ohne den grundsätzlichen Charakter einzubüßen:

Abbildung 7: Header der Webseite t-online.de im Tag-Modus

Abbildung 8: Header der Webseite t-online.de im Nacht-Modus

Bitte beachten Sie, dass nicht nur das Schwarz im eigenen Logo, sondern auch im Logo von Amazon invertiert wurde!

Der eingetragene Farbcode mit dem Hexadezimalwert #E20074 hat zu weiß ein Kontrastverhältnis von 4.68. Bis auf die höchsten Kriterien AAA für kleine Schriften und die absolute Farbdifferenz besteht sie damit den Check auf Barrierefreiheit. Auf Schwarz hingegen beträgt das Kontrastverhältnis nur 4.49. Dies gilt nur für Schrift mit mehr als 24px als barrierefrei – gemäß der Konformitätsstufe AA.

Entsprechend ist der Tag-Modus vom Kontrast her barrierefreier als der Nacht-Modus. Dies zeigt, dass es teilweise nötig sein kann, zusätzlich zur bestehenden Brand-Farbe eine weitere Farbversion als Brandfarbe zu definieren.

 Für die Telekom könnte das so aussehen:

Tatsächlich fallen die notwendigen Änderungen am Farbwert sehr gering aus um in beiden Versionen das Konformitätslevel AA zu erreichen.  

Damit kein Missverständnis entsteht: die zusätzlichen Farbwerte dienen der Verdeutlichung, wie eine Brand adaptiert werden müsste und sind keinesfalls die von der Telekom neu eingeführten Farbwerte!

 Sie sehen, dass es unter dem Gesichtspunkt der Barrierefreiheit gar nicht so leicht ist, eine bestehende Marke zu transformieren. Nicht nur bei SEO, auch beim Design gilt es, die Barrierefreiheit sorgsam gegen andere Aspekte abzuwägen.

 Zum “Glück” für die Telekom reicht es laut der Richtlinie, dass die Level AA-Kriterien zum Start der Gültigkeit der EAA umgesetzt werden. Nun ist natürlich immer die Frage, ob es dem eigenen Anspruch entspricht, “nur” die gesetzlichen Vorgaben zu erfüllen, oder tatsächlich das Maximum an Barrierefreiheit zu erzeugen, wie es in der BITV unter § 3 Anzuwendende Standards in Passus (4) heißt: es “[…] soll ein höchstmögliches Maß an Barrierefreiheit angestrebt werden.” [14]

 Mein Lösungsvorschlag wäre in dem Fall der Telekom:

1. Den Tag-Modus für die “normale” Einstellung, ohne zusätzliche Einstellung, dass mehr Kontrast benötigt wird, so lassen.
2. Den Farbwert für den Nacht-Modus für das Level AA anpassen.
3. Für den Fall, dass Nutzende in den Einstellungen angegeben haben, dass sie mehr Kontrast bevorzugen bzw. benötigen, die Farbwerte für AAA im Tag- und Nacht-Modus nutzen (@media (prefers-contrast: more).
4. Den Eintrag bei der DPMA um diese Angaben ergänzen. Mit den Informationen wann welcher Farbton gilt.

 Für alle, die gerne die Richtlinie wüssten, auf die ich mich beziehe: BITV 2.0 Nummer 11.7 Benutzerdefinierte Einstellungen [15]. Dort heißt es: “Die Seite soll benutzerdefinierte Browsereinstellungen berücksichtigen.” Nun können Sie argumentieren, dass Tag- und Nachtmodus ja keine speziellen Browsereinstellungen sind.

Genaugenommen verlangt dieser Prüfschritt derzeit, dass sich die Webseiten auch an benutzerdefinierte Farbeinstellungen anpassen. Mit meinen Test-Farben im Firefox sieht die t-online.de bis auf die Logo-Farbe unabhängig von Tag- oder Nacht-Modus wie folgt aus:

Abbildung 9: Darstellung im Firefox mit der Einstellung “Oben ausgewählte Farben anstatt der Farben der Seite verwenden: Immer”

Spätestens an diesem Punkt entzieht sich die Farbgestaltung spätestens unserem Einfluss.

 Es gibt auch noch die Darstellung im Forced-Color-Mode, den laut Windows 4% der Nutzenden insgesamt und laut WebAIM 50% der Nutzenden mit starken Seheinschränkungen eingestellt haben, wie im Blog von Polypane beschrieben [16]:

Abbildung 10: oben der Tag- und unten der Nacht-Modus, wie ihn Chrome auf dem Mac mit dem Rendering “forced-colors: active” anzeigt