定制主题的可访问性：对比度与色盲友好
2026-10-06
换主题时最容易跳过的一件事：配色好不好看，和看不看得清，是两个问题。Codex 主题可访问性落在实际的地方——正文和背景的对比度够不够、相邻的语法高亮分不分得开、整套装上之后色觉障碍的同事还能不能用。这篇讲要量哪些元素、门槛定在哪、改完之后怎么验。
对比度到底在量什么
对比度是两个颜色亮度之间的比值，写成 21:1 到 1:1 之间的一个数。纯黑配纯白是 21:1，同一个颜色配自己是 1:1。它只看亮度，不看色相，所以两个看起来毫不相关的颜色可能有完全一样的对比度。
- 正文对背景：读代码时最主要的一对，也是唯一必须过 AA 的一对
- 注释对背景：通常最先掉到门槛下面，因为注释本来就被设计成要退后一步
- 选中态对未选中态：区分度不够时你会反复框错行
- 行号与缩进参考线：不影响理解代码，但影响你找不找得到光标
- 光标对背景：只有一像素宽，对比度不够等于没画
WCAG 的三档门槛怎么落到主题上
WCAG 给的是三档：AA 要求普通文字 4.5:1、大号文字 3:1，AAA 把普通文字提到 7:1。直接套到代码编辑器上会有点别扭，因为语法高亮既不是普通文字也不是大号文字，而且你一次读的是几百行，不是一个标题。
- 正文、字符串、关键字：按普通文字算，目标 4.5:1
- 注释：同样是普通文字，别因为它灰就放过
- 标签、滚动条这类压在背景上的 UI 元素：按 3:1 算
- 分隔线、缩进线这类装饰元素：不设门槛，但低于 1.5:1 基本等于没画
- AAA 的 7:1 值得追，但只追正文这一条就够，全套追下来配色会被压平
色盲友好不是把颜色调淡
最常见的误解是把色盲友好理解成少用红绿。红绿色盲确实是最常见的类型，但解法不是回避某个色相，而是给颜色加上第二个区分维度：明度。两个语法色只靠色相分开，红绿色盲看到的是同一个颜色；让它们的明度错开，问题就没了。
- 红绿色盲影响的是色相判断，不是明暗判断，所以明度是最可靠的第二维度
- 同样明度的红和绿在红绿色盲眼里几乎重合，把其中一个提亮或压暗就分开了
- 别只用颜色表达状态：错误提示配个图标或文字，别只靠变红
- 蓝黄色盲更少见，同一套规则照用
- 把整套调成低饱和的粉彩不会让事情变好，只会把对比度一起拖下去
动手前的四项检查
- 把显示器亮度调到最低再看一遍正文，弱对比度的主题都是在这个亮度下崩的
- 眯眼看屏幕：两个语法色糊成一片时，先动色相而不是明度
- 用取色器量渲染出来的实际颜色，把数字写下来，别凭感觉
- 亮色和暗色两套都测，只定义了一套的槽位会退回默认值
- 找一位色觉障碍的同事看一眼，五秒钟能发现你自己永远发现不了的问题
动手前先查一遍，比改完再返工省事得多。改颜色去 /zh/guides/customize，想看成品长什么样可以去图库 https://codex-skin-studio.shop/zh/gallery，关于这套工具的更多背景在 /zh/about。
常见问题
Codex 主题的对比度要到多少才算合格？
正文对背景按 4.5:1 走，这是 WCAG AA 对普通文字的要求。注释别豁免，一行行读下来它的量并不小。标签、滚动条这类 UI 元素按 3:1。装饰性的分隔线没有硬性门槛，但低于 1.5:1 基本等于没画。
色盲友好的主题是不是只能做成灰扑扑的？
不是。色觉障碍影响的是色相判断，对明度判断基本没影响。饱和度可以留着，让相邻的语法色在明度上错开，颜色照样鲜艳，只是不再只靠颜色传递信息。反过来，把整套调成低饱和粉彩会把对比度一起压下去，那才是真的变难读。
不装工具怎么测对比度？
浏览器 DevTools 里就有。用取色器吸一下前景和背景，把色值丢进任意在线对比度计算器，或者直接看 DevTools 颜色面板给出的对比度数值。要注意量的是渲染出来的实际颜色，不是你在 CSS 里写的那个变量。
亮色和暗色两套都要检查吗？
要。主题框架在两套方案之间切换变量，只定义了一边的槽位会退回默认值，对比度往往就是在那里崩掉的。两边都写完整，切换时才不会突然变成一片白或者一片黑。