IvyLabs Design BostonIvy 爬山虎 v0.9.0

对比度巡检

本章由 tokens/build-tokens.mjs 生成,改 token 后重新构建就会更新;不要手改。

按 WCAG 2.2 AA 逐项检查组件实际用到的颜色组合:文字 ≥ 4.5:1(1.4.3),图标、控件边框、焦点环和表示状态的描边 ≥ 3:1(1.4.11)。 青藤亮色和暗色是各端先实现的两套主题,每一项都必须达标,否则构建失败;萌虎和像素保持现状,未达标的只记录在本章末尾。

不在检查范围内

v0.9 的修改

青藤(必须达标)

全部达标。

文字(≥ 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。