Interaction
accent-color
accent-color sets the highlight color (the accent color) of form controls such as checkboxes and radio buttons.
Syntax
auto | <color>Preview
Code
.box {
accent-color: #e0951a;
}Controls
About
Values
Write a color. With the initial auto, the browser picks the color (sometimes matching the OS accent color). accent-color is inherited, so writing it once on body or similar gives every form control on the page the same color.
Which controls
It applies to checkboxes, radio buttons, sliders (<input type="range">), and progress bars (<progress>). The preview on this page shows all four. The fill of a checked box, the track up to a slider's thumb, and similar parts are drawn in the accent color.
It has no effect on controls whose look is removed with appearance: none, or on buttons, text fields, and select boxes.
The browser keeps it legible
For marks drawn on top, such as the check mark, the browser picks a color that stands out against the accent color. In Chrome and Edge, the check mark is black with the initial orange and white with the dark preset. With a light accent color, the rest of the slider and progress bar turns dark as well. Browsers may also adjust the color's brightness to keep the control legible. Safari before 26.2 doesn't make this contrast adjustment.