Barrierefreiheit

Text in Infografiken und Visualisierungen

• Um gut lesbar zu sein, soll die Schriftgrösse nicht kleiner als 12 Pixel sein.
• Wir verwenden die Farben Schwarz, Grau (Schwarz 60) und Weiss, um Text in Infografiken darzustellen.

Direkte Beschriftung und klare Zusammenhänge

• Bei gewissen Grafiktypen kann die Unterscheidbarkeit von Kategorien durch direkte Beschriftung verbessert werden.
• Wir verwenden gut lesbare vertikale und horizontale Achsen.
• Wir kontextualisieren die Information immer zum grafischen Element (Prinzip der Nähe: Was nahe zusammen liegt, wird als zugehörig interpretiert).

Zahlenformat

• Wir verwenden für sämtliche Zahlen Versalziffern, die in ihrer Grösse den Grossbuchstaben der Schrift entsprechen und eine homogene Breite aufweisen.
• Wir verwenden keine durchgestrichene Null.

Hintergrund

• Wir verwenden die Farben Weiss, Hellgrau (Schwarz 10 oder Schwarz 5) als Hintergrund für Infografiken. Wird die Grafik invertiert dargestellt, kann auch Schwarz (Schwarz 100 oder Schwarz 80) als Hintergrund verwendet werden.
• Bilder oder Muster im Hintergrund von Infografiken ist nicht erlaubt.

Vertikale Leserichtung

Der begrenzte horizontale Platz auf mobilen Geräten macht einen Orientierungswechsel hin zu einer vertikalen Leserichtung notwendig. Dies kann für den Nutzenden ungewohnt sein, weil horizontal ausgerichtete Infografiken gewohnter sind. Daher gilt es im Einzelfall abzuwägen, zwischen der allgemein bekannten Art der Darstellung und der auf mobile Geräte optimierten Gestaltungsvarianten. Kann der Aufwand geleistet werden, empfehlen wir unterschiedliche Varianten pro Ausgabegerät zu entwickeln (Responsive Infografiken).

Darum gelten folgende Regeln:

• Kein horizontales Scrollen in Infografiken.
• Keine Überlappungen von Texten, kein Weglassen und kein zu starkes Verkleinern.

Farben für Infografiken

Farbpalette

Für Infografiken empfehlen wir unsere erweiterte Farbpalette, die eine gute Lesbarkeit und Zugänglichkeit gewährleisten soll. Die Farben sind stark gesättigt und weisen einen hohen Kontrast von mindestens 3:1 zur Hintergrundfarbe auf.

Die Farbpalette ist in drei Gruppen unterteilt:

• Ein Spektrum mit kalten Farben mit Grün und Blau.
• Ein warmes Spektrum mit Magenta und orange-roten Farbtönen.
• Ein neutrales Spektrum mit Violett und Grautönen.

Farbwahl mit Akzentfarbe der Seite abstimmen

Um eine harmonische Farbkombination zwischen der Akzentfarbe der Themenseite und den Infografiken zu erreichen, empfehlen wir diese aufeinander abzustimmen.

Kann eine Infografik oder Visualisierung einfarbig monochrom gehalten werden, sollte diese in der Farbe der Themenseite gestaltet werden (Beispiel: wenn eine Seite die Akzentfarbe Blau hat, verwenden wir Blautöne für die Infografik).

Besteht die Infografik/Visualisierung aus einem Farbenpaar oder Farbentrio, sollte eine der Farben der Akzentfarbe der Seite entsprechen (Beispiel: wenn eine Seite die Akzentfarbe Blau hat, verwenden wir eine Blau/Magenta-Kombinationen für die Infografik).

Bei Infografiken mit mehr als drei Farben kann auf eine Abstimmung auf die Akzentfarbe der Seite verzichtet werden.

Farbenblindheit

Was Farbenblinde sehen

Diese Farbgruppen entsprechen etwa der Farbwahrnehmung von farbenblinden Menschen. Diese können verschiedene Rottöne genauso wenig unterscheiden wie Grün und Blau. Bei der Auswahl von Farben für Infografiken achten wir darum darauf, primär Farben aus unterschiedlichen Farbgruppen zu kombinieren.

Vorschläge für Farbkombinationen

Standardmässig wird jeweils eine Farbauswahl bzw. Kombination eingesetzt, die speziell auf Farbenblindheit optimiert ist.

Folgende Farbkombinationen eignen sich als Farbenpaar:

Folgende Farbkombinationen eignen sich als Farbentrio:

Infografiken mit mehr als sieben verschiedenen Kategorien sollten überdacht werden:

• Sind alle diese Kategorien wirklich nötig? Oder sind einige dieser Kategorien bloss Hintergrundinformation?
• Gibt es eine Möglichkeit, mehrere Kategorien zu einer zusammenzufassen?
• Wäre eine andere Darstellungsform sinnvoller?

Semantische Farben

Nach Möglichkeit verwenden wir in unseren Visualisierungen Farben, die intuitiv erkennbar machen, was sie repräsentieren. Grafiken mit einer logischen Farbzuweisung werden durch Nutzende schneller verstanden.

Als oft verwendete und intuitiv verständliche Farbthemen gelten Parteifarben, Geschlechterzuweisungen und Positiv/Negativ. Für diese Fälle gibt es vordefinierte Farbpaletten.

Politische Parteien

Wir empfehlen folgende fix definierten Farben, um politische Parteien auszuzeichnen:

Geschlecht

Wir empfehlen folgendes Farbenpaar, um die Geschlechter «Männlich» und «Weiblich» auszuzeichnen:

Farbabstufungen

Monochrom

Farbabstufungen in demselben Farbton für Visualisierungen bilden wir aus den jeweiligen Grundfarben (z.B. Dunkelblau, Blau, Cyan, Hellblau). So kann ein hohe Farbunterscheidung und Farbumfang gewährleistet werden ohne dass die Farbe übermässig an Kontrast zum Hintergrund verliert.

Divergierend

Farbabstufungen zwischen zwei Farbtönen bilden wir aus jeweils zwei Grundfarben (z.B. Dunkelblau, Hellblau zu Rosa, Dunkelrot) und Grau (Schwarz 20). So kann ein hohe Farbunterscheidung und Farbumfang gewährleistet werden ohne dass die Farbe an Kontrast zum Hintergrund verliert.