CSS accent-color: How to Change the Color of Form Controls
Tint native checkboxes, radio buttons, range sliders, and progress bars with CSS accent-color. Learn its limits, accessibility behavior, and browser support.
Set the CSS accent-color property to a color to tint supported native checkboxes, radio buttons, range sliders, and progress bars:
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: rebeccapurple;
}The controls keep their native appearance; the browser uses your color as an accent rather than replacing every part of the control. The property is inherited, starts at auto, and accepts auto or a CSS color. It does not recolor every form field. See MDN’s accent-color reference for the current definition and compatibility data.
1. Apply an accent color
Choose a color value such as a name, hex, rgb(), or hsl(). For a site-wide tint on eligible controls, set the property on a common ancestor:
:root {
accent-color: #5729e9;
}To limit the tint to a form, scope it to that form or its eligible controls:
.checkout-form {
accent-color: hsl(258 82% 54%);
}
/* Explicit targeting can make the intended controls clearer. */
.checkout-form input[type="checkbox"],
.checkout-form input[type="radio"] {
accent-color: #5729e9;
}Because accent-color inherits, eligible descendants can use a value set on an ancestor. A broad selector such as input { accent-color: rebeccapurple; } is concise, but affects every eligible input below it. Prefer a scope or explicit types when unrelated forms need different treatments.
2. Know which controls it affects
In supporting browsers, the documented targets are:
<input type="checkbox"><input type="radio"><input type="range"><progress>
It is not a general color property for text inputs, buttons, select menus, borders, or every visual part of those four controls. If you need to change a control’s shape or detailed appearance, you need a separate styling approach.
Here is a complete page you can save as accent-color.html and open in a browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accent color example</title>
<style>
:root {
accent-color: #5729e9;
font-family: system-ui, sans-serif;
}
body {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
}
.settings {
display: grid;
gap: 1rem;
}
.settings label {
display: flex;
align-items: center;
gap: 0.6rem;
}
.settings input[type="range"] {
width: 100%;
}
progress {
width: 100%;
}
</style>
</head>
<body>
<h1>Preferences</h1>
<form class="settings">
<label><input type="checkbox" checked> Email updates</label>
<fieldset>
<legend>Density</legend>
<label><input type="radio" name="density" value="comfortable" checked> Comfortable</label>
<label><input type="radio" name="density" value="compact"> Compact</label>
</fieldset>
<label for="volume">Volume</label>
<input id="volume" type="range" min="0" max="100" value="65">
<label for="progress">Upload progress</label>
<progress id="progress" value="65" max="100">65%</progress>
</form>
</body>
</html>3. Choose between auto, accent-color, and custom styling
| Approach | Use it when | Tradeoff |
|---|---|---|
accent-color: auto |
The browser or platform’s default accent is appropriate. | You give up a site-selected tint. |
accent-color: <color> |
A brand tint is enough and you want to retain native controls. | The browser may adjust the rendered result, and support varies. |
Custom styling, often with appearance: none |
You need a different shape or detailed control appearance. | You take on more styling and accessibility work, including focus, states, and forced-colors behavior. |
Use auto to leave the accent choice to the user agent, which may match the platform accent when available. Use an authored color when a consistent tint is part of the design. For a tint alone, native controls usually require less work and retain platform behavior. MDN’s advanced form styling guide discusses the distinction between tinting native controls and building custom ones.
4. Accessibility and rendered colors
Do not assume the authored value will appear as the exact same pixels in every browser, operating system, state, or accessibility mode. The CSS Working Group’s CSS Basic User Interface Module Level 4 says user agents must maintain legibility contrast and may adjust the accent’s luminance or brightness, change colors in other parts of the control, or generate variations to fit platform conventions.
Keep the control’s label and state clear without relying on color alone. Check that the chosen accent remains distinguishable against the control’s background and nearby content. Test keyboard focus and checked, unchecked, enabled, and disabled states in your supported browsers.
Forced-colors mode may use a user- and browser-defined palette and override author colors for certain properties. The system colors AccentColor and AccentColorText represent the background and text of accented controls; their actual values depend on the user’s settings. See MDN’s system color reference. Retaining native controls helps preserve platform conventions, but you should still test the experience in forced-colors or high-contrast settings.
5. Browser support and graceful fallback
Support is not universal. MDN marks accent-color as limited availability; its compatibility data lists support beginning with Chrome and Edge 93, Firefox 92, Opera 79, and Safari 15.4, while listing no support for Internet Explorer and Samsung Internet in the returned data. Compatibility tables can change, so check the current table against your actual browser requirements before release.
If a browser does not support the property, it ignores the declaration and renders its normal native control styling. That is a useful fallback when the tint is decorative. Make sure the control remains understandable and usable without the authored color; if exact branded rendering is a hard requirement, evaluate a custom implementation and its accessibility costs.
6. Troubleshooting
| Symptom | Likely cause | What to check |
|---|---|---|
| The checkbox or radio color did not change. | The browser lacks support, the selector does not match, or a later rule overrides the value. | Check the browser compatibility table, inspect the matched element and computed accent-color, and verify the control type. |
| A text field or button stayed the same color. | accent-color does not target those controls. |
Use the appropriate properties for that control; do not expect this property to tint all inputs. |
| The slider track is only partly tinted. | The property supplies an accent to native rendering; it does not guarantee a particular color for every part. | Check the browser and platform rendering. If detailed track styling is required, use a deliberate custom styling approach. |
| The displayed tint differs from the CSS color. | The user agent may adjust colors for legibility or platform conventions. | Test in the actual browser, operating system, and accessibility modes you support. |
| The tint changes controls elsewhere on the page. | The property is inherited from a broad ancestor or the selector matches more inputs than intended. | Scope the declaration to a form or theme container, or target eligible input types explicitly. |
| The control loses its expected appearance in a high-contrast setup. | Forced-colors behavior can use system colors and override author colors. | Test forced-colors mode with native controls and ensure labels, boundaries, and states remain perceivable. |
7. Performance, reliability, and cost
accent-color is a CSS declaration and needs no JavaScript, image asset, network request, or paid service. Its practical reliability depends on browser support and native rendering differences, so test against the browser set your product supports. When unsupported, the normal control appearance is the fallback.
To review how the controls render across pages, you can capture them with ScreenshotNeo, a website screenshot API and MCP server for developers. A screenshot is a visual check, not a substitute for keyboard, screen-reader, or forced-colors testing.
8. Or skip the browser setup
For a screenshot of a rendered page, ScreenshotNeo can return PNG, JPEG, WebP, or PDF from one GET request. This example saves a WebP screenshot; replace the target URL with your own page. See the ScreenshotNeo API documentation for request details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);ScreenshotNeo removes known cookie and consent banners, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, and failed loads are not billed, and cache hits cost nothing; responses include page-verdict and billing headers. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
9. FAQ
Can I change checkbox color with CSS?
Yes. Set accent-color on checkboxes in a browser that supports it. The control remains native, and the browser may adjust the rendered color.
Can I change radio button color with CSS?
Yes. The property applies to native radio inputs in supporting browsers, as it does to checkboxes.
Does accent-color work on range sliders?
It applies to native range inputs, but the exact parts tinted can vary by browser and platform.
Does accent-color change the color of text inputs?
No. Text inputs are not among the documented control types affected by this property.
Do I need JavaScript?
No. A CSS declaration is enough for supported native controls.
