Akzentfarbe: So wählst du die eine, die wirklich arbeitet

Eine Akzentfarbe ist die kleine, kontrastreiche Farbe in einer Palette, die auf das Wichtige zeigt: den Button zum Klicken, den Preis, das eine Wort in der Überschrift. Um eine zu finden, die wirklich arbeitet, geh von deinen Grundfarben aus und wähle etwas, das sich klar in Farbton, Helligkeit oder Sättigung unterscheidet, und setz es sparsam ein. In der bekannten 60-30-10-Aufteilung ist es die zehn Prozent. Je seltener sie auftaucht, desto mehr bedeutet jedes Auftauchen.

Wofür eine Akzentfarbe da ist

Der Großteil eines Designs besteht aus Grund- und Nebenfarben: Hintergründe, Flächen, Text. Der Akzent ist die Ausnahme, die dem Auge sagt, wohin es soll. Damit ist er die funktionalste Farbe, die du hast. Auf einer Website markiert er die Hauptaktion, auf einem Poster landet er auf dem Datum, in einer Marke wird er zu dem Detail, an das man sich erinnert, ein farbiger Schlusspunkt oder ein einzelner leuchtender Streifen.

Die 60-30-10-Regel gibt die Anteile vor: etwa sechzig Prozent dominante Farbe, dreißig Prozent Nebenfarbe, zehn Prozent Akzent. Sieh die zehn als Obergrenze, nicht als Ziel. Viele der besten Layouts nutzen weit weniger.

So wählst du eine Akzentfarbe

Kontrast ist die ganze Aufgabe. Sieh dir deine Grund- und Nebenfarben an und frag dich, was sie gemeinsam haben, dann mach den Akzent in mindestens einer starken Hinsicht anders.

1. 1

   Kontrast im Farbton

   Wähle von der gegenüberliegenden Seite des Farbkreises. Paletten aus Marine und Petrol vertragen warme Akzente wie Koralle oder Bernstein, warme Paletten Blau oder Grün. Komplementärfarben sind die klassische Wahl.

2. 2

   Kontrast in der Helligkeit

   Auf dunkler Basis ein heller Akzent, auf heller Basis ein tiefer. Eine gedämpfte Palette aus Grautönen verträgt einen schwarzen Akzent genauso gut wie einen leuchtenden.

3. 3

   Kontrast in der Sättigung

   Zwischen weichen, staubigen Farben wirkt eine gesättigte Farbe als Akzent, selbst wenn sie denselben Farbton hat. Eine Tonpalette mit reinem Zinnoberrot als Akzent ist ein gutes Beispiel.

4. 4

   In echter Größe testen

   Ein Akzent ist meist klein. Prüf ihn als Button-Beschriftung oder dünne Unterstreichung, nicht als großes Farbfeld, denn kleine Farbflächen wirken dunkler und matter.

Wo der Akzent hingehört und wo nicht

Leuchtende Akzente wie Limette, Gelb und Mint versagen oft als Text auf Weiß. Nutze sie als Flächen mit dunklem Text darauf und prüf jede Kombination anhand der Richtlinien zum Farbkontrast: mindestens 4,5:1 für Fließtext und 3:1 für große Schrift und Bedienelemente.

Ein schneller Check hilft, wenn sich der Akzent überall eingeschlichen hat. Mach einen Screenshot deiner Startseite oder einer Woche Posts, zeichne ihn leicht weich und schau, wo der Akzent auftaucht. Springt dein Auge auf drei oder vier Stellen gleichzeitig, stuf alle bis auf die wichtigste zur Nebenfarbe herunter. Springt es auf nichts, liegt der Akzent wahrscheinlich zu nah an der Basis und braucht mehr Kontrast in Farbton oder Helligkeit.

Die CSS-Eigenschaft accent-color

Im Web färbt accent-color native Formularelemente in einer Zeile ein: Checkboxen, Radiobuttons, Schieberegler und Fortschrittsbalken. Aktuelle Versionen der großen Browser unterstützen sie, Details stehen in der Referenz von MDN.

:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}

Browser passen die Farbe von Häkchen oder Regler innerhalb eines Elements eventuell an, damit es gegen deinen Akzent lesbar bleibt, also teste helle und dunkle Akzente. Für die übrigen Farben einer Website lies Farbschema für Websites.

Akzente auf Verläufen und Fotos

Auf einem satten Hintergrund hat ein Akzent mehr Konkurrenz. Hol ihn von außerhalb der Farbfamilie des Hintergrunds: ein warmer Akzent auf einem kühlen Verlauf oder ein fast Weiß auf einem bunten. In Gradiently wählt Auto-Ink für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, so bleiben die Worte lesbar, während sich der Hintergrund bewegt, und dein Akzent muss nur seine eine Aufgabe erfüllen. Mehr zu Paletten rund um eine starke Farbe findest du unter Farbpaletten für Tech.