`Accent-color` - Property CSS

accent-color

Summary of characteristics of the `accent-color` property

Quick description

Defines the colour of active or checked items.

Status

Standard

Usable for

HTML

Predefined values

auto | currentcolor

Initial value

auto

Inherited by default

Yes.

Animation type

Computed value: during an animation, the accent-color property gradually changes from one value to another.

W3C Module

CSS Basic User Interface Module

References (W3C)

CSS Basic User Interface Module Level 4

Document status: WD (Working Draft)

The syntax scheme of `accent-color`.

Syntax diagram of the accent-color property.
The links in the diagram provide more details about the values.

Legend :

color-name is the name of a color. About 140 colors have received a standardized name: see Color chart.
#xxxx is the hexadecimal code of a color, out of 3 or 6 digits, or 8 to indicate transparency.
color is a color specified by one of the functions: rgb() or rgba(), hsl() or hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description.

The accent-color property defines the color of the selected elements. It essentially applies to the following:

Checkbox when checked.
Radio button when selected.
Left side of the input fields of range type.
Left side of the progress bars.

Browsers may be required to alter the other colors of controls in order to maintain high contrast, for example, the check of checkboxes. They may also generate minimal differences in colors to allow for gradients. The dark and light display modes (see color-scheme) are also taken into account.

Values for `accent-color`.

accent-color: auto;

The browser decides what color the selected or checked elements (form) will be. In general, the color is chosen for Maximize contrast with unselected or unchecked items.

accent-color:auto;
accent-color: currentColor;

Selected or checked elements of a form will be the same color as the text.

accent-color:auto;
accent-color: #00AA00;

A color expressed in any of the syntaxes recognized by CSS (see Colors).

accent-color:auto;
accent-color: initial; (auto) accent-color: inherit; accent-color: revert; accent-color: revertLayer; accent-color: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the property `accent-color`.

Like all color properties, accent-color can be animated very smoothly.We see that certain browsers (like Chrome , Edge , etc.) maintain the contrast with the other parts of the controls, which gives the impression of an animation that abruptly jumps from one value to another. In our example, the colors were set with the hsl() function.

Manipulating the `accent-color` property with Javascript.

With Javascript, change the value of `accent-color`.

Here's how to change the value of accent-color with Javascript. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with the notation in camel-case (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['accent-color'] = 'cyan';
	// or
	let el = document.getElementById('id');
	el.style.accentColor = 'cyan';

With Javascript, read the value of `accent-color`.

This code retrieves the value of the accent-color property assigned directly to the element itself via its style attribute. or the previous code, but not the value assigned via a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['accent-color'];
	// or
	let el = document.getElementById('id');
	let value = el.style.accentColor;

With Javascript, read the computed value of `accent-color`.

The calculated value is the value that results from the evaluation of the different syntaxes for expressing a color.
The color is returned as RGB(r,g,b), or RGBA(r,g,b,a) if the opacity is not total.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('accent-color');

With JQuery, change the value of `accent-color`.


 $('#id').css('accent-color', 'cyan');
 // or
 $('#id').css('accentColor', 'cyan');

With JQuery, read the computed value of `accent-color`.


	let value = $('#id').css('accent-color');

Other code examples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the value entered to the accent-color property and then display the value for the first button as it was applied, and for the second button, the calculated value. The latter allows you to see how the value of accent-color is stored (serialized). We can see that the color is serialized in the form rgb(...) or rgba(...).

Support for the `accent-color` property.

The accent-color property is well supported by current browsers, as shown by the compatibility table below (except for a particularity with Safari ).

Column 1

Support for the accent-color property.

Notes:

(1) Does not maintain a minimum contrast.

accent-color
property

Estimated overall support.

78%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`accent-color`: property History.

CSS Basic User Interface Module Level 4

Regarding accent-color. First definition of the accent-color property.

September 22, 2015
Working Draft.

Accent-color - Property CSS

Summary of characteristics of the accent-color property

The syntax scheme of accent-color.