应建立语义化颜色变量体系，如–color-warning、–color-success等，替代–yellow-500等视觉命名；支持深色/高对比度模式响应式切换；统一应用于各组件并保持感知一致；须满足WCAG对比度要求且辅以图标或文字确保无障碍。
警告、成功、提示等状态颜色不能只靠“黄、绿、蓝”直觉分配，关键在于建立语义化颜色变量体系——让color-warning代表“需用户注意但不阻断流程”，color-success代表“操作已完成且结果可信”，而非仅仅对应黄色或绿色。
用语义命名代替视觉命名
避免使用--yellow-500、--green-600这类纯视觉变量名。它们会掩盖设计意图，当品牌色调整时，容易误改“警告”却忘了同步更新所有关联逻辑。
- ✅ 推荐：
--color-warning、--color-success、--color-info、--color-Error - red”>❌ 避免：
--color-yellow、--color-green-light、--status-ok
同一语义，多场景适配
语义变量不是固定色值，而是可响应上下文的组合。例如--color-success在深色模式下应自动变亮，在高对比度模式下应增强明度差，而不是写死一个#28a745。
- 用 css 自定义属性 +
@media (prefers-color-scheme: dark)切换基础值 - 结合
color-scheme: light dark和forced-colors媒体查询做兜底 - 关键：所有组件（按钮、标签、Toast、表单反馈）统一读取同一语义变量，而非各自定义
区分强度与用途，避免混用
“警告”不等于“强调”，“成功”不等于“启用”。同一语义颜色应在不同组件中保持感知一致，但可通过透明度、边框/背景/文字的组合来表达不同层级。
立即学习“前端免费学习笔记（深入）”；
- Toast 提示中的
--color-success：背景色 + 图标色（100%饱和度） - 按钮上的
--color-success：仅用于文字或边框，背景用中性色+悬停强化 - 表单验证中的
--color-warning：图标用全色，文字用 80% 透明度，避免视觉过载
配合无障碍与可访问性校验
语义颜色必须满足 WCAG 对比度要求（文本 ≥ 4.5:1，大号字 ≥ 3:1），且不能仅依赖颜色传达信息。
- 成功状态旁加 ✅ 图标或 “已完成” 文字标签
- 警告状态使用 ⚠️ + “请检查” 类文案，不只靠黄色背景
- 用
prefers-reduced-motion控制颜色过渡动画，避免闪烁干扰