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

---

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

keywords:

• accent-color
• 表单控件
• 主题色
• 对比度
• 兼容策略

description: 使用 accent-color 为复选框、单选、进度等原生控件赋予主题色，同时确保对比度与易用性，并提供兼容与降级方案。

categories:

• 文章资讯
• 编程技术

---

概述

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