accent-color

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Beispiele

Checkboxen und Radio-Buttons

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

.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

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

.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>

Fortschrittsbalken

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

.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>

Globales Styling via Wrapper

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

.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>

Dark Mode mit accent-color

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

: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

• 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.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften