CSS accent-color: HTML Form-Elemente mit nur einer Zeile CSS stylen

Das stylen von HTML-Elementen ist nicht immer ganz einfach. Oft muss schon für geringfügige Design-Änderungen der Standard-Style zurückgesetzt und das Element von Grund auf selbst gestylt werden. Um Abhilfe zu schaffen gibt es nun die CSS-Eigenschaft . accent-color ist eine CSS-Eigenschaft aus dem CSS UI Module Level 4 um mit einer einzelnen Zeile CSS einige standard HTML-Elemente mit einer Akzentfarbe zu personalisieren.

:root {
    accent-color: #E93CAC;
}

Die Eigenschaft accent-color funktioniert auch wunderbar im Zusammenspiel mit prefers-color-scheme.

@media(prefers-color-scheme: dark) {
    :root {
        accent-color: #59CBE8;
    }
}

Zum aktuellen Zeitpunkt unterstützen nur 4 HTML-Elemente standardmäßig accent-color.

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

Eine Vorschau aller unterstützen Elemente gibt es unter https://accent-color.glitch.me. Es ist aber damit zu rechnen, dass es zukünftig noch mehr Elemente mit accent-color-Support geben wird.

Momentan wird accent-color nur von den Browsern von knapp 90% der Internet-Nutzer unterstützt.

Der aktuelle Stand kann jederzeit über CanIUse gecheckt werden. Auch wenn einige Browser accent-color noch nicht unterstützen, lohnt es sich, accent-color jetzt schon zu verwenden, da Browser ohne accent-color-Support weiterhin den Standard-Style als Fallback verwenden und es keine technischen Einschränkungen für Nutzer dieser Browser gibt.

Damit keine Elemente mit zu geringem Kontrast entstehen können, welche die Accessibility der Seite verschlechtern, berechnen die Browser automatisch eine passende Kontrastfarbe zur gewählten accent-color. Dabei verwenden unterschiedliche Browser allerdings verschiedene Algorithmen. Hier zum Vergleich Chrome 95 (links) und Firefox 93 (rechts).

Die CSS-Eigenschaft accent-color ist ein einfacher Weg die bisher unterstützten HTML-Elemente zu personalisieren. Auch wenn bisher erst wenige Elemente und noch nicht alle Browser accent-color unterstützen, lohnt es sich unserer Meinung nach trotzdem, accent-color zur verwenden, da es für Nutzer von Browsern ohne accent-color-Support keine technischen Einschränkungen gibt und in Zukunft mit Sicherheit noch mehr HTML-Elemente diese nützliche CSS-Eigenschaft unterstützen werden.