Welche Farben passen zusammen? Grundlagen der Farbgestaltung

Der Farbkreis – ein praktisches Hilfsmittel

Der Farbkreis zeigt, wie verschiedene Farben zueinanderstehen. Er hilft dir dabei, passende Kombinationen zu finden, ohne dich ausschließlich auf dein Bauchgefühl verlassen zu müssen.

In einem klassischen Farbkreis liegen beispielsweise Rot, Gelb und Blau in gleichmäßigen Abständen zueinander. Dazwischen befinden sich Mischfarben wie Orange, Grün und Violett.

Besonders interessant ist die Anordnung der Farben. Farben, die nebeneinanderliegen, wirken häufig harmonisch. Gegenüberliegende Farben erzeugen dagegen einen stärkeren Kontrast.

Mein Tipp: Wenn du dir bei einer Farbkombination unsicher bist, wirf einen Blick auf einen Farbkreis. Er bietet eine gute erste Orientierung.

Harmonische und kontrastreiche Farbkombinationen

Nicht jede Farbkombination erzeugt dieselbe Wirkung. Je nachdem, welche Farben du auswählst, kann eine Gestaltung ruhig, lebendig oder besonders auffällig erscheinen.

Drei grundlegende Möglichkeiten sind:

Ähnliche Farben: Farben, die im Farbkreis nebeneinanderliegen, beispielsweise Blau und Türkis, ergeben häufig ein ruhiges Gesamtbild.

Komplementärfarben: Gegenüberliegende Farben wie Blau und Orange erzeugen einen deutlichen Kontrast. Das kann beispielsweise hilfreich sein, wenn du bestimmte Elemente hervorheben möchtest.

Eine Farbe in mehreren Abstufungen: Verschiedene Helligkeiten und Sättigungen derselben Farbe wirken meist besonders einheitlich. Ein Beispiel wären Dunkelblau, Mittelblau und ein sehr helles Blau.

Wichtig ist allerdings, dass du die Farben nicht zwangsläufig zu gleichen Anteilen verwendest.

Mein Tipp: Wähle zunächst eine Hauptfarbe und ergänze sie durch eine oder zwei passende Farben. So vermeidest du ein unruhiges Gesamtbild.

Die 60-30-10-Regel – weniger ist oft mehr

Eine einfache Orientierung für die Verteilung von Farben ist die sogenannte 60-30-10-Regel.

Dabei werden die Farben ungefähr folgendermaßen eingesetzt:

• 60 % Hauptfarbe: Sie bestimmt den größten Teil der Gestaltung, beispielsweise den Hintergrund.
• 30 % Ergänzungsfarbe: Sie sorgt für Abwechslung und strukturiert einzelne Bereiche.
• 10 % Akzentfarbe: Sie hebt wichtige Elemente wie Schaltflächen oder Hinweise hervor.

Ein Beispiel für eine Website:

Du verwendest Weiß oder Hellgrau als Hauptfarbe, Dunkelgrau für größere Gestaltungselemente und ein kräftiges Rot als Akzent.

Dadurch entsteht ein klares Gesamtbild, ohne dass die Seite langweilig wirken muss.

Die Prozentwerte sind allerdings keine feste Vorschrift. Sie dienen lediglich als Orientierung und können je nach Gestaltung angepasst werden.

Mein Tipp: Nutze kräftige Akzentfarben gezielt. Wenn auf einer Website alles hervorgehoben wird, fällt am Ende nichts mehr besonders auf.

Gute Farbkontraste verbessern die Lesbarkeit

Farben sollen nicht nur gut aussehen. Sie müssen auch dafür sorgen, dass Texte und wichtige Bedienelemente problemlos erkannt werden können.

Hellgraue Schrift auf weißem Hintergrund mag dezent wirken, ist aber häufig schlecht lesbar.

Ähnliches gilt für rote Schrift auf dunkelgrauem Hintergrund oder andere Kombinationen mit geringem Helligkeitsunterschied.

Besonders bei Websites ist ein ausreichender Kontrast wichtig, damit auch Menschen mit eingeschränktem Sehvermögen die Inhalte gut erkennen können.

Für normalen Fließtext wird nach den WCAG-Richtlinien in der Regel ein Kontrastverhältnis von mindestens 4,5:1 empfohlen beziehungsweise für die Konformitätsstufe AA gefordert. Für große Schrift gelten unter bestimmten Voraussetzungen geringere Anforderungen.

Mit kostenlosen Online-Werkzeugen wie dem WebAIM Contrast Checker kannst du überprüfen, ob deine gewählten Textfarben ausreichend Kontrast bieten.

Mein Tipp: Prüfe deine Gestaltung auch einmal in Graustufen. Wenn wichtige Elemente dann kaum noch voneinander zu unterscheiden sind, solltest du die Kontraste überarbeiten. Ein Graustufentest ersetzt allerdings keine richtige Kontrastprüfung.

Typische Fehler bei der Farbauswahl

Auch bei der Farbgestaltung gilt: Mehr ist nicht automatisch besser.

Ein häufiger Fehler besteht darin, zu viele kräftige Farben gleichzeitig einzusetzen. Dadurch konkurrieren Überschriften, Schaltflächen und andere Elemente miteinander.

Ebenso problematisch ist eine uneinheitliche Verwendung von Farben. Wenn beispielsweise jede Schaltfläche anders aussieht, erkennen Besucher möglicherweise nicht sofort, welche Elemente dieselbe Funktion haben.

Auch die Bedeutung von Farben sollte nicht unterschätzt werden. Rot kann beispielsweise Aufmerksamkeit erzeugen, wird aber häufig auch mit Warnungen oder Fehlern verbunden.

Die tatsächliche Wirkung hängt jedoch immer vom Zusammenhang, der Zielgruppe und der übrigen Gestaltung ab.

So machst du es besser:

Lege für deine Website oder deine Geschäftsausstattung eine kleine Farbpalette fest.

Notiere dir die verwendeten Farbwerte, beispielsweise als HEX-Codes wie #FFFFFF für Weiß oder #111111 für ein sehr dunkles Grau.

Verwende diese Farben anschließend möglichst einheitlich.

Mein Tipp: Definiere nicht nur deine Haupt- und Akzentfarben, sondern auch feste Farben für Überschriften, Fließtext, Hintergründe und Schaltflächen. Das erleichtert spätere Änderungen erheblich.