Kontrast und Barrierefreiheit

Im Kurs Barrierefreiheit haben Sie gelernt, wie man den Kontrast zwischen Text und Hintergrund berechnet und welche Mindestwerte die WCAG verlangen. Diese Lektion geht einen Schritt weiter und betrachtet Barrierefreiheit aus Sicht der Gestaltung: Wie baut man eine Palette so auf, dass sie von vornherein zugänglich ist? Wie geht man mit einer Markenfarbe um, die als Textfarbe zu hell ist? Und was bedeutet es für Diagramme, Statusmeldungen und Knöpfe, dass rund jeder zwölfte Mann Farben anders wahrnimmt?

1. Kontraste in der Tonleiter planen

Wer seine Farben als Tonleiter aufgebaut hat, wie in der vorigen Lektion gezeigt, kann für jede Stufe vorab festlegen, wofür sie verwendet werden darf. Eine Kontrastmatrix macht das sichtbar: Sie zeigt für jede Stufe, ob sie als Text auf Weiß, auf der hellsten oder auf der dunkelsten Stufe ausreicht.

Das Muster ist fast immer ähnlich: Die hellen Stufen eignen sich nur als Hintergrund, die mittleren für große Schrift, Symbole und Rahmen, die dunklen für Fließtext. Verschieben Sie den Farbton, und Sie sehen, dass sich die Grenze verschiebt – Gelb- und Grüntöne brauchen deutlich dunklere Stufen für ausreichenden Kontrast als Blau- oder Violetttöne, weil das Auge sie heller wahrnimmt. Aus der Matrix entsteht eine einfache Regel für das Designsystem: Text nur ab Stufe 700, Bedienelemente ab Stufe 500 oder 600, Hintergründe bis Stufe 100.

2. Farbfehlsichtigkeit

Etwa acht Prozent der Männer und rund 0,5 Prozent der Frauen mit nordeuropäischer Herkunft haben eine angeborene Farbsehschwäche. Am häufigsten ist die Rot-Grün-Schwäche, bei der Rot- und Grüntöne schwer oder gar nicht zu unterscheiden sind. Seltener ist die Blau-Gelb-Schwäche. Vollständige Farbenblindheit ist sehr selten. Hinzu kommen altersbedingte Veränderungen: Mit zunehmendem Alter vergilbt die Augenlinse, und Blautöne werden schwerer unterscheidbar. Probieren Sie aus, wie typische Elemente für Betroffene aussehen:

Links transportiert nur die Farbe die Information: Welcher Balken gehört zu welcher Region, welcher Knopf speichert und welcher löscht? Bei Rot-Grün-Schwäche sind die Balken kaum zu unterscheiden, und die beiden Knöpfe sehen fast gleich aus. Rechts helfen Beschriftungen, ein Muster, Symbole und unterschiedliche Knopfformen. Die Information bleibt in jeder Ansicht erhalten – auch in Graustufen, etwa beim Ausdrucken auf einem Schwarz-Weiß-Drucker.

3. Wenn die Markenfarbe nicht reicht

Viele Unternehmen haben eine Markenfarbe, die als Textfarbe auf Weiß nicht ausreicht: ein leuchtendes Orange, ein helles Grün, ein freundliches Hellblau. Das ist kein Grund, die Marke zu ändern. Es gibt mehrere Lösungen, die sich kombinieren lassen.

Die erste Strategie ist die wichtigste. Eine etwas dunklere Variante der Markenfarbe wird von den meisten Menschen als dieselbe Farbe wahrgenommen, erfüllt aber die Kontrastanforderungen. Viele bekannte Marken arbeiten so, ohne dass es auffällt. Wichtig ist, diese Variante im Farbdokument als eigene Rolle festzuhalten – etwa „Primär Text“ – damit sie konsequent verwendet wird.

4. Diagramme und Datenvisualisierung

Besonders anspruchsvoll sind Diagramme, weil hier oft viele Farben nebeneinander stehen. Einige Regeln helfen. Verwenden Sie Farben, die sich auch in der Helligkeit unterscheiden, nicht nur im Farbton – dann funktionieren sie auch bei Farbfehlsichtigkeit und in Graustufen. Vermeiden Sie die Kombination von Rot und Grün als einziges Unterscheidungsmerkmal. Beschriften Sie Linien und Balken direkt statt über eine Legende, die das Auge ständig hin- und herspringen lässt. Und nutzen Sie bei Bedarf zusätzliche Merkmale wie Muster, Linienarten oder Symbole. Es gibt zudem erprobte Farbpaletten für Diagramme, die gezielt für Farbfehlsichtigkeit entwickelt wurden, etwa die von Masataka Okabe und Kei Ito oder die Viridis-Skala.

5. Dunkler Modus und Prüfroutine

Wer einen dunklen Modus anbietet, braucht eine eigene Zuordnung der Rollen. Die Tonleiter wird dabei nicht einfach umgedreht: Auf dunklem Grund wirken gesättigte Farben greller, und reines Weiß als Textfarbe kann blenden. Üblich sind ein sehr dunkles Grau statt Schwarz als Hintergrund, ein leicht gedämpftes Weiß für Text und etwas entsättigte Varianten der Markenfarbe. Auch hier werden alle Kombinationen mit der Kontrastmatrix geprüft.

Für den Alltag genügt eine kurze Prüfroutine: Jede neue Farbkombination wird vor der Veröffentlichung einmal durch einen Kontrastrechner geschickt, jedes neue Diagramm einmal in Graustufen und mit einer Farbfehlsicht-Simulation betrachtet. Die Entwicklerwerkzeuge moderner Browser bieten solche Simulationen direkt an. So bleibt die Palette auch dann zugänglich, wenn sie über die Jahre wächst. Mit dieser Lektion endet das Modul Farbe; im nächsten Modul geht es um Layout und Raster.

Ein Beispiel verdeutlicht den Aufwand, der sich lohnt. Ein Onlineshop für Werkzeug nutzte ein kräftiges Gelb als Markenfarbe, auch für Preise und Links auf weißem Grund. Der Kontrast lag bei etwa 1,6 zu 1 – für viele Kunden kaum lesbar. Statt die Marke zu ändern, wurde Gelb auf Flächen, Knöpfe mit schwarzer Schrift und Akzentstreifen beschränkt, während Preise und Links ein fast schwarzes Anthrazit erhielten. Der Shop blieb unverkennbar gelb, war aber für alle lesbar, und die Zahl der Kaufabbrüche auf mobilen Geräten sank.

Solche Anpassungen sind kein Verlust an Markenwirkung, sondern ein Gewinn an Qualität. Eine Marke, die für alle lesbar ist, wirkt professioneller und verlässlicher – und das ist schließlich genau die Eigenschaft, die die meisten Unternehmen mit ihren Farben ausdrücken wollen. Die Prüfung dauert wenige Minuten, die Wirkung hält über Jahre.

Wer diese Grundsätze von Anfang an berücksichtigt, muss später nichts reparieren. Barrierefreiheit wird dann nicht zur nachträglichen Pflichtaufgabe, sondern zu einer Eigenschaft der Palette selbst – so selbstverständlich wie die Markenfarbe. Genau darin liegt der Unterschied zwischen einer Palette, die nur gut aussieht, und einer, die für alle funktioniert.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.