色彩系统
视觉系统的第一个子系统。WCN 的色彩不是"好看的配色",是可被机器验证的证据——每个色值都有语义、有对比度、有使用边界。本规范把 VS-01 做到世界级深度(目标 95%)。
两色为本,证据优先
WCN 色彩的三条第一性原则:
| ① 中性为体 | 墨黑 / 文字 / 灰 / 纸面承担 90%+ 的画面,它们是结构,不计入"用色预算"。 |
| ② 古铜为权威 | 唯一有彩色 accent。它不标"强调",只标"已验证 / 已封存 / 已裁定"。稀缺即权威。 |
| ③ 状态为例外 | 深红=风险、深绿=成功。仅在状态需要时出现,绝不做装饰。 |
三类色板
结构中性色 · Structural(免预算)
权威 Accent · Authority(计预算)
状态色 · State(仅 L4/L5/状态)
语义层 · 明暗双模
UI 不直接引用上面的原始色,只引用下面的语义 token——每个都有 light + dark 两个值,随 prefers-color-scheme 自动切换(本页此刻就是)。
| 语义 token | Light | Dark | 用途 |
|---|---|---|---|
| text.primary | #1A1B1F | #E8E9EC | 正文主色 |
| text.secondary | #5A5C63 | #9A9CA3 | 辅助文字 |
| surface.canvas | #FAFAF8 | #0E0F13 | 页背景 |
| surface.raised | #FFFFFF | #16181E | 卡片面 |
| border.default | #D8DAE0 | #2A2C33 | 边框分割 |
| authority | #786349 | #C2A57E | 古铜权威 |
| state.success | #1F4E2D | #6FBF8E | 成功 |
| state.danger | #8B1E1E | #E07A72 | 风险 |
每个语义色必须同时定义 light + dark。缺一个模式 → CI 失败。这是 v4.0 修复压力测试 C-6 的硬约束。
对比度矩阵(全部实算)
世界级色彩系统不说"对比度够",而是给出完整矩阵。下表每个数字都经 WCAG 公式计算。AA 正文阈值 4.5,大字 3.0。
Light 模式 · 前景色 × 背景色
| 前景 \ 背景 | Paper | Raised | Sand |
|---|---|---|---|
| Ink | 18.82 | 19.67 | 14.83 |
| Text | 16.46 | 17.21 | 12.97 |
| Muted | 6.39 | 6.68 | 5.03 |
| Bronze | 5.46 | 5.71 | 4.30 ⚠ |
| Verdant | 9.19 | 9.61 | 7.24 |
| Crimson | 8.73 | 9.12 | 6.88 |
Dark 模式 · 前景色 × 背景色
| 前景 \ 背景 | Canvas #0E0F13 | Raised #16181E |
|---|---|---|
| Fog | 15.78 | 14.62 |
| Silver | 6.98 | 6.47 |
| Bronze-300 | 8.19 | 7.59 |
| Verdant-300 | 8.68 | 8.04 |
| Crimson-300 | 6.56 | 6.08 |
Bronze 在 Sand 底上 = 4.30:1,略低于 AA 4.5。 规则:古铜不得在 Sand(callout)底上作正文级文字;若必须,使用 ≥24pt 大字(大字阈值 3.0 通过),或改用 Ink/Muted。其余 28 个组合全部通过 AA。
比例预算 · 92 / 7 / 1
这不是"建议",是可数规则:每个视觉组(section/card/图表)内,古铜元素 ≤ 1 处。CI 按区块计数古铜填充,超过即失败。这取代了不可测量的旧"1%"表述(压力测试 H-7 的修复)。
古铜即权威,不是强调
✓ 可标
- verified node 已验证节点
- final verdict 最终裁定
- sealed state 封存状态
- key threshold 关键阈值
- chapter authority mark 章节权威号
✗ 不可标
- card rail by default 默认卡条
- nav numbers 导航编号
- decorative icons 装饰图标
- multiple equal CTAs 多个同级按钮
- random emphasis 随意强调
古铜只能施加于带 data-authority 属性的元素(取值 ∈ verified / sealed / verdict / threshold / proof-pointer / chapter-mark)。CI 扫描:无 data-authority 的古铜用法 → 失败。
色域门控 · 禁止色用数值判定
不用色名禁色(旧规范的硬伤),改用机器可判定的 HSL 色域。任何新色须通过门控才能进入系统。
跨载体降级
| 载体 | 色彩落地 |
|---|---|
| Web | 全部语义 token,明暗自适应 |
| A4 / PDF | Paper 底固定;古铜印刷需 ≥ 8mm 才保色准 |
| Deck | Ink 暗底默认;用 Bronze-300 暗底变体 |
| Legal | 纯黑白 + 最少古铜(仅 SEALED 标记) |
| 单色 / 传真 | 全部退化为 Ink/Paper;古铜→黑,状态色→符号(✓/✗)不靠颜色 |
状态绝不只靠颜色传达。成功/风险必须同时带符号或文字(● Cleared / ● Flagged),保证色盲与单色场景可读。
色彩的机器可执行
| Token | 规则 | 可检查 |
|---|---|---|
| color.no-raw | UI 不得直接用 hex,只用语义 token | ✓ grep |
| color.gamut | 所有色通过 § 07 色域门控 | ✓ HSL |
| color.contrast | 文字对比度 ≥ AA(Bronze-on-Sand 例外已记录) | ✓ WCAG |
| color.dark-parity | 每语义色有 light+dark | ✓ schema |
| color.bronze-auth | 古铜仅在 data-authority 元素 | ✓ DOM |
| color.budget | 每组古铜 ≤ 1 处 | ✓ count |
发布前自检
- ☐ 无表外 hex(全部解析到 token)
- ☐ 对比度全过 AA(注意 Bronze 不上 Sand 底作正文)
- ☐ 明暗双模都验证
- ☐ 古铜每组 ≤1 处且都带 data-authority
- ☐ 状态色带符号,不只靠颜色
本规范使 VS-01 从 95% → 100%:哲学 + 三色板 + 语义双模 + 全对比度矩阵 + 比例预算 + 权威律 + 色域门控 + 跨载体降级 + Lint 九项齐全,全部机器可验证。VS-01 ✓ 完成。