COLOR SYSTEM · 配色示范
配色示范
每组先列参考做法，再列需要调整的做法，并说明原因。对照时先看用途，再检查文字与背景的对比度、状态标签和实际操作反馈。
① 按钮：白底上的强调色与悬停反馈
参考做法
按钮使用现有网页强调红，悬停时加深同一色系。使用前仍需检查按钮文字与背景的对比度。
需要调整
这组按钮在悬停时切换为橙色，若页面没有赋予它新的含义，会造成状态理解不一致。品牌红本身并非在所有场景都不能使用。
③ 卡片：深色背景上的文字颜色
参考做法
招新宣讲会
时间：本周六 · 地点：东院
立即报名 →
深色背景使用浅色正文、次要文字与强调色。检查实际文字大小和背景组合后再使用。
需要调整
招新宣讲会
时间：本周六 · 地点：东院
立即报名 →
浅色主题的次要文字色直接搬到深底上，可能不满足小字对比度；需要为深色主题单独选择颜色。
④ 徽章：浅色底配深色字
参考做法
招新进行中开放日志愿服务
浅色背景与深色文字形成清楚的层级。此处色值是示例组合，不是完整品牌色阶的编号。
需要调整
招新进行中开放日志愿服务
小号白字放在品牌红上需要测量对比度，不能仅因白字常见就视为合格。
⑤ 状态提示：颜色之外写出状态
参考做法
成功 ✓警告 ⚠错误 ✕信息 ℹ
状态同时写出名称并配符号。即使颜色难以区分，仍可通过文字理解结果。
需要调整
成功 ✓警告 ⚠错误 ✕信息 ℹ
这些白字与彩色背景的组合需逐项测量；尤其不能用鲜亮的底色替代对文字可读性的检查。
⑥ 动效：悬停与按下反馈
参考做法
悬停反馈应帮助确认可操作区域，持续时间短，减少动态效果时仍可操作。
需要调整
持续闪动会打断阅读。这里保留静态反例，不实际播放循环闪烁。
⑦ 装饰：纯色表面与渐变
参考做法
区块标题
纯色 + 1px 分割线，克制干净。
使用纯色表面与细分割线，符合官网现有样式，正文和标题容易区分。
需要调整
区块标题
渐变 + 暖色水洗，禁用。
装饰渐变与暖色底偏离官网已有设计约定。它说明项目风格差异，不是对所有设计的通用判断。
⑧ 图表：不只靠颜色区分
参考做法
蔚蓝
42%
赭橙
30%
金黄
28%
颜色之外还标注类别和数值；蓝、橙、金只是起点，实际使用仍需检查灰度和色觉模拟。
需要调整
招协红
42%
雨林绿
30%
红绿组合可能难以分辨。此例已有文字标签，不能据此断言信息完全不可读；应继续改善颜色区分和必要的线型。
⑨ 表单：焦点与错误提示
参考做法
✕ 请输入有效的手机号
焦点描边帮助键盘用户定位；错误说明写明问题，并与对应输入框关联。
需要调整
123
仅重复输入值“123”不能解释错误原因。应说明格式要求，并将提示与输入框关联。
⑩ 链接：识别与反馈
以上是设计对照，不代表整页已通过无障碍认证。先明确用途，再检查文字与背景的对比度、信息标签和实际操作状态。