CSS accent-color 原生控件主题一致性与无障碍实践

概览`accent-color` 能为原生控件着色，与系统状态与无障碍需求良好协作，避免复杂自定义控件实现带来的兼容性问题。基础用法:root { --brand: oklch(60% 0.12 250); } input[type="checkbox"], input[type="radio"], progress, meter { accent-color: var(--brand); } 暗色模式与对比@media (prefers-color-scheme: dark) { :root { --brand: oklch(70% 0.10 250); } } /* 高对比用户 */ @media (prefers-contrast: more) { :root { --brand: oklch(80% 0.15 250); } } 与样式令牌协同:root { --accent: var(--brand); } input[type="checkbox"] { accent-color: var(--accent); } 治理要点使用系统控件与 `accent-color` 统一主题色，减少自定义控件带来的无障碍与交互问题。与 `prefers-color-scheme` 与 `prefers-contrast` 协作，确保在不同环境下可读与可用。保留可见标签与可点击区域，结合 `:focus-visible` 提升可访问性。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+原生控件主题一致，读屏器与键盘交互正常；维护成本降低