You are currently viewing Farben für Infografiken

Farben für Infografiken

In dieser Arti­kel­serie zeige ich dir, wie du für deine Nonprofit-Orga­ni­sation Info­gra­fiken erstellst und verbreitest. In diesem Artikel gebe ich dir Tipps zum Design der Info­grafik für deine Non-Profit-Organisation.

Über­sicht über die Artikelserie

Farbwahl für deine Infografik

Bei der Farbwahl gilt für Diagramme: Weniger ist mehr. Einige Wege zu einem Farb­schema für deine Infografik:

  1. Du nutzt die Farbe deiner Orga­ni­sation, des Projekts oder der Publi­kation, in der die Info­grafik gedruckt wird. Diese Farbe, einige ihrer Schat­tie­rungen und einige Grau-Töne ergeben dein Farb­schema. Anstelle der Grau-Schat­tie­rungen kannst du auch eine andere helle, neutrale Farbe wählen.
  2. Du erstellst ein Farb­schema aus einer oder zwei Schmuck­farben, ihren Schat­tie­rungen, plus Grau-Schat­tie­rungen. Anstelle der Grau-Schat­tie­rungen kannst du auch eine andere helle, neutrale Farbe wählen.
  3. Du erstellst ein Farb­schema mit verschie­denen bunten Farben, die zuein­ander passen. Dabei helfen dir die Tools, die ich dir unten vorstelle. Ein neues Farb­schema macht Sinn, wenn du die Thematik der Info­grafik auch mit Farben darstellen willst, z. B. das Thema „Umwelt“ in Grün- und Braun­tönen oder „Kinder“ in bunten Farben. Oder wenn deine Info­grafik aus einer Illus­tration besteht, die mehr Farben benötigt.

Einsatz von Grau

Grau eignet sich, um Elemente hervor­zu­heben. Setze das, was wichtig ist, in Farbe. Das, was weniger wichtig ist, aber zum Verstehen essen­tiell, setzt du in grau.

Die folgende Grafik legt den Fokus auf den Anteil der Schüler, die ihre digi­talen Kompe­tenzen erweitert haben. Die anderen 5% sind im neutralen Grau gehalten.

Infografiken mit großer Prozentzahl, Donut-Diagramm und Schrift. Orange gehalten sind "95%" plus der dazugehörige Anteil am Donut-Diagramm, der Rest ist grau

Beispiel: Die Kate­gorie „weiß nicht“ wegzu­lassen, wäre nicht richtig. Schließlich fehlt so ein großer Teil der Antworten. Die Antwort­zahlen wären für den Betrachter verzerrt. Das Grau zeigt dem Betrachter, welche Antworten relevant sind, in diesem Fall „ja“ und „nein“. Liegt dein Fokus auf der Zahl der Menschen, die „weiß nicht“ geant­wortet haben? Dann färbe die anderen Antworten in Grau­tönen und diese Antwort in Farbe.

Eine Frage mit mehreren Antwortmöglichkeiten: ja, nein, weiß nicht. Ja und nein sind farbig, "weiß nicht" in grau.

Farben konse­quent nutzen

Nutze Farben konse­quent: Die Farbe deiner Über­schriften bleibt gleich. Du hast einen Grund, die Farbe der Über­schriften zu ändern? Etwa damit unter­schied­liche Themen­be­reiche unter­schied­liche Farben erhalten? Dann mach das. Aber: Ändere nicht grundlos ständig die Farbe deiner Über­schriften gleichen Rangs, die Farbe der Beschrif­tungen, etc.

Nütz­liche Tools bei der Farbwahl

In meiner Tool­liste zu Design findest du Tools, die dir bei der Farbwahl helfen. An dieser Stelle möchte ich dir noch zwei Tools vorstellen, die besonders für die Daten­vi­sua­li­sierung nützlich sind.

Für Daten­vi­sua­li­sie­rungen, etwa Kreis­dia­gramme, benö­tigst du häufig Schat­tie­rungen einer Farbe. Diese lassen sich ganz schnell und einfach mit dem Chromas.js Color Scale Helper finden. Gib einfach eine Start­farbe, etwa die Farbe deiner Orga­ni­sation, und mindestens eine zweite Farbe, etwa ein dunk­lerer Ton der Farbe, ein. Daraus erstellt das Tool dir eine Reihe von Farb­tönen. Die Anzahl der Farben, die du brauchst, wählst du einfach aus. So habe ich im Hand­um­drehen Schat­tie­rungen zu  meiner Blog­farbe gefunden:

