Infografiken
Barrierefreie Gestaltung
Allgemein
Infografiken und Daten-Visualisierungen sollen klar verständlich sein. Wir gestalten sie deshalb bewusst reduziert. Wir konzentrieren uns auf die zentrale Aussage und vermeiden überflüssige Informationen. So wird die Grafik leichter erfassbar – für alle Nutzenden, unabhängig von ihren individuellen Fähigkeiten oder Nutzungssituationen.
Darüber hinaus bieten wir alternative Zugänge, um die dargestellten Informationen barrierefrei erlebbar zu machen. Dazu gehören Alternativtexte, beschreibende Texte oder eine Aufbereitung in tabellarischer Form.
Reduzierte Darstellung mit Fokus auf die zentrale Aussage.
Keine komplexen Visualisierungen wie z. B. 3D-Effekte.
Alternativer Zugang
Infografiken und interaktive Visualisierungen sollen auch ohne visuelle Darstellung verständlich sein. Blinde und sehbeeinträchtigte Personen müssen die Inhalte erfassen und die zentrale Aussage nachvollziehen können. Je nach Inhalt des Diagramms eignen sich dafür unterschiedliche Formate, ein Alternativtext sollte dabei immer zur Verfügung stehen.
Alternativtexte
Alternativtexte sind kurze, prägnante Beschreibungen von Infografiken oder Visualisierungen, die von Screenreadern ausgelesen werden können. Sie benennen den Diagrammtyp und den dargestellten Datensatz – bei Bedarf auch die Hauptaussage. Ideal sind maximal 150 bis 200 Zeichen (inklusive Leerzeichen).
Beispiel – Allgemein formuliert:
„Balkendiagramm zu installierter Leistung erneuerbarer Energien (MW) in drei Landkreisen Baden-Württembergs.”
Beispiel – Mit Kernaussage:
„Balkendiagramm zu installierter Leistung erneuerbarer Energien (MW) in drei Landkreisen Baden-Württembergs, das zeigt, dass Schwäbisch Hall mit Abstand den höchsten Anteil hat.”
Erklärender Text
Ein zusätzlicher Alternativzugang kann ein Fließtext im direkten Umfeld der Infografik sein. Er beschreibt dieselben Informationen wie die Grafik und fasst zentrale Aussagen wie Trends oder Auffälligkeiten zusammen. In diesem Fall kann der Alternativtext allgemein formuliert sein, um Wiederholungen zu vermeiden.
„Im Jahr 2024 lag die installierte Leistung erneuerbarer Energien im Landkreis Schwäbisch Hall bei 830 MW und damit deutlich höher als im Ostalbkreis (611 MW) und im Ortenaukreis (601 MW). Der Landkreis Schwäbisch Hall weist damit die höchste installierte Gesamtleistung unter den drei Landkreisen auf.“
(Alt-Text: Balkendiagramm zu installierter Leistung erneuerbarer Energien (MW) in drei Landkreisen Baden-Württembergs.)
Tabellarische Darstellung
Als weitere Alternative zur grafischen Darstellung der Information kann eine HTML- oder Excel-Tabelle eingebunden werden. Diese eignet sich vor allem für kleinere Datensätze mit wenigen Kategorien. Bei umfangreichen Tabellen sollte eine Filterfunktion zur gezielten Datenauswahl vorhanden sein. In diesem Fall kann die Grafik für Screenreader ausgeblendet oder mit einem allgemeinen Alt-Text versehen werden. Wichtig: Der Dateiname der Tabelle sollte den Inhalt klar beschreiben.
Gestaltungsrichtlinien
Farbe
Für Infografiken stehen sämtliche Primär- und Nebenfarben zur Verfügung, die im Farbspektrum des Corporate Designs des Landes Baden-Württemberg definiert sind. Bei der Auswahl der Farben ist darauf zu achten, dass sie sich klar voneinander unterscheiden lassen, um Inhalte eindeutig und barrierefrei vermitteln zu können.
Beim Einsatz von Farben in Diagrammen sollte jede Farbe mindestens ein Kontrastverhältnis von 3:1 zum Hintergrund aufweisen, idealerweise erreichen die Farben auch untereinander dieses Kontrastverhältnis. Hellere Farben können in Ausnahmefällen eingesetzt werden, sollten dann jedoch mit einer Outline versehen werden. Das BaWü Gelb kommt ausschließlich dann zum Einsatz, wenn ein einzelner Wert besonders hervorgehoben werden soll oder das Diagramm nur eine Farbe hat (z. B. Histogramm).
Achtung
Die zusätzlichen Farben (Color Tokens) in den Digital Design Essentials, die Interaktionsmöglichkeiten aufzeigen, dürfen im Kontext von Infografiken nicht verwendet werden.
Farbeinsatz
Je nach Diagrammtyp und Komplexität kommen unterschiedliche Farbgruppen zum Einsatz. Grundsätzlich gilt: Einfache Diagramme sollten bevorzugt mit den Primärfarben des Corporate Designs arbeiten. Bei komplexeren Darstellungen kann auf die erweiterte Farbpalette mit Nebenfarben zurückgegriffen werden, um eine klare Unterscheidbarkeit der Inhalte sicherzustellen. Ziel ist in jedem Fall eine hohe Lesbarkeit und intuitive Erfassbarkeit der Daten.
Farbeinsatz in einfachen Diagrammen
In einfachen Diagrammen wird vorrangig mit Grauabstufungen gearbeitet, um eine ruhige und sachliche Darstellung zu gewährleisten. Das BaWü Gelb wird gezielt eingesetzt, wenn ein einzelner Wert hervorgehoben werden soll.
Farbeinsatz in komplexen Diagrammen
In komplexen Diagrammen setzen wir auf eine erweiterte Farbgestaltung, die Grauabstufungen mit Nebenfarben kombiniert. Dabei ist es sinnvoll, nicht nur verschiedene Farbtöne zu nutzen, sondern auch gezielt mit unterschiedlichen Helligkeitsstufen zu arbeiten. So lassen sich selbst viele Werte klar voneinander abgrenzen.
Monochromatische Diagramme
Wenn mehrere Diagramme miteinander verglichen werden, kann es sinnvoll sein, nur eine Nebenfarbe mit Grauabstufungen zu kombinieren. Die reduzierte Farbwahl unterstützt die Vergleichbarkeit.
Visuelle Trennung
Zwischen den Elementen sollte ein Abstand von mindestens 1 px/ 1 pt eingehalten werden. Wird BaWü Gelb oder eine andere helle Farbe (weniger als 3:1-Kontrast zum Hintergrund) verwendet, sollte zusätzlich eine dunkle Outline hinzugefügt werden, um ausreichenden Kontrast zu gewährleisten.
Mindestens 1 px Abstand zwischen den einzelnen Elementen der Infografik
Infografiken ohne Abstand zwischen den einzelnen Elementen
Eckenradius
Um die visuelle Abgrenzung zu unterstützen, erhalten die Flächen unserer Infografiken abgerundete Ecken mit einem Eckenradius.
Schraffuren
Zusätzlich zu Farben können Schraffuren eingesetzt werden, um Elemente klar voneinander abzugrenzen. Sie sind eine gute Ergänzung zur Farbkennzeichnung, da sie eine Codierung von Werten ermöglichen – auch für Menschen mit Farbsehschwäche. Schraffuren werden mit 50 % Weiß über die jeweilige Farbe gelegt. Das ist besonders hilfreich, wenn verschiedene Zustände einer Position dargestellt werden sollen.
Farbeinsatz in Diagrammelementen
Schrift wird grundsätzlich in BaWü Schwarz gesetzt, ebenso alle Führungslinien und die Grundlinie. Gitterlinien hingegen treten dezent in den Hintergrund und werden in Grau 4 dargestellt. Dadurch bleibt die Struktur sichtbar, ohne den Inhalt zu überlagern. Farben mit einem Kontrastverhältnis von weniger als 3:1 zum Hintergrund erhalten zusätzlich eine Outline in BaWü Schwarz, um ausreichende Sichtbarkeit und Trennschärfe zu gewährleisten.
Beschriftung
Beschriftung am Diagramm
Beschriftungen können entweder direkt am jeweiligen Wert ohne Führungslinien stehen oder durch Führungslinien etwas abgesetzt platziert werden. Wenn Führungslinien verwendet werden, sollten sie mindestens 1 px stark sein.
Legende
Legenden in Diagrammen sollten klar, präzise und gut lesbar sein. Sie erklären die Zuordnung von visuellen Merkmalen wie Farbe, Form oder Größe zu den dargestellten Daten und liefern ergänzende Informationen. Wichtig ist, dass jede Unterscheidung über mindestens zwei visuelle Merkmale erfolgt – niemals ausschließlich über die Farbe. Ergänzend können Schraffuren, Buchstaben oder Symbole eingesetzt werden. Erforderlich sind außerdem ein ausreichender Kontrast und eine einheitliche Platzierung innerhalb eines Mediums.
Wenn möglich, platzieren wir Beschriftungen direkt im Diagramm, um lange Legenden zu vermeiden.
Doppelte Kodierung mit Farbe plus Symbol, Buchstabe oder Schraffur verwenden.
Nur Zahlen oder Farben einsetzen, ohne zusätzliches unterscheidbares Merkmal.
Gitternetzlinien / Achsen
Achsen und Gitternetzlinien sollten nur eingesetzt werden, wenn sie für das Verständnis der Daten erforderlich sind. Um eine gute Lesbarkeit zu gewährleisten, sollten pro Diagramm möglichst nur Gitternetzlinien in eine Richtung (X- oder Y-Achse) verwendet werden. Führungslinien und Gitternetzlinien müssen sorgfältig aufeinander abgestimmt sein, da eine Überlagerung unübersichtlich wirken kann.
Grundlinie (X-Achse)
Es gibt verschiedene Möglichkeiten, eine Grundlinie im Diagramm darzustellen. Standardmäßig wird sie in BaWü Schwarz angelegt und kann mit oder ohne Anstriche verwendet werden. Gitternetzlinien werden nur eingesetzt, wenn keine Y-Dimension vorhanden ist.
Y-Achse
Die Y-Achse besitzt im Normalfall keine eigene Grundlinie, wird aber durch Gitternetzlinien erkennbar. Sie kann mit oder ohne Beschriftung dargestellt werden – abhängig vom Informationsgehalt der Achse.
Wichtig ist, dass der unterste Wert der Y-Achse immer mit angegeben wird, auch wenn er bei 0 liegt. So wird deutlich, ob die Y-Achse im Diagramm abgeschnitten ist oder nicht.
Gitternetzlinien im Hintergrund sind für das Verständnis des Diagramms hilfreich.
Nicht zu viele Gitternetzlinien verwenden oder Führungslinien und Gitternetzlinien überlagern.