The CSS accent-color property

Q: How do I change the color of a checkbox in CSS?

Set accent-color on the checkbox (or on :root for all of them), e.g. accent-color: #1c7ce9. The native control picks up your color with no custom markup.

Q: Can I set accent-color for the whole page?

Yes. Apply it to :root (or html) and it inherits to every form control on the page.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS accent-color property tints native form controls — checkboxes, radio buttons, range sliders and progress bars — with a color of your choice, e.g. accent-color: #1c7ce9. It is the easy, accessible way to brand these controls without rebuilding them from scratch, and it keeps their built-in behavior and accessibility intact.

Overview

For years, the only way to color a checkbox or radio button to match your brand was to hide the real control and build a fake one out of other elements — fiddly, and easy to get wrong for keyboard and screen-reader users. accent-color ends that. One declaration tints the native control, and you keep all its built-in behavior for free.

It applies to the form elements that have an accent: checkboxes and radio buttons, range sliders, and progress bars. Set accent-color: #1c7ce9 on an element (or globally on the page) and those controls pick up your color for their checked or filled state, while the browser still handles focus, keyboard interaction and accessibility exactly as before.

It is one of the highest-value-for-effort properties in modern CSS: a genuinely branded form for one line, with none of the accessibility debt that custom controls used to bring. The browser even adjusts the checkmark color for contrast against the accent you choose, so it stays legible.

Syntax

/* brand every form control at once */
:root {
  accent-color: #1c7ce9;
}

Values

The accent-color property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`auto`	The browser's default accent color. The default.
`color`	A color for checkboxes, radios, ranges and progress bars, e.g. #1c7ce9.

Example

Live example

<style>
  form { font: 15px system-ui, sans-serif; accent-color: #6d28d9; display: grid; gap: 10px; }
  label { display: flex; align-items: center; gap: 8px; }
  input[type=range] { width: 160px; }
</style>
<form>
  <label><input type="checkbox" checked> Branded checkbox</label>
  <label><input type="radio" name="r" checked> Branded radio</label>
  <label>Slider <input type="range" value="60"></label>
</form>

Best practices

Set accent-color once on :root to brand every checkbox, radio, range and progress bar across the page.
Prefer it over rebuilding form controls from scratch — you get branding without losing native keyboard and screen-reader support.
Pick an accent with enough contrast against white so the checked state is clearly visible.
Let the browser handle the checkmark color; it adjusts automatically to stay legible against your accent.

Frequently asked questions

How do I change the color of a checkbox in CSS?

Set accent-color on the checkbox (or on :root for all of them), e.g. accent-color: #1c7ce9. The native control picks up your color with no custom markup.

What controls does accent-color affect?

Checkboxes, radio buttons, range sliders and progress bars — the native controls that have an accent color for their checked or filled state.

Is accent-color better than custom-styled checkboxes?

For most cases, yes. It brands the control in one line while keeping the built-in keyboard and screen-reader support that hand-built replacements often break.

Can I set accent-color for the whole page?

Yes. Apply it to :root (or html) and it inherits to every form control on the page.

align-items

References