Accent Color Tester

accent-color is a CSS property that lets you set the accent color for user interface controls such as checkboxes, radio buttons, range sliders, and progress bars. It provides a simple way to brand native form elements without writing complex custom styles. Instead of replacing the native control entirely, the browser intelligently applies your chosen color while preserving accessibility and platform conventions.

Currently, accent-color affects four types of form controls:
• <input type="checkbox"> — the checked background and border
• <input type="radio"> — the selected dot and border
• <input type="range"> — the slider thumb and filled track
• <progress> — the filled portion of the progress bar
Support for additional controls may expand in future browser versions.

accent-color is widely supported across all modern browsers:
• Chrome 93+ (August 2021)
• Edge 93+
• Firefox 92+ (September 2021)
• Safari 15.4+ (March 2022)
• Opera 79+
• Samsung Internet 17+
Global browser support is approximately 94%+ as of 2024. For older browsers, the property is simply ignored and native default colors are used — a graceful fallback.

The color-scheme CSS property (e.g., color-scheme: dark) tells the browser to render native controls in a dark or light appearance. When you combine color-scheme with accent-color, the browser blends your accent color with the scheme-appropriate base styles. In dark mode, controls get darker backgrounds, and your accent color is adapted to maintain proper contrast. Use the Dark Preview toggle above to see this in action.

Yes! The accent-color property is animatable and supports CSS transitions. You can smoothly transition between accent colors using:
transition: accent-color 0.3s ease;
This allows for delightful hover effects or theme-switching animations. All demo controls on this page have a 0.3s transition applied so you can see the smooth color changes as you select different presets.

One of the biggest advantages of accent-color over custom-styled controls is that browsers automatically ensure sufficient contrast for checkmarks, radio dots, and slider thumbs. When you choose a very dark accent color, the browser uses a light checkmark; when you choose a bright color, it uses a dark checkmark. This built-in contrast handling means you get branded controls without sacrificing WCAG compliance.

Absolutely. You can target specific selectors to apply different accent colors to different controls. For example:
input[type="checkbox"] { accent-color: #3b82f6; }
input[type="radio"] { accent-color: #ef4444; }
input[type="range"] { accent-color: #10b981; }
progress { accent-color: #f59e0b; }
This gives you fine-grained control while still leveraging native browser rendering.

accent-color is a lightweight, single-property solution that tints native controls. Custom styling (using appearance: none or completely rebuilding controls with divs) gives you full visual control but requires you to handle all states (hover, focus, active, disabled, checked) and accessibility (focus rings, ARIA attributes, keyboard navigation) manually. accent-color keeps all native behavior intact — it's the best choice when you want branded controls with zero maintenance overhead.