accent-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Try it

accent-color: red;

accent-color: #74992e;

accent-color: rgb(255, 255, 128);

accent-color: hsl(250, 100%, 34%);

<section class="default-example container" id="default-example">
  <div>
    <input checked="" id="example-element" type="checkbox" />
    <label for="example-element" id="example-label">Example Label</label>
  </div>
</section>

.container > div {
  display: flex;
  align-items: center;
}

#example-element {
  width: 40px;
  height: 40px;
}

#example-label {
  margin-left: 10px;
  font-size: x-large;
}

Browsers that support accent-color currently apply it to the following HTML elements:

Each user agent has an accent color, with variations to ensure legibility and contrast. That accent color is not used by every user-interface control nor in every state of the control. The accent-color is only applied to user-interface controls that use an accent color in the states where it is applicable.

Syntax

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Values

auto: Represents a UA-chosen color, which should match the accent color of the platform, if any.
<color>: Specifies the color to be used as the accent color.

Formal definition

Initial value	`auto`
Applies to	all elements
Inherited	yes
Computed value	`auto` is computed as specified and `<color>` values are computed as defined for the `color` property.
Animation type	by computed value type

Formal syntax

accent-color = 
  auto     |
  <color>

Examples

Setting a custom accent color

HTML

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

Result

Specifications

Specification
CSS Basic User Interface Module Level 4 # widget-accent

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`accent-color`	93	93	92	79	15.4 Safari does not maintain minimum contrast for legibility of the control. See bug 244233.	93 Chrome for Android does not maintain minimum contrast for legibility of the control. See bug 343503163.	92	66 Chrome for Android does not maintain minimum contrast for legibility of the control. See bug 343503163.	15.4 Safari on iOS does not maintain minimum contrast for legibility of the control. See bug 244233.	17.0 Chrome for Android does not maintain minimum contrast for legibility of the control. See bug 343503163.	93 Chrome for Android does not maintain minimum contrast for legibility of the control. See bug 343503163.
`auto`	93	93	92	79	15.4	93	92	66	15.4	17.0	93