对比度巡检
本章由 tokens/build-tokens.mjs 生成,改 token 后重新构建就会更新;不要手改。
按 WCAG 2.2 AA 逐项检查组件实际用到的颜色组合:文字 ≥ 4.5:1(1.4.3),图标、控件边框、焦点环和表示状态的描边 ≥ 3:1(1.4.11)。
青藤亮色和暗色是各端先实现的两套主题,每一项都必须达标,否则构建失败;萌虎和像素保持现状,未达标的只记录在本章末尾。
不在检查范围内
- 装饰性的边框和分隔线:
border-default、border-subtle,以及卡片、菜单、次要按钮的外框。按钮和卡片靠文字和内容识别,不靠外框。
- 禁用的控件、头像和标签的底色(上面的文字单独检查)、插画、Logo、Agent 方块的底色(里面的图标单独检查)。
- 只靠颜色的区分本来就不允许:完成、过期、来源这些状态都另有文字或图标(见「无障碍」)。
v0.9 的修改
- 青藤
border-strong 亮色 #86928a → #7f8b83、暗色 #5c6a62 → #69766e:原来在悬停行(bg-hover)上只有 2.86 / 2.93,亮色在下沉区(bg-sunken)上 2.95,任务行和计划行悬停时未完成的圆点和勾选框达不到 3:1。现在六种背景上最低 3.08 / 3.10。
- 明暗切换的选中段原来靠表面色压在下沉色上区分(1.10 / 1.03),改为加一圈
border-strong。
- 快捷日期选中时原来只填
accent-soft(与表面 1.16),改为同时描 accent 边;评论框「给 Agent」打开时原来只填 warning-soft(1.13),改为描 warning 边。
- 文字类组合在青藤亮暗两套里原本全部达标,没有改。
青藤(必须达标)
全部达标。
文字(≥ 4.5:1)
| 前景 |
背景 |
用在 |
clean-light |
clean-dark |
text-primary |
bg-canvas |
正文、标题 |
16.69 |
15.77 |
text-primary |
bg-sidebar |
正文、标题 |
15.64 |
16.34 |
text-primary |
bg-surface |
正文、标题 |
16.69 |
14.84 |
text-primary |
bg-sunken |
正文、标题 |
15.21 |
15.27 |
text-primary |
bg-selected |
正文、标题 |
14.51 |
12.40 |
text-primary |
bg-hover |
正文、标题 |
14.77 |
14.02 |
text-secondary |
bg-canvas |
次要文字、说明 |
9.28 |
11.36 |
text-secondary |
bg-sidebar |
次要文字、说明 |
8.69 |
11.78 |
text-secondary |
bg-surface |
次要文字、说明 |
9.28 |
10.69 |
text-secondary |
bg-sunken |
次要文字、说明 |
8.45 |
11.00 |
text-secondary |
bg-selected |
次要文字、说明 |
8.07 |
8.94 |
text-secondary |
bg-hover |
次要文字、说明 |
8.21 |
10.11 |
text-muted |
bg-canvas |
时间、计数、占位文字 |
5.56 |
6.25 |
text-muted |
bg-sidebar |
时间、计数、占位文字 |
5.21 |
6.48 |
text-muted |
bg-surface |
时间、计数、占位文字 |
5.56 |
5.89 |
text-muted |
bg-sunken |
时间、计数、占位文字 |
5.07 |
6.06 |
text-muted |
bg-selected |
时间、计数、占位文字 |
4.84 |
4.92 |
text-muted |
bg-hover |
悬停行里的时间和计数 |
4.92 |
5.56 |
accent-text |
bg-canvas |
链接、选中项文字、日历里的今天 |
5.73 |
8.25 |
accent-text |
bg-surface |
链接、选中项文字、日历里的今天 |
5.73 |
7.76 |
accent-text |
bg-hover |
悬停或选中行里的链接和品牌色文字 |
5.07 |
7.33 |
accent-text |
bg-selected |
悬停或选中行里的链接和品牌色文字 |
4.98 |
6.49 |
danger |
bg-canvas |
危险操作、过期日期 |
5.53 |
6.80 |
danger |
bg-surface |
危险操作、过期日期 |
5.53 |
6.40 |
danger |
bg-hover |
悬停的危险菜单项、悬停或按下行里的过期日期 |
4.89 |
6.05 |
danger |
bg-selected |
悬停的危险菜单项、悬停或按下行里的过期日期 |
4.80 |
5.35 |
warning |
bg-canvas |
提醒文字 |
5.42 |
8.76 |
warning |
bg-surface |
提醒文字 |
5.42 |
8.24 |
info |
bg-canvas |
提示文字 |
7.06 |
8.61 |
info |
bg-surface |
提示文字 |
7.06 |
8.10 |
timer |
bg-canvas |
计时文字 |
5.73 |
8.25 |
timer |
bg-surface |
计时文字 |
5.73 |
7.76 |
on-accent |
accent |
主按钮、选中的日期 |
5.02 |
8.30 |
on-accent-soft |
accent-soft |
筛选条件、选中的快捷日期 |
6.96 |
8.56 |
on-danger-soft |
danger-soft |
危险按钮(撤销、删除) |
6.32 |
7.61 |
on-warning-soft |
warning-soft |
「给 Agent · 待处理」、令牌只显示一次的提示 |
6.81 |
8.71 |
on-timer-soft |
timer-soft |
计时卡片 |
6.96 |
8.56 |
on-label-blue |
label-blue |
标签 |
6.05 |
7.14 |
on-label-green |
label-green |
标签 |
5.62 |
7.85 |
on-label-orange |
label-orange |
标签 |
5.15 |
7.35 |
on-label-violet |
label-violet |
标签 |
6.29 |
7.23 |
on-label-gray |
label-gray |
标签 |
6.42 |
7.58 |
on-label-pink |
label-pink |
标签 |
5.75 |
7.53 |
on-label-teal |
label-teal |
标签 |
5.90 |
8.03 |
on-avatar |
avatar-1 |
头像首字母 |
5.51 |
5.51 |
on-avatar |
avatar-2 |
头像首字母 |
5.56 |
5.56 |
on-avatar |
avatar-3 |
头像首字母 |
5.54 |
5.54 |
on-avatar |
avatar-4 |
头像首字母 |
6.23 |
6.23 |
on-avatar |
avatar-5 |
头像首字母 |
5.99 |
5.99 |
on-agent-soft |
agent-soft |
来源标记、Agent 方块的图标 |
6.29 |
7.23 |
on-agent |
agent |
Bot 角标里的图标 |
7.49 |
8.71 |
bg-canvas |
text-primary |
轻提示的文字(反色) |
16.69 |
15.77 |
accent-soft |
text-primary |
轻提示的操作按钮(如「撤销」) |
14.41 |
11.53 |
图标与图形(≥ 3:1)
| 前景 |
背景 |
用在 |
clean-light |
clean-dark |
priority-low |
bg-canvas |
优先级小旗 |
3.78 |
4.73 |
priority-low |
bg-surface |
优先级小旗 |
3.78 |
4.45 |
priority-medium |
bg-canvas |
优先级小旗 |
5.04 |
7.36 |
priority-medium |
bg-surface |
优先级小旗 |
5.04 |
6.93 |
priority-high |
bg-canvas |
优先级小旗 |
4.11 |
8.76 |
priority-high |
bg-surface |
优先级小旗 |
4.11 |
8.24 |
priority-urgent |
bg-canvas |
优先级小旗 |
4.93 |
6.80 |
priority-urgent |
bg-surface |
优先级小旗 |
4.93 |
6.40 |
agent |
bg-canvas |
Bot 头像角标 |
7.49 |
8.71 |
agent |
bg-surface |
Bot 头像角标 |
7.49 |
8.20 |
accent |
bg-surface |
主按钮填充、未读圆点、选中描边 |
5.02 |
7.76 |
accent |
bg-canvas |
标签页下划线、画布上的未读圆点 |
5.02 |
8.25 |
accent |
border-default |
进度条:已完成部分和轨道 |
4.05 |
6.40 |
warning-soft |
text-primary |
轻提示的警告图标 |
14.79 |
12.30 |
控件边框(≥ 3:1)
| 前景 |
背景 |
用在 |
clean-light |
clean-dark |
border-strong |
bg-canvas |
输入框、勾选框、未完成的圆点、评论框 |
3.55 |
3.94 |
border-strong |
bg-surface |
输入框、勾选框、未完成的圆点、评论框 |
3.55 |
3.71 |
border-strong |
bg-sidebar |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
3.32 |
4.08 |
border-strong |
bg-sunken |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
3.23 |
3.81 |
border-strong |
bg-hover |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
3.14 |
3.50 |
border-strong |
bg-selected |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
3.08 |
3.10 |
焦点(≥ 3:1)
| 前景 |
背景 |
用在 |
clean-light |
clean-dark |
focus-ring |
bg-canvas |
焦点环 |
7.06 |
8.61 |
focus-ring |
bg-surface |
焦点环 |
7.06 |
8.10 |
focus-ring |
bg-sidebar |
焦点环 |
6.61 |
8.93 |
focus-ring |
bg-hover |
菜单项、选中行、下沉区里的焦点环 |
6.25 |
7.66 |
focus-ring |
bg-selected |
菜单项、选中行、下沉区里的焦点环 |
6.14 |
6.77 |
focus-ring |
bg-sunken |
菜单项、选中行、下沉区里的焦点环 |
6.43 |
8.34 |
状态(≥ 3:1)
| 前景 |
背景 |
用在 |
clean-light |
clean-dark |
border-strong |
bg-sunken |
明暗切换的选中段:一圈 border-strong(v0.9 起) |
3.23 |
3.81 |
accent |
bg-surface |
快捷日期、筛选开关的选中描边(v0.9 起快捷日期也加) |
5.02 |
7.76 |
warning |
bg-surface |
评论框「给 Agent」打开时的描边(v0.9 起) |
5.42 |
8.24 |
萌虎与像素(只记录)
下面这些组合在萌虎或像素里没达标。按决定这两种风格暂时保持现状,等它们重新排期时再改。萌虎的 accent 填充一直带 2.5px 墨色描边,按描边豁免,不列在这里。
| 主题 |
组合 |
用在 |
对比度 |
要求 |
| pixel-light |
accent-text / bg-selected |
悬停或选中行里的链接和品牌色文字 |
4.49 |
4.5:1 |
| sticker-light |
accent / bg-canvas |
标签页下划线、画布上的未读圆点 |
1.45 |
3:1 |
| sticker-dark |
accent / border-default |
进度条:已完成部分和轨道 |
1.37 |
3:1 |
| sticker-dark |
warning-soft / text-primary |
轻提示的警告图标 |
1.64 |
3:1 |
| pixel-light |
border-strong / bg-sunken |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
2.99 |
3:1 |
| pixel-dark |
border-strong / bg-sunken |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
2.98 |
3:1 |
| pixel-light |
border-strong / bg-selected |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
2.96 |
3:1 |
| pixel-dark |
border-strong / bg-selected |
侧栏、下沉区、悬停和选中行里的勾选框与圆点 |
2.42 |
3:1 |
| pixel-light |
border-strong / bg-sunken |
明暗切换的选中段:一圈 border-strong(v0.9 起) |
2.99 |
3:1 |
| pixel-dark |
border-strong / bg-sunken |
明暗切换的选中段:一圈 border-strong(v0.9 起) |
2.98 |
3:1 |
| sticker-light |
accent / bg-surface |
快捷日期、筛选开关的选中描边(v0.9 起快捷日期也加) |
1.67 |
3:1 |
六套主题的完整数字见仓库里的 tokens/dist/contrast-report.md。