So entsteht eine praxistaugliche Farbpalette für eine Marke

1. Beginne mit Anwendungen, nicht mit der Anzahl der Farben

Eine Reihe von fünf ansprechenden Farben lässt wichtige Fragen offen. Welche eignet sich für einen Absatz? Welche bildet den Hintergrund? Kann der Kunde die Akzentfarbe für eine Reservierungsschaltfläche oder eine Diagrammbeschriftung verwenden? Liste zunächst auf, was die Markenidentität als Erstes abdecken muss: zum Beispiel eine Speisekarte, eine kleine Website, Verpackungen und eine Präsentation.

In dieser fiktiven Übung ist Field Table ein Nachbarschaftscafé. Seine Palette enthält Forest #24352B, Oat #F7F3E8 und Harvest #D7A84B. Diese erfundenen Beispiele zeigen eine Methode zur Dokumentation von Gestaltungsvorgaben. Sie sind weder eine fertige Markenidentität noch ein allgemeingültiges Rezept.

Sammle einige echte Texte, bevor du ergänzende Farbtöne auswählst. Ein längerer Hinweis zu Öffnungszeiten und eine Preisangabe sind bessere Tests als ein dekoratives Wort auf einer leeren Zeichenfläche.

2. Weise den Farben konkrete Rollen zu

Schreibe die Rollen neben die Farbwerte. Forest ist die Standardtextfarbe, Oat eine helle Fläche und Harvest eine Akzentfläche. Diese Beschreibungen sind hilfreicher als „Farbe 1“, „Farbe 2“ und „Farbe 3“. Eine Rolle kann je nach Kontext unterschiedliche Werte haben, aber jede Variante sollte bewusst gewählt und dokumentiert sein.

USWDS bietet ein öffentlich zugängliches Beispiel für nach Rollen geordnete Themenfarben. Übernimm die Idee, den Zweck einer Farbe zu benennen, nicht die konkrete Farbpalette für Behörden. Für Field Table genügt eine kurze Übersicht der Farbrollen. Es gibt keinen Grund, eine feste Anzahl von Farben oder eine allgemeingültige prozentuale Aufteilung vorzuschreiben.

Halte Markenakzente von semantischen Farben für Fehler, Warnungen und Erfolgsmeldungen getrennt. Eine warme Akzentfarbe der Marke ist nicht automatisch eine Warnfarbe, und eine grüne Markenfarbe sollte nicht das einzige Signal für einen erfolgreichen Vorgang sein. Benenne und dokumentiere diese Rollen separat, wenn der Kunde eine Benutzeroberfläche braucht.

Weiterführende Artikel: USWDS: Tokens für Themenfarben · USWDS: Tokens für Zustandsfarben

3. Prüfe Vordergrund und Hintergrund gemeinsam

Kontrast ist eine Eigenschaft zweier Farben in ihrer konkreten Anwendung. In der folgenden Matrix sind alle Farben deckende sRGB-Werte auf einfarbigen Hintergründen. Die Kontrastverhältnisse wurden aus der relativen Leuchtdichte berechnet. Die angezeigten Zahlen sind zur besseren Lesbarkeit gerundet; ob eine Kombination die Anforderung erfüllt, wird jedoch anhand des ungerundeten Werts entschieden.

Für Textkontrast nach WCAG AA beträgt der Mindestwert 4,5:1 bei normalem Text und 3:1 bei großem Text. Als groß gilt Text, der in der tatsächlichen Darstellung mindestens 18 pt (24 CSS px) oder bei Fettdruck 14 pt (etwa 18,7 CSS px) groß ist. Prüfe den Text in seiner tatsächlichen Anwendung und nicht nur die Punktgröße in einer Designdatei. Runde einen knapp zu niedrigen Wert nicht auf, um die Anforderung zu erfüllen. Diese Prüfungen betreffen ausschließlich den Textkontrast.

Weiterführende Artikel: W3C: Textkontrast

4. Trenne das Logo von ergänzenden Farben

Die Ausnahme für Logos gilt nicht für gewöhnliche Texte im Markendesign. Halte die freigegebenen Logodateien und die Regeln für ihre Platzierung von Vorgaben für Text, Schaltflächen und Navigation getrennt.

In unserem Beispiel ist weiße Schrift auf Harvest schwer zu erkennen. Schrift in Forest auf derselben Harvest-Fläche bietet einen stärkeren Textkontrast. So lässt sich das ergänzende Layout verbessern, ohne das freigegebene Logo stillschweigend zu verändern.

Wenn ein ergänzender Farbton dunkler werden muss, weise dem neuen Wert eine eigene Rolle zu und zeige, wo er verwendet werden darf. Ersetze nicht jedes Vorkommen einer ursprünglichen Markenfarbe, ohne die Gestaltung zu prüfen und den Umfang der Änderung abzustimmen.

5. Erstelle eine kleine Musteranwendung mit echten Inhalten

Gestalte einen Abschnitt einer Speisekarte, eine Karte mit Öffnungszeiten und eine Reservierungsschaltfläche. Verwende in allen drei Anwendungen dieselben Farbrollen. Probiere anschließend eine längere Überschrift und eine schmale mobile Ansicht aus. Prüfe die tatsächliche Schriftgröße und Schriftstärke, nicht nur das Ergebnis eines Kontrastrechners.

Wenn Farbe einen Status oder eine Kategorie vermittelt, ergänze einen weiteren sichtbaren Hinweis, etwa eine Beschriftung oder eine Form. Eine Diagrammlegende sollte jede Datenreihe eindeutig kennzeichnen. Verlange nicht von Kunden, „Grün bedeutet verfügbar“ allein anhand der Farbe zu erkennen.

Behandle den Dunkelmodus, Fotos, Transparenz und Farbverläufe als eigene Fälle. Eine auf einer einfarbigen hellen Fläche geprüfte Kombination sagt nichts über Text auf einem bewegten Bild oder einem anderen Hintergrund aus.

Weiterführende Artikel: W3C: Verlasse dich nicht allein auf Farbe

6. Übergib Entscheidungen, nicht nur Werte

Dokumentiere den Farbnamen, die Rolle, den exakten digitalen Farbwert, die erlaubte Vordergrund-Hintergrund-Kombination und ein realistisches Beispiel. Kennzeichne Kombinationen, die nicht für normalen Text verwendet werden sollten. Führe Vorgaben für die Druckproduktion separat auf und stimme sie auf das tatsächliche Druckmaterial, das Verfahren und den Dienstleister ab.

Das folgende Arbeitsblatt bietet künftigen Gestaltern Platz, um Änderungen und ihre Gründe festzuhalten. Gib es zusammen mit den freigegebenen Logodateien und den übrigen Gestaltungsrichtlinien weiter. Bezeichne nicht eine ganze Marke als „barrierefrei“, nur weil mehrere Textkombinationen die Kontrastanforderung erfüllen.

Version und verantwortliche Person: …
Anwendung: …
Rolle und Farbwert: …
Vordergrund / Hintergrund: …
Schriftgröße und Schriftstärke: …
Ungerundeter Kontrast und Ergebnis: …
Erlaubte Verwendung und Beispiel: …
Einschränkungen und weitere Prüfungen: …

Weiter mit: RGB- und CMYK-Vorgaben für die Übergabe dokumentieren

Häufige Fragen