Zitronengelb
Farben
Die vielfältige Farbpalette prägt unseren Auftritt massgeblich. Sie repräsentiert eine zeitgemässe und sich ständig verändernde Stadt Zürich und ermöglicht viele Kombinationsmöglichkeiten. Das breite Spektrum ist so gewählt, dass für jedes Thema und die entsprechende Zielgruppe eine stimmige Palette zur Verfügung steht – für den sozialen Bereich genauso wie für die Architektur oder Themen rund um die Natur. Die Farben wurden aufgrund ihrer Leuchtkraft selektiert, so dass sie im Printeinsatz funktionieren und im digitalen Raum besonders gut zur Geltung kommen.
Züriblau im Herzen
Rund um die Farbe «Züriblau» bietet die Palette ein lebendiges Set von Blautönen. Diese Farben können beispielsweise den Mittelpunkt der eingesetzten Farbkombination bilden, wenn Sie einen engen Bezug zur Dachmarke Stadt Zürich herstellen wollen. Kombiniert mit weiteren Farben der Palette entsteht ein erfrischendes und einzigartiges Aussehen für die Stadt Zürich.
Züriblau hat folgende Spezifikationen:
RGB: 15, 5, 160
HEX: #0F05A0
CMYK: 100, 85, 0, 0
Pantone: Blue 072
NCS: S 4055-R70B
RAL: 5002 Ultramarin
Die Farbpalette
Die gesamte Farbpalette reicht von der blauen Familie bis zu den Rändern des Farbspektrums – ein breites, jedoch in sich abgestimmtes System an Farben. Die daraus resultierende Palette ermöglicht für jede Anwendung eine zielgruppen- und themenspezifische Kommunikation. Nah am Leben, einfach und nützlich.
Grautöne
Mehrere Graufamilien ermöglichen es, bei jedem Design fein zu nuancieren und sinnvolle Kombinationen mit den restlichen Farben zu wählen.
Spezifikationen
Jede Farbfamilie wurde in zehn Farbabstufungen von hell bis dunkel unterteilt. RGB- und HEX-Werte werden für digitale Anwendungen bereitgestellt – zusammen mit Pantone- und CMYK-Werten für den Druck.
Lemongrass
Lindengrün
Kleeblatt
Tannengrün
Petrol
Cyan
Kobaltblau
Mitternachtsblau
Violett
Magenta
Rot
Koralle
Sonnengelb
Orange
Ocker
Warmgrau
Gray
Cool Gray
Farbkombinationen
Die definierten Farbfamilien ermöglichen uns verschiedene Kombinationen von Farben, die jeweils einen anderen Charakter aufweisen. Von ruhig, neutral und zurückhaltend über harmonisch bis hin zu aktiven und kontrastreichen Kombinationen. So ist es möglich, entsprechend der jeweiligen Kommunikationsaufgabe und adäquat zur Zielgruppe unterschiedlichste Farbstimmungen zu transportieren. Beispiele von möglichen Kombinationen sehen Sie hier.
Farbfamilie
Farbfamilie in Tannengrün
Farbfamilie in Orange
Zurückhaltend
Zurückhaltend mit hellen Tönen
Zurückhaltend mit gedeckten Farbtönen
Ton in Ton
Set an Rottönen
Set an Blautönen
Akzentfarbe
Blautöne als Hauptfarben, Akzentfarben als Ergänzung
Grüntöne als Hauptfarben, Akzentfarben als Ergänzung
Kräftig bunt
Kombination von unterschiedlichen, kräftigen Farben
Barrierefreiheit
Barrierefreiheit ist einer der drei Kommunikationsgrundsätze der Stadt Zürich.
Für die Beurteilung von barrierefreien Farbkontrasten orientieren wir uns an den Richtlinien WCAG 2.1. Diese definieren drei Stufen der Zugänglichkeit: A, AA, AAA. Unser grundsätzlicher Anspruch ist die Stufe AA. Damit stellen wir sicher, dass eine Farbkombination für die meisten (aber nicht alle) Menschen wahrnehmbar ist.
Für die visuelle Darstellung von Lesetext auf Stufe AA gilt ein Kontrastverhältnis von mindestens 4,5:1 im Web (Print: Michelson-Kontrast 0,6). Für grossen und/oder fett gesetzten Text reicht ein Verhältnis von 3:1 (Print: 0,5).
Mindestkontrast abhängig von Grösse und Fette der Schrift
| Kontrast (Web) | Schriftgrösse (px) | Schriftschnitt | Kontrast (Print) | Schriftgrösse (pt) |
|---|---|---|---|---|
| 4,5:1 | < 24px | Helvetica medium / Arial | 0,6 | < 18pt |
| < 18px | Helvetica heavy / Arial black | < 14pt | ||
| 3:1 | ≥ 24px | Helvetica medium / Arial | 0,5 | ≥ 18pt |
| ≥ 18px | Helvetica heavy / Arial black | ≥ 14pt |
Die Lesbarkeit von Texten und Grafiken wird beeinflusst durch
- Schriftgrösse
- Schriftschnitt: Je fetter der Text, desto besser stehen die Buchstaben auf dem Hintergrund (Faustregel).
- Text- und Hintergrundfarbe: Vielen Personen fällt es leichter, helle Schrift auf dunklem Hintergrund zu lesen als umgekehrt.
- Farbenfehlsichtigkeit: Nicht wenige Menschen haben Schwierigkeiten, beispielsweise rot und grün zu unterscheiden. Achten Sie darauf, vor allem beim Erstellen von Grafiken.
Für rein dekorative Bilder gibt es keine offizielle Kontrastanforderung. Wir regen jedoch an, auch dekorative Bilder für möglichst viele Menschen wahrnehmbar zu halten.
Kombinationen, die es zu vermeiden gilt
Die folgenden Farbkombinationen sollten Sie vermeiden, da Menschen mit Rot-Grün-Fehlsichtigkeit keine Unterschiede erkennen können.
Online-Rechner für Farbkontraste
Es gibt sehr viele Kontrastrechner. Die oben aufgeführten kostenlosen Online-Tools können wir empfehlen.
Farben im Einsatz
Farbflächen
Farben in Illustrationen
Typografische Kompositionen
Farben in der Fotografie
Don’ts
Farbeffekte oder neue Farben erstellen
Verwendung von zu vielen Farben (in einer Komposition)
Farbverläufe
Langer Lesetext sollte schwarz sein
Einfärben von Logo oder Logozone
Schwer lesbare Farbkombinationen
Pantone-Farben in Adobe
Die Adobe-Programme enthalten seit Herbst 2023 keine Pantone-Paletten mehr. Um weiterhin Pantone-Farbfelder nutzen zu können, benötigt man die Pantone-Connect-Erweiterung. Sie kostet ca. 90 CHF pro Jahr; die kostenlose Version dieser Erweiterung ist nicht alltagstauglich, da sie die städtischen Farben nicht enhält.
Wer die kostenpflichtige Pantone-Connect-Erweiterung möchte, kontaktiert bitte die eigene Fach-IT. Diese bestellt die Lizenz bei der OIZ und installiert die Erweiterung auf Ihrem Rechner. Die Kosten für das Abo trägt die Abteilung, die die Pantone-Erweiterung nutzt.
Pantone-Farben in einem Grafikprogramm anzuwählen ist lediglich eine Simulation der Farbe, die später gedruckt wird. Deshalb kann man auch auf Pantone-Paletten verzichten. Man verwendet im Grafikprogramm einen eigenen Vollton, der von der Druckerei im vereinbarten Pantoneton gedruckt wird. Dies benötigt einen Pantone-Fächer, gute Kommunikation mit der Druckerei und etwas Vorstellungsvermögen im Entwurf.