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.