Entwickle Markenfarben mit klaren Rollen und prüfe Textkontraste im interaktiven Farblabor. Mit konkreten Tests für Website, Social Media und Print.
Wähle Farben über Markencharakter und Anwendung. Definiere Flächen-, Text- und Akzentrollen und teste konkrete Kombinationen. Eine attraktive Palette ist noch kein lesbares System.
Du hast fünf Farben gefunden, die nebeneinander grossartig aussehen. Auf der Website verschwindet die kleine Schrift trotzdem fast im Hintergrund. Willkommen an dem Punkt, an dem eine Farbpalette einen Beruf braucht. Markenfarben sollen einen Eindruck prägen und gleichzeitig Überschriften, Texte, Buttons und Bilder tragen. Beides gehört zusammen. Sonst funktioniert die Palette nur als hübscher Streifen in einer Präsentation.
Welche Wirkung sollen deine Markenfarben unterstützen?
Beginne mit deiner Positionierung und dem Umfeld, in dem die Marke erscheint. Soll sie ruhig, direkt, verspielt oder sachlich wirken? Welche Materialien, Bilder und Lichtstimmungen passen dazu? Die Antworten geben eine Richtung vor, ohne bestimmte Farben automatisch vorzuschreiben. Es gibt keine universelle Zuordnung, nach der Blau Vertrauen garantiert oder eine andere Farbe grundsätzlich Käufe auslöst.
Bedeutung entsteht im Zusammenhang: durch Kultur, Branche, Farbmenge, Typografie und Bildwelt. Ein dunkler Ton kann in einer grossen Fläche anders wirken als in einer dünnen Linie. Prüfe deshalb ganze Anwendungen statt isolierter Farbfelder. Die Frage ist nicht nur «Welche Farbe passt?», sondern auch «Wie viel davon und neben was?».
Eine Farbpalette braucht unterschiedliche Rollen
Ein Farbkonzept wird alltagstauglich, wenn jede Farbe eine Aufgabe hat. Eine Textfarbe muss auf den vorgesehenen Hintergründen lesbar sein. Eine Flächenfarbe kann Raum schaffen. Ein Akzent lenkt Aufmerksamkeit, verliert diese Wirkung aber, wenn er überall gleich laut eingesetzt wird. Du musst nicht jeder Farbe gleich viel Fläche geben, damit sie zur Identität gehört.
- Grundfläche: der Hintergrund, auf dem ein grosser Teil deiner Inhalte erscheint.
- Text: eine robuste Kombination für Fliesstext, Navigation und kleine Angaben.
- Sekundärfläche: eine erkennbare, ruhigere Abwechslung zwischen Abschnitten.
- Akzent: gezielte Betonung für ausgewählte Elemente und Momente.
- Funktion: verständliche Zustände für Fokus, Auswahl und Rückmeldungen.
Für wild & co. arbeiten wir mit Ink und warmen hellen Flächen. Sand und Taupe bringen Wärme, sind aber nicht automatisch für kleine Schrift geeignet. Die konkreten Markenwerte bleiben erhalten; ihre Einsatzrolle entscheidet, ob eine Kombination funktioniert. Andere Marken brauchen ihre eigene Herleitung und übernehmen nicht einfach unsere Palette.
Farblabor: schön ist gut, lesbar ist besser
Wähle unten Text- und Hintergrundfarbe aus unserer Palette. Das Labor berechnet den Kontrast aus den sRGB-Farbwerten und zeigt eine echte Textvorschau. So erkennst du, warum zwei harmonische Farbtöne als Flächen funktionieren können, als Kombination für kleine Schrift aber ungeeignet sind. Die Berechnung bezieht sich auf deckende Vollfarben.
Die WCAG-Anforderung für normalen Text auf Stufe AA liegt grundsätzlich bei mindestens 4,5:1, für grossen Text bei 3:1. Was als grosser Text gilt, hängt von Grösse und Gewicht ab. Das Labor verwendet deshalb für die Body-Empfehlung den strengeren Wert. Es prüft keine komplette Website und berücksichtigt keine Fotos, Transparenzen oder alle möglichen Zustände.
Das Farblabor
Der Test mit drei echten Anwendungen
Lege deine Palette auf eine mobile Leistungsseite, einen Social-Media-Beitrag und eine Offerte. Setze jeweils echte Texte ein. Lange Namen, kleine Kontaktangaben und mehrzeilige Buttons zeigen Schwächen schneller als perfekte Platzhalter. Prüfe auch, ob Links durch mehr als ihre Farbe erkennbar sind und der Tastaturfokus auf hellen wie dunklen Flächen sichtbar bleibt.
Ein zweiter Blick gehört den Bildern. Wenn deine Fotografie sehr warm ist, kann eine warme Fläche die Wirkung verstärken oder Details verschwimmen lassen. Bei einer wechselnden Bildwelt brauchst du gegebenenfalls mehr ruhige Flächen. Wähle das System so, dass das übliche Material darin funktioniert, nicht nur das eine besonders gut passende Moodbild.
Eine gute Farbpalette hat Charakter. Ein gutes Farbsystem hat Antworten für den Alltag.
Digital und Print: dieselbe Idee, verschiedene Bedingungen
Eine Farbe am leuchtenden Bildschirm und auf ungestrichenem Papier entsteht unter unterschiedlichen Bedingungen. Ein HEX-Wert beschreibt noch keinen abgestimmten Druck. Kläre mit der Produktion Material, Verfahren und nötige Farbprofile. Für wichtige Drucksachen ist eine geeignete Probe hilfreicher als die Annahme, dass ein Wert überall gleich aussehen wird.
Halte digitale Werte und freigegebene Produktionsangaben nachvollziehbar auseinander. Wenn ein Druckton angepasst wird, muss dafür nicht automatisch die Websitefarbe geändert werden. Ziel ist ein zusammengehöriger Eindruck unter realen Bedingungen. Kleine Materialunterschiede sind etwas anderes als ein unkontrolliert wechselndes Markenbild.
So dokumentierst du die Palette
Ein kleines Farbblatt kann bereits viel klären: Farbwerte, Rollen, erlaubte Textkombinationen und ein paar konkrete Anwendungen. Ergänze Beispiele dafür, welche Kombinationen vermieden werden sollen. Wenn dein Team Vorlagen nutzt, sollten diese Regeln dort schon umgesetzt sein. Eine Erklärung im Brand Guide alleine schützt keinen zu hellen Buttontext.
Bring bei einer Überarbeitung deshalb mehr als einen Screenshot deiner Lieblingsfarben mit. Eine Website-Seite, eine Präsentation und eine Drucksache zeigen, wo die Palette heute trägt und wo sie Unterstützung braucht. Damit können wir ein System entwickeln, das sich nach deiner Marke anfühlt und im Alltag zuverlässig nutzen lässt.
