Diagramme für Farbenblindheit zugänglich machen

Ein Diagramm kann fachlich korrekt sein und dennoch unverständlich bleiben. Der häufigste Grund: Die Farbe soll die ganze Arbeit leisten. Eine rote Linie bedeutet das eine, eine grüne das andere, und die Legende ist der einzige Schlüssel. Für Menschen mit Farbsehschwäche – und für alle, die ein Diagramm bei Blendung, auf einem schlechten Bildschirm oder in Schwarz-Weiß betrachten – entsteht dadurch unnötige Reibung.

Die Lösung besteht nicht darin, auf Farbe zu verzichten, sondern sie als einen Hinweis unter mehreren einzusetzen. Dieser Leitfaden übersetzt dieses Prinzip in konkrete Entscheidungen für Diagramme, Dashboards, Karten und Infografiken.

Die Grundregel: Farbe darf nicht der einzige Hinweis sein

Das WCAG-Erfolgskriterium 1.4.1 verlangt, dass Farbe nicht das einzige visuelle Mittel ist, um Informationen zu vermitteln, eine Handlung anzuzeigen, eine Reaktion anzustoßen oder ein Element zu unterscheiden. Für Datengrafiken heißt das: Lesende müssen Kategorien, Reihen, Zustände oder Bedeutungen auseinanderhalten können, ohne einen Farbton zu identifizieren.

Gute Alternativen:

direkte Textbeschriftungen und Werte
unterschiedliche Markerformen an Linien oder Punkten
durchgezogene, gestrichelte und gepunktete Linienstile
Muster, Texturen oder Konturen in Balken und Flächen
klare Symbole und aussagekräftige Legendentexte
eine Datentabelle oder eine Textzusammenfassung mit derselben wesentlichen Information

Welche Kombination am besten passt, hängt vom Diagrammtyp ab und davon, ob ein schneller Überblick oder exakte Werte gebraucht werden.

Bauen Sie das Diagramm um die Fragestellung

Formulieren Sie vor der Farbwahl in einem Satz die Kernaussage des Diagramms, etwa: „Der Umsatz wuchs in allen Regionen, am stärksten im Westen.“ Prüfen Sie anschließend, ob Lesende diese Frage beantworten könnten, wenn sie das Diagramm in Graustufen sehen.

Lautet die Antwort nein, ergänzen Sie einen nicht-farblichen Hinweis. Dieser einzelne Test deckt den häufigsten Barrierefreiheitsfehler auf: eine ansprechende Palette, die Information ausschließlich über den Farbton codiert.

Direkte Beschriftungen statt entfernter Legende

Legenden zwingen dazu, ein kleines Farbfeld einem Diagrammelement zuzuordnen – teils wieder und wieder. Bei ähnlichen Farben oder kreuzenden Linien wird das schwierig. Wo Platz ist, beschriften Sie die Reihe am Linienende, setzen Sie Werte neben die Balken oder kommentieren Sie den wichtigen Punkt direkt.

Statt einer blauen, orangen und grünen Linie mit Legende am Fuß setzen Sie den Kategorienamen ans Ende jeder Linie. Halten Sie die Beschriftung nah genug, damit sie nicht einer anderen Reihe zugeordnet wird. Die Farbe bleibt hilfreich, doch der Text übernimmt die Identifizierung.

Redundante Hinweise zum Diagrammtyp passend wählen

Liniendiagramme

Kombinieren Sie Linienstil, Markerform und Endbeschriftung. Eine durchgezogene Linie mit Kreisen, eine gestrichelte mit Quadraten und eine gepunktete mit Dreiecken bleiben unterscheidbar, selbst wenn ihre Farben ähnlich wirken.

Vermeiden Sie zu viele Reihen in einem Diagramm. Sind es viele, arbeiten Sie mit „Small Multiples“ – getrennten, einheitlich skalierten Diagrammen – statt zu erwarten, dass Lesende eine dichte Legende entwirren.

Balkendiagramme

Nutzen Sie direkte Kategoriebeschriftungen und Werte. Müssen Balken innerhalb derselben Gruppe unterschieden werden, ergänzen Sie Muster oder eine klare Kontur zusätzlich zur Farbe. Die W3C-Technik G111 beschreibt ausdrücklich den gemeinsamen Einsatz von Farbe und Muster bei Balken.

Bei gestapelten Balken beschriften Sie Segmente nach Möglichkeit direkt und stellen eine begleitende Tabelle bereit. Schmale Segmente sind für alle schwer zu lesen, auch bei guter Palette.

Streu- und Blasendiagramme

Verbinden Sie Markerformen mit Farbe und wählen Sie Größe und Kontrast so, dass Marker nicht verschwinden. Setzen Sie eine Kontur um Punkte, wenn die Füllung hell oder der Hintergrund unruhig ist. Überlappen sich Punkte, bieten Sie Filter, eine Datentabelle oder eine zweite Ansicht an, die Gruppen trennt.

Karten und Heatmaps

Ergänzen Sie die Füllfarbe um Beschriftungen, Grenzen, Symbole oder Muster. Ein Verkehrsplan kann etwa jede Linienfarbe mit einem eigenen Haltestellensymbol koppeln. Lassen Sie bei einer Choroplethenkarte die genaue Aussage nicht allein von einem feinen Hell-Dunkel-Verlauf abhängen: Ergänzen Sie eine sichtbare Skala, Werte und eine Tabelle oder eine Textaussage.