Schattierungen meiner Blogfarbe

Im Color­picker for Data erstellst du Farb­ver­läufe und erhältst die Farben aus dem Verlauf für deine Daten­vi­sua­li­sierung. Das Tool zeigt dir, wie die Farben in einer Visua­li­sierung zusammen aussehen anhand einer Karte der USA.

Viz Palette hat mehrere prak­tische Funk­tionen: Kopiere einfach die hex-Werte deines Farb­schemas in das Kästchen links. Du wählst unter „Color Popu­lation“ verschiedene Farb­seh­stö­rungen aus und siehst, ob sich deine Farben auch mit einer Farb­seh­störung ausrei­chend vonein­ander unter­scheiden. Außerdem zeigt dir das Tool, wie die Farben zusammen in Diagrammen wirken. Weiter unten zeigt dir das Tool, ob die Farben auf großen oder kleinen Flächen oder als dünne Linien schwierig zu unter­scheiden sind.

Hilfe, wie finde ich denn jetzt die rich­tigen Farben?!

Du brauchst mehr Hilfe, um ein Farb­schema zu entwi­ckeln? Laura Elizabeth zeigt dir Schritt für Schritt, wie du eine Farbe, eine Akkzent­farbe und Grautöne zu einem Farb­schema kombi­nierst. Willst du mehr Farben mitein­ander kombi­nieren oder hast noch keinen Plan? Dann sieh dir den Artikel von Cameron Chapman zu Farben für Designer an, der dir viele verschiedene Farb­schemas zeigt und erklärt, wie du zu einem eigenen Farb­schema kommst.

Achtung, Lesbarkeit

Hast du Farben gefunden?

Prüfe kritisch, ob deine Schrift­farbe und der Hinter­grund genug Kontrast aufweisen. Es soll den Leser nicht anstrengen, deine Info­grafik zu lesen! Vermeide Farben, die die Augen anstrengen, z. B. krasses Pink. Das kann sich in Print und Online durchaus unterscheiden.

Genügend Kontrast sollte auch zwischen den Farben, die du in Diagrammen oder auf Karten einsetzt, bestehen.

Barrie­re­freie Farbwahl

Auch wenn du viel­leicht denkst, „Meine Leser werden das schon lesen können“, Kontrast ist wichtig, damit der Text auch für Menschen mit einge­schränkten Sehfä­hig­keiten zugänglich ist.

Diese drei Tools helfen dir, den Kontrast zwischen Farben zu testen. Suche dir eins aus, welches in der Bedienung gefällt:

Das Tool Contrast Checker gibt an, ob der Kontrast zwischen den gewählten Farben für Online-Grafiken ausrei­chend ist. Das Tool Acces­sible Colors liefert dir sogar einen alter­na­tiven Farbwert, wenn die Lesbarkeit deiner gewählten Farben im Web nicht ausreicht. Mit dem Kontrast­rechner von leserlich.info lassen sich die Lesbarkeit für Web und Druck berechnen.

Außer Kontrast solltest du beachten, Farben so einzu­setzen, dass auch Menschen mit einer Farb­seh­störung deine Grafiken verstehen. Deine Farb­pa­lette kannst du, wie beschrieben, bei Viz Palette testen. Bei Coblis kannst du ein Bild hoch­laden und dir ansehen, wie Menschen mit Farb­seh­störung das Bild wahr­nehmen. Wie du das Farb­schema änderst, falls es nicht barrie­refrei ist, erklärt dir Gregor Aisch.

Probleme beim Farben finden? Zu wenig Farben, nicht barrie­refrei oder schwer zu unter­scheiden? Graphic gibt Tipps, wie du Probleme bei der Farbwahl löst.

In dieser Arti­kel­serie zeige ich dir, wie du für deine Nonprofit-Orga­ni­sation Info­gra­fiken erstellst und verbreitest. In diesem Artikel gebe ich dir Tipps zum Design der Info­grafik für deine Non-Profit-Organisation.

Die Arti­kel­serie zu Infografiken

Schreibe einen Kommentar