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

CSS accent-color 表单控件主题一致性与无障碍实践概述`accent-color` 为浏览器内置控件（如复选框、单选框、进度条）提供主题色定制能力，保证在暗/亮模式下的对比度与一致性。核心概念与参数适用控件：checkbox、radio、range、progress 等原生控件的强调色。颜色对比：浏览器依据系统配色与对比策略进行调整，确保可读性。主题协作：与 `prefers-color-scheme`、设计令牌协作实现一致主题。实践示例<style> :root { color-scheme: light dark; } :root { --brand: oklch(65% 0.18 240); } input, progress { accent-color: var(--brand); } @media (prefers-color-scheme: dark) { :root { --brand: oklch(75% 0.12 240); } } </style> <label><input type="checkbox" checked> 接受协议</label> <progress value="60" max="100"></progress> 验证方法浏览器支持：Chrome 94+、Firefox 93+、Safari 15+（参考 MDN 与兼容性表）。对比度：在暗/亮模式下使用辅助工具检测对比度并观察控件可见性。兼容退化：旧浏览器保留默认强调色，确保基础可用。注意事项控件状态（禁用/活动）可能使用不同强调色，需在设计系统中校验。与自定义外观控件（如完全自绘的开关）区分使用，避免重复样式。颜色值建议使用 OKLCH/P3 保持在现代设备上的一致视觉。