Auf Kontrast gestalten, nicht nur auf unterschiedliche Farbtöne

Farben können sich im Farbton unterscheiden und dennoch ähnlich hell sein – in Graustufen oder bei einer Farbsehschwäche verschmelzen sie dann. Kontrast zählt besonders bei dünnen Linien, kleinen Markern, Diagrammrändern und Text.

Für nicht-textliche grafische Objekte, die zum Verständnis nötig sind, arbeitet die WCAG-Leitlinie zum Nicht-Text-Kontrast in der Regel mit einem Schwellenwert von 3:1 gegenüber angrenzenden Farben. Der Kontext zählt: Manchmal vermittelt eine Beschriftung oder eine gleichwertige Tabelle die Information, ohne dass die Grafik allein unterschieden werden muss. Behandeln Sie die Kontrastprüfung als Teil der Gestaltungsprüfung, nicht als Ersatz für Beschriftungen und redundante Hinweise.

Nutzen Sie den Kontrast-Prüfer, um Vordergrund- und Hintergrundkontrast für Oberflächentext und einfache visuelle Elemente auszuloten. Prüfen Sie anschließend das gesamte Diagramm: Reale Layouts bringen Nachbarschaften, feine Striche, Hover-Zustände und Überlagerungen mit sich, die eine einzelne Farbpaarprüfung nicht erfasst.

Geben Sie die Daten hinter dem Bild frei

Diagramme sind Zusammenfassungen, kein Ersatz für den Zugang zu den Daten. Trägt ein Diagramm eine wichtige Entscheidung oder Aussage, ergänzen Sie eines oder mehrere dieser Elemente:

eine benachbarte Tabelle mit Kategorien und Werten
eine knappe schriftliche Zusammenfassung der Kernaussage
einen barrierefreien Download, etwa als CSV
eine Langbeschreibung für komplexe visuelle Zusammenhänge
per Tastatur erreichbare Tooltips oder eine fokussierbare Datenansicht bei interaktiven Diagrammen

Das verbessert die Nutzbarkeit für Screenreader-Nutzende ebenso wie für Menschen, die nicht jede visuelle Codierung unterscheiden können. Zudem lässt sich die Aussage überprüfen, ohne Balkenhöhen oder Tortenstücke zu schätzen.

Praktische Checkliste zur Diagrammprüfung

Nutzen Sie sie vor der Veröffentlichung eines Berichts, einer Präsentation, eines Produkt-Dashboards oder eines Artikels:

Nennt der Titel Thema und Zeitraum des Diagramms?
Lässt sich jede Reihe oder Kategorie ohne Farbe allein identifizieren?
Sind die wesentlichen Werte beschriftet, in einer Tabelle verfügbar oder im Text daneben beschrieben?
Haben Linien, Marker, Balken und Legendenelemente genug Kontrast dort, wo sie sich berühren oder überlappen?
Sind Beschriftungen bei üblichem Zoom und auf kleinen Bildschirmen lesbar?
Vermeidet das Diagramm mehrdeutige Rot-Grün-Statusangaben wie „gut“ und „schlecht“ ohne Text oder Symbol?
Erreichen Tastaturnutzende die Informationen eines interaktiven Diagramms?
Zeigt eine Prüfung in Graustufen oder unter Farbsehsimulation mehrdeutige Elemente?

Mit echten Inhalten und echten Menschen testen

Automatische Prüfungen und Simulationen sind nützliche Frühwarnsysteme, aber kein Beweis dafür, dass ein Diagramm für alle funktioniert. Testen Sie das fertige Diagramm in Originalgröße, im Produkt oder Dokument, in dem es erscheinen wird. Bitten Sie eine Testperson, ohne Hilfestellung die wichtigste Reihe, den höchsten Wert und die Kernaussage zu benennen.

Unser Farbseh-Simulator hilft Gestaltenden zu erkunden, wie ein Bild unter mehreren häufigen Farbsehunterschieden wirken kann. Betrachten Sie ihn als zusätzlichen Prüfschritt, nicht als Ersatz für Nutzerforschung oder eine WCAG-Bewertung.

Umfassendere Hinweise zur Oberflächengestaltung finden Sie unter Gestalten für Farbenblindheit.

Beispiel: ein Statusdiagramm verbessern

Stellen Sie sich ein Dashboard mit fünf Abteilungen vor: grüne Balken bedeuten „im Plan“, rote „hinter Plan“, gelbe „gefährdet“. Eine barrierefreiere Fassung könnte:

das Statuswort an jeden Balken schreiben: „Im Plan“, „Gefährdet“ oder „Hinter Plan“;
ein Symbol in die Beschriftung setzen – Häkchen, Warndreieck oder Pfeil – mit erklärendem Text;
Muster oder Konturen als zweiten visuellen Hinweis einsetzen;
den tatsächlichen Prozentwert und den Zielwert anzeigen;
unter dem Diagramm eine Tabelle mit Abteilung, aktuellem Wert, Ziel und Status bereitstellen.

Farbe lässt das Muster für viele weiterhin schneller erfassen. Sie ist nur nicht mehr der einzige Weg zum Verständnis.

Fazit

Barrierefreie Diagramme machen die Aussage robust. Direkte Beschriftungen, Muster, Linienstile, Kontrast und gleichwertige Daten helfen Menschen mit Farbsehschwäche, dieselbe Information zu erfassen wie alle anderen – und machen Ihre Arbeit für das gesamte Publikum klarer.

Kurze Antwort