Skip to content
Learn Measure Blog Case studies About
On this page
  • Supported elements
    • Checkbox
    • Radio
    • Range
    • Progress
  • Guaranteeing contrast
  • Extra: More tinting
    • Potential future
  • Home
  • All articles

CSS accent-color

Bring your brand color to built-in HTML form inputs with one line of code.

Aug 11, 2021 — Updated Jul 25, 2022
Available in: Español, 한국어, Português, 中文, English
Adam Argyle
Adam Argyle
TwitterGitHubGlitchHomepage
Joey Arhar
Joey Arhar
TwitterGitHub
On this page
  • Supported elements
    • Checkbox
    • Radio
    • Range
    • Progress
  • Guaranteeing contrast
  • Extra: More tinting
    • Potential future

Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element states (indeterminate, I'm looking at you), and the loss of built-in accessibility features. To fully recreate what the browser provides may be more work than you're looking to take on.

accent-color: hotpink;

CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements.

Browser support: chrome 93, Supported 93 firefox 92, Supported 92 edge 93, Supported 93 safari 15.4, Supported 15.4 Source
A light theme screenshot of an accent-color demo where     checkbox, radio buttons, a range slider and progress element     are all tinted hotpink.
Demo

The accent-color property also works with color-scheme, allowing authors to tint both the light and dark elements. In the following example the user has a dark theme active, the page uses color-scheme: light dark, and uses the same accent-color: hotpink for dark themed hotpink tinted controls.

A dark theme screenshot of an accent-color demo where     checkbox, radio buttons, a range slider and progress element     are all tinted hotpink.
Demo

Supported elements #

Currently, only four elements will tint via the accent-color property: checkbox, radio, range and progress. Each can be previewed here https://accent-color.glitch.me in light and dark color schemes.

Warning

If the following demo elements are all the same color, then your browser doesn't support accent-color yet.

Checkbox #

Radio #

Range #

Progress #

Guaranteeing contrast #

To prevent inaccessible elements from existing, browsers with accent-color need to determine an eligible contrast color to be used alongside the custom accent. Below is a screenshot demonstrating how Chrome 94 (left) and Firefox 92 Nightly (right) differ in their algorithms:

A screenshot of Firefox and Chromium side by side,   rendering a full spectrum of checkboxes in various hues and darknesses.

The most important thing to take away from this, is to trust the browser. Provide a brand color, and trust that it will make smart decisions for you.

The browser will not change your color in a dark theme.

Extra: More tinting #

You may be wondering how to tint more than these four form elements? Here's a minimal sandbox which tints:

  • the focus ring
  • text selection highlights
  • list markers
  • arrow indicators (Webkit only)
  • scrollbar thumb (Firefox only)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
)
{
color: var(--brand);
}

Potential future #

The spec does not limit the application of accent-color to the four elements shown in this article, more support could be added later. Elements like the selected <option> in a <select> could be highlighted with the accent-color.

What else do you like to tint on the web? Tweet @argyleink with your selector and it might get added to this article!

CSS
Last updated: Jul 25, 2022 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.