IvyLabs Design BostonIvy 爬山虎 v0.3.0

Tokens

BostonIvy 对比度报告

由 build-tokens.mjs 生成。正文 ≥ 4.5:1,图形标记、控件边框、焦点环 ≥ 3:1(WCAG 2.2 AA)。

前景 背景 要求 clean-light clean-dark sticker-light sticker-dark pixel-light pixel-dark
text-primary bg-canvas 4.5:1 16.69 15.77 14.96 16.51 16.32 14.95
text-primary bg-sidebar 4.5:1 15.64 16.34 13.25 14.07 17.90 14.22
text-primary bg-surface 4.5:1 16.69 14.84 17.14 14.52 17.90 14.22
text-primary bg-sunken 4.5:1 15.21 15.27 13.70 15.59 14.98 13.50
text-primary bg-selected 4.5:1 14.51 12.40 14.88 10.62 14.82 10.95
text-primary bg-hover 4.5:1 14.77 14.02 16.27 13.16 15.68 13.64
text-secondary bg-canvas 4.5:1 9.28 11.36 10.26 13.08 10.78 9.79
text-secondary bg-sidebar 4.5:1 8.69 11.78 9.08 11.14 11.83 9.31
text-secondary bg-surface 4.5:1 9.28 10.69 11.75 11.50 11.83 9.31
text-secondary bg-sunken 4.5:1 8.45 11.00 9.39 12.35 9.90 8.84
text-secondary bg-selected 4.5:1 8.07 8.94 10.20 8.41 9.79 7.17
text-secondary bg-hover 4.5:1 8.21 10.11 11.15 10.42 10.36 8.93
text-muted bg-canvas 4.5:1 5.56 6.25 5.98 7.92 5.84 6.65
text-muted bg-sidebar 4.5:1 5.21 6.48 5.30 6.75 6.41 6.33
text-muted bg-surface 4.5:1 5.56 5.89 6.85 6.97 6.41 6.33
text-muted bg-sunken 4.5:1 5.07 6.06 5.48 7.48 5.36 6.01
text-muted bg-selected 4.5:1 4.84 4.92 5.95 5.09 5.30 4.87
accent-text bg-canvas 4.5:1 5.73 8.25 5.36 10.60 4.95 12.59
accent-text bg-surface 4.5:1 5.73 7.76 6.14 9.32 5.43 11.98
danger bg-canvas 4.5:1 5.53 6.80 5.63 7.67 5.15 6.93
danger bg-surface 4.5:1 5.53 6.40 6.45 6.75 5.65 6.60
warning bg-canvas 4.5:1 5.42 8.76 5.58 11.14 5.37 12.63
warning bg-surface 4.5:1 5.42 8.24 6.39 9.80 5.89 12.02
info bg-canvas 4.5:1 7.06 8.61 5.38 10.87 5.30 11.39
info bg-surface 4.5:1 7.06 8.10 6.16 9.56 5.81 10.84
timer bg-canvas 4.5:1 5.73 8.25 6.40 9.07 4.95 12.59
timer bg-surface 4.5:1 5.73 7.76 7.34 7.98 5.43 11.98
on-accent accent 4.5:1 5.02 8.30 10.29 10.29 5.43 11.04
on-accent-soft accent-soft 4.5:1 6.96 8.56 14.88 8.93 6.92 9.22
on-danger-soft danger-soft 4.5:1 6.32 7.61 6.69 6.69 6.50 6.99
on-warning-soft warning-soft 4.5:1 6.81 8.71 9.75 9.75 6.97 9.43
on-timer-soft timer-soft 4.5:1 6.96 8.56 8.81 8.81 6.92 9.22
on-label-blue label-blue 4.5:1 6.05 7.14 10.55 10.55 4.95 8.80
on-label-green label-green 4.5:1 5.62 7.85 10.29 10.29 6.92 9.22
on-label-orange label-orange 4.5:1 5.15 7.35 9.75 9.75 5.65 9.94
on-label-violet label-violet 4.5:1 6.29 7.23 9.33 9.33 5.18 7.08
on-label-gray label-gray 4.5:1 6.42 7.58 13.23 13.23 7.49 8.31
on-label-pink label-pink 4.5:1 5.75 7.53 8.81 8.81 5.50 7.59
on-label-teal label-teal 4.5:1 5.90 8.03 13.41 13.41 5.34 9.16
on-avatar avatar-1 4.5:1 5.51 5.51 10.29 10.29 5.43 11.04
on-avatar avatar-2 4.5:1 5.56 5.56 10.55 10.55 5.81 9.99
on-avatar avatar-3 4.5:1 5.54 5.54 9.75 9.75 5.54 11.08
on-avatar avatar-4 4.5:1 6.23 6.23 9.33 9.33 6.46 7.46
on-avatar avatar-5 4.5:1 5.99 5.99 8.81 8.81 6.01 7.84
border-strong bg-canvas 3:1 3.23 3.29 14.96 14.57 3.26 3.30
border-strong bg-surface 3:1 3.23 3.10 17.14 12.81 3.57 3.14
focus-ring bg-canvas 3:1 7.06 8.61 5.81 13.64 5.30 12.63
focus-ring bg-surface 3:1 7.06 8.10 6.65 12.00 5.81 12.02
priority-low bg-canvas 3:1 3.78 4.73 3.98 5.01 3.26 4.84
priority-low bg-surface 3:1 3.78 4.45 4.56 4.41 3.57 4.61
priority-medium bg-canvas 3:1 5.04 7.36 5.38 10.87 10.78 9.79
priority-medium bg-surface 3:1 5.04 6.93 6.16 9.56 11.83 9.31
priority-high bg-canvas 3:1 4.11 8.76 3.83 10.04 5.05 12.63
priority-high bg-surface 3:1 4.11 8.24 4.39 8.83 5.54 12.02
priority-urgent bg-canvas 3:1 4.93 6.80 4.05 6.89 5.15 6.93
priority-urgent bg-surface 3:1 4.93 6.40 4.64 6.06 5.65 6.60
focus-ring bg-sidebar 3:1 6.61 8.93 5.14 11.63 5.81 12.02
accent bg-surface 3:1 5.02 7.76 1.67(描边豁免) 9.32 5.43 11.98

全部达标。萌虎风格的 accent 填充靠 2.5px border-strong 描边与背景区分,描边对比度见 border-strong 一行。