The accent-color property lets you customize the accent color of form controls like checkboxes, radio buttons, and range sliders. Here's how to use it.
Basic Usage#
Loading code block...
Supported Elements#
Loading code block...
Brand Theming#
Loading code block...
Dark Mode Support#
Loading code block...
Form Styling#
Loading code block...
Checkbox Group#
Loading code block...
Radio Button Group#
Loading code block...
Range Slider#
Loading code block...
Progress Indicators#
Loading code block...
Toggle Switch with accent-color#
Loading code block...
Semantic Colors#
Loading code block...
Survey/Rating#
Loading code block...
Accessibility#
Loading code block...
Auto Value#
Loading code block...
Best Practices#
Usage:
✓ Set at :root for consistency
✓ Use CSS custom properties
✓ Match brand colors
✓ Support dark mode
Accessibility:
✓ Ensure sufficient contrast
✓ Test with high contrast mode
✓ Maintain focus visibility
✓ Don't rely on color alone
Supported Elements:
✓ checkbox
✓ radio
✓ range
✓ progress
✓ meter
Avoid:
✗ Over-customizing native controls
✗ Forgetting focus states
✗ Inconsistent colors
✗ Poor contrast ratios
Conclusion#
The accent-color property provides a simple way to theme native form controls with your brand colors. Apply it at the root level for consistency, use CSS custom properties for easy theming, and ensure you support both light and dark modes. It works with checkboxes, radio buttons, range sliders, and progress elements, making it easy to create cohesive form designs while maintaining native accessibility features.