教程

终端主题的对比度与可读性

WCAG 对比度如何应用到终端文本、需要检查哪些颜色组合,以及发布前应达到的比值。

对比度是两种颜色相对亮度之间的比值。WCAG 用它描述文本在背景上的可读程度。

阈值

比值 含义
4.5:1 普通正文(AA)
3:1 大号文本和界面边界(AA)
7:1 增强正文(AAA)

对终端主题来说,最重要的是 foreground 对 background。其次是每个 ANSI 颜色对背景,因为状态行、diff 和提示符都会把它们当文本使用。

应该检查什么

  1. 前景 / 背景。
  2. 每个 ANSI 颜色 / 背景。
  3. 选区文字 / 选区背景。
  4. 光标 / 背景(如果光标是块状)。
  5. 推导出的界面 token:muted、dim、accent。

低对比度可能是有意的

有些主题刻意做得柔和。站点展示数值,而不是拒绝主题。如果低于 4.5:1,在描述里说明,而不是隐藏。

改推导,不改调色板

如果 muted 或 dim 不达标,调整推导规则;不要为了满足界面 token 去改终端调色板。调色板才是主题,界面 token 是我们的解释。