CSS accent-color：原生控件主题化与无障碍

概述

accent-color 控制多种原生控件的强调色，便于在设计系统中统一主题。需注意对比度与不同平台表现差异。

用法/示例

:root { accent-color: #4f46e5 }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--brand, #4f46e5) }

工程建议

• 通过无障碍审查工具确保文本与背景达到推荐对比度。
• 为老旧浏览器提供替代样式或自定义控件并维持键盘可达性。
• 在深浅主题切换时动态调整强调色并验证状态样式可见性。

参考与验证

• MDN：accent-color — https://developer.mozilla.org/docs/Web/CSS/accent-color
• web.dev：Form controls — https://web.dev/articles/accent-color