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

[Canonical HTML page](https://gradiently.design/de/guide/accent-color)

Der Akzent ist der kleinste Teil einer Palette und der, den man zuerst bemerkt. So wählst du einen, der sich von deiner Basis abhebt, setzt ihn selten genug ein, damit er wirkt, und legst ihn in CSS fest.

## The short version

- Eine Akzentfarbe ist eine kontrastierende Farbe, die sparsam eingesetzt wird, um den Blick auf das wichtigste Element zu lenken, etwa einen Button, einen Preis oder ein Wort in der Überschrift.
- In der 60-30-10-Regel ist der Akzent die zehn Prozent, und gerade seine Seltenheit macht ihn wirksam.
- Ein guter Akzent unterscheidet sich von den Grundfarben in mindestens einer starken Hinsicht: Farbton, Helligkeit oder Sättigung.
- Ein Akzent, der viele verschiedene Aufgaben hat, signalisiert nichts mehr, also gib ihm eine Hauptrolle.
- In CSS färbt die Eigenschaft accent-color native Checkboxen, Radiobuttons, Schieberegler und Fortschrittsbalken ein.

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](https://gradiently.design/de/guide/60-30-10-rule) 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.

Ein Post im Hochformat, der lange Öffnungszeiten am Freitag ankündigt, mit einem kleinen Label über der Überschrift

In einem Post wie diesem gehört der Akzent an eine Stelle, etwa das kleine Label über der Überschrift, und nirgendwo sonst hin.

Ein Listen-Post im Hochformat mit dem Titel Drei Dinge zum Mitbringen für einen Workshop

Dasselbe Prinzip in einem Listen-Post: Wenn der Akzent auftaucht, markiert er nur die Überschrift.

## 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. **Kontrast im Farbton** Wähle von der gegenüberliegenden Seite des [Farbkreises](https://gradiently.design/de/guide/color-wheel). Paletten aus Marine und Petrol vertragen warme Akzente wie Koralle oder Bernstein, warme Paletten Blau oder Grün. [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors) sind die klassische Wahl.
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. **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. **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.

- Marine als Basis, Koralle als Akzent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Sand als Basis, tiefes Blau als Akzent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Waldgrün als Basis, Safran als Akzent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Fliedergrau als Basis, Rot als Akzent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Schwarz als Basis, Limette als Akzent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Zartrosa als Basis, Anthrazit als Akzent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Sechs Paletten, ungefähr im Verhältnis 70, 20 und 10 Prozent. Jeder Akzent unterscheidet sich von seiner Basis in Farbton, Helligkeit oder beidem.

## Wo der Akzent hingehört und wo nicht

| Einsetzen für | Fernhalten von |
| --- | --- |
| Den Haupt-Button oder Call to Action | Sekundär- und Abbrechen-Buttons |
| Ein Schlüsselwort, einen Preis oder ein Datum | Ganzen Absätzen Fließtext |
| Aktive Zustände: der aktuelle Tab, ein ausgewähltes Element | Jedem Icon in einer Werkzeugleiste |
| Kleine Markendetails: eine Linie, ein Punkt, ein Sticker | Großen Hintergründen hinter langem Text |
| Hervorhebungen im Diagramm: die eine Reihe, die zählt | Allen Reihen eines Diagramms gleichzeitig |

Ein Akzent mit einer Hauptaufgabe behält seine Bedeutung. Steht er auf allem, sticht nichts hervor.

> **Ein Akzent ist keine Fehlerfarbe** Wenn dein Akzent rot ist, denk daran, wie er neben Fehlermeldungen wirkt. Nutzer lesen einen roten Button vielleicht als destruktiv. Manche Marken mit roten Akzenten nehmen für Fehler ein anderes Rot oder zeigen Fehler zusätzlich mit Icon und Text statt nur mit Farbe.

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](https://gradiently.design/de/guide/color-contrast-accessibility): 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](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color).

```css
: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 */
}
```

Ein Akzent-Token für Formularelemente und den Haupt-Button, dazu ein tieferer Ton für Textlinks, damit sie auf Weiß den Kontrast bestehen.

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](https://gradiently.design/de/guide/website-color-scheme).

## 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](https://gradiently.design/de/guide/tech-color-palettes).

## FAQ

### Was ist eine Akzentfarbe im Design?

Eine kontrastierende Farbe, die sparsam eingesetzt wird, um den Blick auf das wichtigste Element zu lenken, etwa einen Button, ein Schlüsselwort oder einen Preis.

### Wie viel eines Designs sollte Akzentfarbe sein?

Höchstens etwa zehn Prozent, nach der 60-30-10-Regel. Viele starke Designs nutzen deutlich weniger.

### Wie wähle ich eine Akzentfarbe für meine Palette?

Sie sollte sich klar von deinen Grundfarben in Farbton, Helligkeit oder Sättigung unterscheiden. Teste sie dann in der kleinen Größe, in der sie tatsächlich erscheint.

### Was macht accent-color in CSS?

Sie legt die Färbung nativer Checkboxen, Radiobuttons, Schieberegler und Fortschrittsbalken fest, sodass Formularelemente ohne eigenes Styling zu deiner Marke passen.

### Kann eine Marke mehr als eine Akzentfarbe haben?

Ja, aber jede sollte eine eigene Aufgabe haben, etwa eine für Aktionen und eine für Hervorhebungen. Zwei Akzente mit derselben Aufgabe heben sich gegenseitig auf.