accent-color – Checkboxen und Regler in deiner Markenfarbe, in einer Zeile

Eine Website in warmem Teal, und mittendrin ein Formular mit knallblauen Checkboxen. Der übliche Ausweg war, das native Element zu verstecken und ein eigenes zu bauen:

/* ⚠️ der alte Weg – und der Anfang vieler Probleme */
input[type="checkbox"] {
    appearance: none;
    /* … 30 Zeilen Nachbau … */
}

Damit verliert man den Fokusrahmen, die Tastaturbedienung, den Zustand „unbestimmt" und die korrekte Ansage im Screenreader — es sei denn, man baut all das mühsam wieder nach. Das ist erstaunlich viel Arbeit für eine andere Farbe.

Eine Zeile reicht

:root {
    accent-color: #0f766e;
}

Das war es. Checkboxen, Radiobuttons, <progress>-Balken und <input type="range"> übernehmen die Farbe — und bleiben dabei vollständig native Elemente mit allem, was dazugehört.

Gezielt geht natürlich auch:

.gefahr input[type="checkbox"] { accent-color: #b91c1c; }

Der Browser rechnet die Gegenfarbe selbst

Der Haken in der Checkbox muss zur Füllfarbe genug Kontrast haben. Darum musst du dich nicht kümmern: Der Browser wählt automatisch Schwarz oder Weiß, je nachdem, wie hell deine Akzentfarbe ist. Bei einem selbst gebauten Nachbau ist genau das die Stelle, die man vergisst.

Im Dunkelmodus mitdenken

:root {
    accent-color: #0f766e;
}

@media (prefers-color-scheme: dark) {
    :root {
        accent-color: #2dd4bf;   /* heller, damit es auf Dunkel sichtbar bleibt */
    }
}

Ein Teal, das auf Weiß gut sitzt, verschwindet auf einem dunkelgrauen Hintergrund fast. Weil accent-color eine ganz normale CSS-Eigenschaft ist, kannst du sie an eine Variable hängen und den Rest erledigt dein bestehendes Theme-System.

Was ebenfalls zum Thema gehört

Zwei Kleinigkeiten, die Formulare sofort besser machen:

input, select, textarea {
    font: inherit;        /* Formularfelder erben Schrift NICHT automatisch */
    color-scheme: light dark;   /* System-Widgets in beiden Modi richtig */
}

font: inherit ist der Klassiker: Ohne diese Zeile stehen deine Eingabefelder in der Standardschrift des Betriebssystems, während der Rest der Seite in deiner Hausschrift läuft. color-scheme sorgt dafür, dass Dropdowns, Datumsauswahl und Scrollbalken im Dunkelmodus nicht plötzlich weiß aufblitzen.

Der eigentliche Punkt

Das Beste an dieser Eigenschaft ist nicht die Farbe, sondern was sie überflüssig macht. Jedes native Formularelement, das du nicht nachbaust, ist eines, bei dem Tastaturbedienung, Screenreader-Ansage und Touch-Verhalten von selbst funktionieren — auf Geräten, die du nie getestet hast.

Nachbauen lohnt sich erst, wenn das Design wirklich etwas verlangt, das ein Standardelement nicht kann. Eine andere Farbe gehört seit dieser Eigenschaft nicht mehr dazu.

Du hast ein Formular, das optisch nicht zum Rest der Seite passt? Oft sind das drei Zeilen. Schreib mir.

Quellen

• MDN: accent-color
• MDN: color-scheme
• W3C: CSS UI Module Level 4 – accent-color