accent-color

accent-color ändert die Akzentfarbe von nativen Formularelementen wie Checkboxen, Radio-Buttons, Range-Slidern und Fortschrittsbalken. Vor accent-color war das Styling dieser Elemente aufwendig und erforderte eigene CSS-Implementierungen oder JavaScript-Bibliotheken. Mit einer einzigen Zeile CSS kannst du jetzt die Markenfarbe auf alle nativen Controls anwenden, ohne ihre Funktionalität oder Barrierefreiheit zu beeinträchtigen.

Steckbrief accent-color

Syntax: accent-color: auto | <color>
Initialwert: auto
Vererbt: Ja
Animierbar: Ja

Kategorie: Farben & Hintergründe
Werte: 2
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

accent-color wirkt nur auf bestimmte native HTML-Elemente: <input type="checkbox">, <input type="radio">, <input type="range"> und <progress>. Andere Formularelemente wie <select>, <input type="text"> oder <button> werden nicht beeinflusst.

Das Besondere an accent-color: Der Browser passt die Kontrastfarbe automatisch an. Setzt du eine dunkle Akzentfarbe, wird das Häkchen in der Checkbox weiß. Bei einer hellen Farbe wird es dunkel. Das stellt sicher, dass die Bedienelemente immer gut erkennbar bleiben.

Da accent-color vererbt wird, kannst du sie einmal auf body oder einen Wrapper setzen und alle Formularelemente darin übernehmen die Farbe. Das macht globales Theming besonders einfach.

Syntax & Werte

2 Werte

Wert	Beschreibung	Beispiel
`auto`	Browser verwendet seine Standardfarbe für Formularelemente. (Standard)	accent-color: auto
`<color>`	Beliebiger CSS-Farbwert. Der Browser passt die Kontrastfarbe automatisch an.	accent-color: #1a56db

Beispiele

5 Beispiele

Die häufigsten Anwendungsfälle: Checkboxen und Radio-Buttons in der Markenfarbe.

Checkboxen und Radio-Buttons

.blue   input { accent-color: #1a56db; }
.green  input { accent-color: #059669; }
.red    input { accent-color: #dc2626; }
.purple input { accent-color: #7c3aed; }

<div class="accent-demo">
<div class="accent-group a-blue">
  <label><input type="checkbox" checked /> Blau</label>
  <label><input type="radio" name="color1" checked /> Option A</label>
  <label><input type="radio" name="color1" /> Option B</label>
</div>
<div class="accent-group a-green">
  <label><input type="checkbox" checked /> Grün</label>
  <label><input type="radio" name="color2" checked /> Option A</label>
  <label><input type="radio" name="color2" /> Option B</label>
</div>
<div class="accent-group a-red">
  <label><input type="checkbox" checked /> Rot</label>
  <label><input type="radio" name="color3" checked /> Option A</label>
  <label><input type="radio" name="color3" /> Option B</label>
</div>
<div class="accent-group a-purple">
  <label><input type="checkbox" checked /> Lila</label>
  <label><input type="radio" name="color4" checked /> Option A</label>
  <label><input type="radio" name="color4" /> Option B</label>
</div>
</div>

Range-Slider übernehmen die Akzentfarbe für den ausgefüllten Track und den Thumb.

Range-Slider

.volume     { accent-color: #1a56db; }
.brightness { accent-color: #059669; }
.warmth     { accent-color: #f59e0b; }

<div class="range-demo">
<div class="range-row">
  <label>Lautstärke</label>
  <input type="range" class="r-blue" value="70" />
</div>
<div class="range-row">
  <label>Helligkeit</label>
  <input type="range" class="r-green" value="50" />
</div>
<div class="range-row">
  <label>Wärme</label>
  <input type="range" class="r-amber" value="30" />
</div>
</div>

<progress>-Elemente passen ihre Füllfarbe an die accent-color an.

Fortschrittsbalken

.download { accent-color: #1a56db; }
.upload   { accent-color: #059669; }
.storage  { accent-color: #dc2626; }

<div class="progress-demo">
<div class="progress-row">
  <label>Download</label>
  <progress class="p-blue" value="75" max="100"></progress>
</div>
<div class="progress-row">
  <label>Upload</label>
  <progress class="p-green" value="45" max="100"></progress>
</div>
<div class="progress-row">
  <label>Speicher</label>
  <progress class="p-red" value="90" max="100"></progress>
</div>
</div>

Da accent-color vererbt wird, reicht eine einzige Deklaration auf dem Wrapper, um alle Formularelemente darin einheitlich zu stylen.

Globales Styling mit accent-color

.settings-form {
  accent-color: #7c3aed;
  /* Alle Checkboxen, Radios, Slider
     und Progress-Bars werden lila */
}

<div class="global-demo">
<h4>Einstellungen</h4>
<div class="form-group">
  <input type="checkbox" id="notify" checked />
  <label for="notify">Benachrichtigungen</label>
</div>
<div class="form-group">
  <input type="checkbox" id="dark" />
  <label for="dark">Dark Mode</label>
</div>
<div class="form-group">
  <label>Lautstärke</label>
  <input type="range" value="60" />
</div>
<div class="form-group">
  <label>Fortschritt</label>
  <progress value="65" max="100"></progress>
</div>
</div>

In einem Dark Mode sollte die Akzentfarbe hell genug sein, damit sie auf dunklem Hintergrund gut erkennbar bleibt.

Dark Mode Kontrast

:root {
  accent-color: #1a56db;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #60a5fa; /* Hellere Variante */
  }
}

<div class="dark-demo">
<div class="mode-box light-mode">
  <h4>Light Mode</h4>
  <label><input type="checkbox" checked /> Aktiv</label>
  <label><input type="checkbox" /> Inaktiv</label>
</div>
<div class="mode-box dark-mode">
  <h4>Dark Mode</h4>
  <label><input type="checkbox" checked /> Aktiv</label>
  <label><input type="checkbox" /> Inaktiv</label>
</div>
</div>

Barrierefreiheit

accent-color ist aus Barrierefreiheitssicht ein großer Gewinn. Der Browser passt die Kontrastfarbe automatisch an: Wenn du eine dunkle Akzentfarbe wählst, wird das Häkchen in der Checkbox hell, bei einer hellen Farbe wird es dunkel. Das stellt sicher, dass die Bedienelemente immer ausreichend Kontrast haben, ohne dass du manuell nacharbeiten musst.

Ein weiterer Vorteil: Native Formularelemente behalten ihre Tastaturunterstützung. Im Gegensatz zu vollständig custom gestylten Checkboxen (mit appearance: none und eigenem HTML) bleiben accent-color-gestylte Controls vollständig tastaturzugänglich und funktionieren out-of-the-box mit Screenreadern. Die Semantik bleibt erhalten, weil das Element weiterhin ein natives <input type="checkbox"> ist.

Trotzdem solltest du prüfen, dass die gewählte accent-color auch gegen den Hintergrund genug Kontrast bietet. Der Browser sorgt zwar für den Kontrast innerhalb des Controls (Häkchen auf farbigem Hintergrund), aber das Control selbst muss sich auch vom Seitenhintergrund abheben. In einem Dark Mode brauchst du meist eine hellere Variante deiner Akzentfarbe.

Häufige Fehler

5 Fehler

01 accent-color auf <select> oder <input type="text"> erwarten

accent-color wirkt nur auf Checkboxen, Radio-Buttons, Range-Slider und <progress>. Andere Formularelemente müssen mit anderen CSS-Eigenschaften gestylt werden.

02 Kontrast im Dark Mode nicht prüfen

Eine dunkle accent-color auf dunklem Hintergrund ist schlecht erkennbar. Verwende eine hellere Variante der Farbe für den Dark Mode.

03 accent-color statt appearance: none und eigenes Styling

accent-color ändert nur die Farbe, nicht die Form oder Größe der Elemente. Wenn du das gesamte Aussehen ändern willst, brauchst du appearance: none und eigenes CSS.

04 Vergessen, dass accent-color vererbt wird

Wenn du accent-color auf body setzt, wirkt sie auf alle Formularelemente im Dokument. Das ist meistens gewollt, kann aber in eingebetteten Widgets unerwünschte Effekte haben.

05 Fallback vergessen für ältere Browser

Browser, die accent-color nicht kennen, zeigen die Standard-Systemfarbe. Das ist funktional kein Problem, aber die Markenfarbe fehlt dann. Ein @supports-Check ist selten nötig, da der Fallback akzeptabel ist.

Browser-Kompatibilität

5 von 5

accent-color wird seit 2022 von allen modernen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

accent-color ist in HTML-Emails nicht relevant, da Formularelemente in Emails nicht funktional sind.

Apple Mail

Keine

Formulare sind in Emails nicht interaktiv
Gmail

Keine

Formulare werden entfernt
Outlook

Keine

Formulare werden nicht dargestellt
Thunderbird

Keine

Formulare sind nicht interaktiv
Yahoo Mail

Keine

Formulare werden entfernt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da