accent-color: Native Control Accents and Accessible States

CSS Reference

accent-color requests an accent on supported native controls such as checkboxes, radios, ranges, and progress indicators. It does not recolor every part or state of every form control.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`accent-color`	auto	Yes	Inherited declarations; visible on supported native controls

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

input, progress { accent-color: #006c9c; }

Value or category	Behavior and choice
`auto`	Let the browser choose an accent.
`A color`	Request an accent for supported parts.
`checkbox / radio`	Common selected-state examples.
`range / progress`	Supported track or progress parts vary by browser.

For supported values and conditions, see MDN accent-color.

Run the example and compare results

Save this complete code as css-reference-13774-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>accent-color comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; padding: 12px; border: 1px solid #718096; }
.target { accent-color: #006c9c; }
.reference { accent-color: #a03c00; }
label { display: block; }
input[type="range"], progress { width: 180px; }
</style>
</head>
<body>
<main id="demo">
<h1>accent-color comparison</h1>
<section class="samples"><div class="a"><p class="label">Blue accent</p><div class="target"><label><input type="checkbox" checked> Checkbox option</label><label><input type="radio" name="accent-option" checked> Radio option</label><input type="range" value="60" aria-label="Range value"><label for="progress-1">Example progress</label><progress id="progress-1" value="60" max="100">60%</progress></div></div><div class="b"><p class="label">Orange accent</p><div class="reference"><label><input type="checkbox" checked> Checkbox option</label><label><input type="radio" name="reference-option" checked> Radio option</label><input type="range" value="60" aria-label="Range value"><label for="progress-2">Example progress</label><progress id="progress-2" value="60" max="100">60%</progress></div></div></section>
</main>
</body>
</html>

Compare the supported accent parts. Borders, backgrounds, and unselected states do not necessarily all use the requested color.

Keep native control behavior

Accent-color requests color while retaining native controls. Removing their appearance can also remove the part that displays the accent. Preserving native UI makes it easier to retain keyboard operation and state handling.

Contrast and environmental differences

Browsers can adjust internal marks for contrast. Forced colors, platform themes, and different engines may alter the result. Do not promise exact pixels; label controls and progress indicators and use actual state values.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

Select and clear the checkbox, including with Tab and Space. The radio controls are independent samples with different names. Each progress indicator has a meaningful label.
Temporarily add disabled, compare color and interaction, then restore it. Appearance:none can remove the accented native part; colors and shapes need not be identical across platforms.

Check the relevant conditions in Accessible names for progress.

For form states, labels, and keyboard focus, see CSS Form States: Focus, Validation, disabled, and readonly. Related properties to compare alongside these conditions are color.

When the result is missing or unexpected

Compare unselected, selected, and disabled states.
Check the control type and appearance rules if the color is unchanged.

CSS Reference

CSS / Reference / list-style-type: Change List Markers and Numbering

Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.

CSS / Reference / list-style-position: Inside and Outside Markers on Wrapped Items

Choose marker placement using wrapped text, list spacing, and actual child structure. Preserve list meaning and diagnose clipped outside markers.

CSS / Reference / word-break: Language-Sensitive Breaks Versus Emergency Wrapping

Choose word-breaking behavior for actual scripts and long strings. Compare normal, keep-all, and break-all, and distinguish deprecated break-word from overflow-wrap.

CSS / Reference / opacity: Group Transparency, Background Alpha, and Interaction

Fade an element and its children or make only its background translucent. Check stacking, contrast, keyboard focus, and the difference between transparency and hiding.

CSS / Reference / font-size: Understand px, em, rem, and Text Enlargement

Choose text-size units by their reference and test nested em scaling. Check the actual root size, browser enlargement, and layout constraints.

CSS / Reference / background-clip: Background Painting Areas and Text Clipping

Choose border, padding, or content painting areas independently of image positioning. Compare visible boundaries and plan readable fallbacks for text-clipped backgrounds.

CSS / Reference / font-family: Font Lists, Glyph Fallback, and Loading

Build a font stack with appropriate generic fallbacks and inspect the fonts actually used. Distinguish naming a family from loading files and covering characters.

CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path

Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.

CSS / Reference / box-sizing: Content and Border Boxes, Including Small-Size Limits

Calculate content-box and border-box sizes, including margins and the minimum content-size limit. Apply resets deliberately and check external components.

CSS / Reference / empty-cells: Show or Hide Empty Table Cells

Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.