Wie wir bei SRF (neu) Parteien einfärben
Bis zum heutigen Tag verwendete SRF die folgenden Farben, um Datenvisualisierungen über Parteien einzufärben:
Die Farben sind für normalsehende (Rot/Grün-Schwäche ausgenommen) superdeutlich unterscheidbar, aber auch ganz schön knallig. Sie wurden oft in Balkendiagrammen verwendet, wo das nicht so schlimm ist, aber sobald man sie zum Beispiel auf einer Karte oder in einem Flächendiagramm nebeneinanderstellen muss, knallt das ganz schön:
Die stark gesättigten Farben überreizen das Auge, wenn sie so direkt aufeinanderprallen. Die Sättigungswerte aus der obigen Tabelle zeigen: Im HSB Spektrum, in dem S für Sättigung steht, sind alle Farben zwischen 98 und 100 (und 100 ist das Maximum).
Besonders das extreme Rot (SP) und das grelle Grün (Grüne) — zwei Komplementärfarben können zu einem Flimmern in den Augen führen.
Ein weiteres Problem: SRF publiziert viele Grafiken auf beigem (genauer gesagt Ekrü-farbenem) Hintergrund. Die hellen Farben von Grünen, GLP, BDP und EVP sind darauf nur mit Mühe zu erkennen:
Aus den oben genannten Gründen sind wir von SRF nochmal über die (Farb-)Bücher und haben mit der folgenden Stossrichtung neue Farben festgelegt.
Zwei Grundsätze: Originalität und Gleichgewicht
1. Priorität: Nah am Original
Wo immer wir den Originalfarbton wählen können, den eine Partei in ihrem grafischen Auftritt selbst verwendet, machen wir das. Erst bei Konflikten beginnen wir am Farbton zu schrauben.
Bei Konflikten gilt: Die grössere Partei erhält den Vortritt. Nicht in jeder Berichterstattung finden dieselben Parteien statt. Es macht deshalb Sinn, jene Parteien zu priorisieren, die am meisten kantonale Sektionen und Sitze in den Parlamenten haben.
2. Priorität: Gleichgewicht
Ein weiteres grosses Problem der heutigen Farben: sie sind visuell sehr unterschiedlich schwer. Am besten feststellen kann man dies, wenn man die Farben in Graustufen umwandelt:
Schnell fällt auf: das visuelle Gewicht der Farben ist sehr unterschiedlich. Treffen zwei sehr unterschiedlich helle Farben aufeinander, wirken sie nicht gleich schwer, sondern die dunklere Farbe wirkt schwerer:
Bei Parteifarben handelt es sich jedoch um eine sogenannte kategorische Farbskala: Der Betrachter möchte schnellstmöglich zwischen den verschiedenen Kategorien (Äpfel / Birnen) unterscheiden können. Die einzelnen Kategorien bilden dabei keine Reihenfolge, sondern sind gleichwertig. Es ist deshalb erstrebenswert, dass alle Farben ein ungefähr gleich schweres visuelles Gewicht haben.
Verstärkt wird dieses Problem von einem weiteren Phänomen. Farben sind «von Grund auf» unterschiedlich schwer:
Oben abgebildet sind 36 Farben aus dem HSB-Farbmodells (gelegentlich auch HSV genannt). Die Buchstaben stehen für die Begriffe:
- Hue (Farbton)
- Saturation (Sättigung)
- Brightness (Helligkeit)
Von links nach rechts erhöht sich der Farbton laufend um 10 (von 0 bis 360) während die Sättigung und die Helligkeit konstant bleiben. Konvertieren wir diese Farbskala in Graustufen, sehen wir: Gelb ist grundsätzlich leichter / heller als Blau.
Dies ist eine Eigenheit des HSB-Farbraums. Wenn wir Farben möchten, die ein ähnliches visuelles Gewicht haben, müssen wir dies berücksichtigen. (Es gibt Farbräume wie LAB oder LCH, die anders funktionieren. Ich persönlich arbeite aber lieber mit HSB, da ich es intuitiver finde und er fix in Programmen wie Sketch integriert ist.)
Die Frage der Sättigung
Wie viel Sättigung verträgt also eine Partei-Farbskala? Betrachten wir zu Beginn einmal eine erste Farbe isoliert: Rot.
Wie rot muss ein Rot sein, um als Rot wahrgenommen zu werden, ohne gleich alarmistisch zu wirken? Die folgende Tabelle zeigt die Farbe in unterschiedlicher Helligkeit (Brightness) und Sättigung (Saturation) bei einem Farbwert (Hue) von 3:
Eine Sättigung von 100 wie bei den alten Farben wollen wir vermeiden. Eine zu tiefe Sättigung wirkt gerade bei der Farbe Rot aber schnell rosafarben oder verwaschen. Es gibt hier kein richtig oder falsch, mir scheint aber, bei einer Sättigung von 70 und einem Helligkeitswert von 90 erreichen wir einen guten Startwert für die weitere Arbeit.
Werfen wir also einen Blick auf die Logos der grössten Parteien und nehmen von jedem die prominenteste Farbe und vereinheitlichen diesen auf eine Sättigung von 70 und eine Helligkeit 90:
Folgende Probleme werden offensichtlich:
- Rot wird sowohl von linken als auch von rechten Parteien benutzt.
- Ein Sättigungswert von 90 wird nicht allen Farben gerecht. Es macht Farben mit Grünanteil extrem knallig. Grün ist ausserdem umstritten: Grüne, GLP und SVP sind nah beieinander.
- Gelb ist sogar noch schwieriger. BDP und EVP sind praktisch identisch. Ausserdem wirkt die Farbe bereits etwas Senf-ähnlich.
Das erste Problem können wir relativ rasch abhandeln: Ein Blick in die Geschichte zeigt: Rot gehört der Linken. Dies ist in allen Ländern Europas so. Für Parteien, die sich rechts positionieren, müssen wir andere Farben finden.
Zum zweiten Punkt: Die grünen Farben lassen sich noch relativ gut in der Sättigung reduzieren und farblich auseinanderschieben. Die Farbe Blau ist ebenfalls dankbar – der FDP macht diese niemand strittig. Die CSP schnappt sich Türkis.
Das dritte Problem ist etwas komplizierter.
Undankbares Gelb
Gelb ist die am wenigsten flexible Farbe. Dunkelt man sie ab, wird sie schnell matschig oder wirkt grün, hellt man sie auf, sieht man sie kaum noch:
Wenn wir die EVP von der BDP abgrenzen wollen, müssen wir also vor allem mit dem Farbton arbeiten. Am grünen Ende des Spektrums wird der Spielraum jedoch von der GLP begrenzt, am orangenen durch die CVP.
Da die EVP im Nationalrat mit der CVP eine gemeinsame Fraktion bildet, nähern wir die EVP dem Orangenen an.
Die folgende Übersicht zeigt die neu ausgearbeiteten Farben in einer Gegenüberstellung der betroffenen Parteien.
Es fällt auf: Besonders heikel sind nicht unbedingt die Kombinationen, die einen ähnlichen Farbton haben, sondern vor allem jene, die einen ähnlichen Helligkeitswert (oben vs. unten) aufweisen:
Denn Personen mit Rot-/Grün-Sehschwäche können diese Farbtöne nicht gut voneinander unterscheiden. Betrachten wir das Set einmal durch einen Sehschwächen-Simulator (ich benutze dafür das Mac OS Tool Sim Daltonism) sehen wir, wie nah sich all diese Farben für jemanden mit Grün- bzw. Rotsehschwäche sind:
Von links nach rechts kann man die Abstufung noch einigermassen erkennen, da es Helligkeitsunterschiede gibt. Der Unterschied zwischen den unteren und den oberen ist für Farbsehschwache eine Herausforderung.
Was tun? Indem wir die Grünen und die Grünliberalen relativ hell und etwas weniger gesättigt machen, versuchen wir sie einigermassen abzutrennen von den orangefarbenen CVP und EVP, die dafür etwas dunkler und gesättigter sind.
Annotationen sind elementar wichtig
Liegen die Farben nebeneinander, kann man sie noch einigermassen auseinanderhalten, liegen sie weiter weg, wird’s schwierig. Das ist auch der Grund warum man so eine Farblegende, wenn möglich, vermeiden sollte:
Stattdessen sollte man wo immer möglich Flächen und Linien direkt, also so nah wie möglich, anschreiben.
Die Neuen
Für die im Parlament vertretenen Parteien kommen wir nach dieser Logik zu folgenden neuen Farben:
Wenn wir einen Blick auf die Lightness-Werte, das visuelle Gewicht, der Farben werfen, sehen wir, dass wir die Werte einander deutlich annähern konnten:
Diese 14 Parteien sind natürlich nicht die einzigen Parteien in der Schweiz. Es ist schwierig, eine vollständige Liste zusammenzustellen für alle kantonalen Parteien und Listen, die je zu nationalen oder kantonalen Wahlen angetreten sind. Für 16 weitere Parteien haben wir Farbwerte nach dem neuen System festgelegt, die Liste ist aber nicht abschliessend:
Sonderfälle
Ein Wort noch zur CSPO: Die Christlich-soziale Partei Oberwallis gehört nicht zur Schweizerischen CSP, sondern ist eigenständig. Auch Sie hat einen Sitz im Nationalrat. Da im Kanton Wallis aber weder die EVP noch die BDP zu den Wahlen antreten, können wir der CSPO ein Gelb zuweisen, das ungefähr in der Mitte zwischen dem EVP- und dem BDP-Gelb liegt.
Die LDP, die liberal-demokratische Partei Basel-Stadt ist ebenfalls im Nationalrat vertreten. Sie bekommt dieselbe Farbe wie die «Liberalen», die 2009 mit der FDP fusioniert sind, aber ev. in historischen Grafiken dargestellt werden.
Inspiriert durch den Datawrapper-Blog-Artikel von Charlotte Rost habe ich die Farben noch auf dem HSL-Kreis dargestellt. Als Vergleich habe ich die alten Farben mit reduzierter Transparenz eingeblendet. Man sieht: neu gibt es keine Farben mehr, die ganz aussen am Kreis (hohe Lightness) sind, jene nahe am Zentrum (tiefe Lightness) sind etwas nach aussen gerückt.
Schrift
Der Lightness-Wert der Farben hat sich deutlich angeglichen. Ich habe mich deshalb gefragt: Kann man die Farben nun auch als Schriftfarbe verwenden?
Nicht ohne Weiteres. Würde man beispielsweise mit dem BDP-Gelb auf Weiss schreiben, so hätte dies gemäss WebAIM Contrast Checker einen Kontrastwert von 1,66. Viel zu wenig. Für eine Schriftgrösse von 18,66px wird ein Kontrastwert von mindestens 4,5 verlangt, möchte man dem WCAG Level AA entsprechen.
Deshalb habe ich für jede der Parteien zwei zusätzliche Versionen erstellt: eine (wenn nötig) aufgehellte Version, mit der man auf dunklen Hintergründen schreiben kann (Kontrast 4,5+ auf schwarz):
Und eine bei Bedarf abgedunkelte Version, mit der man auf weissem Hintergrund schreiben «darf»:
Möchte man die Parteifarbe nicht als Schriftfarbe verwenden, sondern im Gegenteil als Hintergrundfarbe, so habe ich zusätzlich für jede Partei definiert, ob man darauf Weiss oder Schwarz als Schriftfarbe verwenden sollte:
Ich habe jeweils überprüft, zu welcher Farbe (Schwarz oder Weiss) die Parteifarbe den höheren Kontrast aufweist. Was mich überrascht hat: Intuitiv hätte ich wohl mit Weiss auf das SVP-Grün geschrieben. Tatsächlich ist der Kontrast zwischen Weiss und Grün hier aber nur 4,2. Zwischen Schwarz und Grün beträgt er 5,0.
Open Source: Mitarbeit erwünscht
Für all jene, die gerne mit diesen Farbwerten arbeiten möchten, haben wir folgendes Google Spreadsheet veröffentlicht. Dort sind weitere kleinere Parteien und Jungparteien aufgeführt (80 an der Zahl). Gut möglich, dass in dieser Liste immer noch etwas fehlt oder ihr einen Fehler findet. Kommentiert einfach die entsprechende Zeile, wir werden die Tabelle gerne anpassen.
Parallel dazu sind die Farbcodes, Parteikürzel und Parteinamen in allen drei Landessprachen auch in diesem Github-Repo für die Nutzung in Javascript-Frontends verfügbar.
PS: Für vorher/nachher-Vergleiche kann man die Farben z.B. mit 60% Opazität verwenden:
