Codex 主题对比度：一份能照着做的指南

对比度比例到底在量什么

对比度比较两个颜色的相对亮度，从 1:1（相同）到 21:1（黑白）。WCAG 对正文的最低要求是 4.5:1，大字可以 3:1。UI 组件和焦点指示器与相邻颜色要 3:1。

比例是一对颜色的属性，不是文字颜色单独的属性。同一个灰色在暖色表面上很舒服，放到深色图片上就消失了。所以工作室对着你选的实际表面测量。

深色主题：避开极端

纯黑配纯白制造最大比例，问题也常在这里。OLED 上黑底白字会产生光晕，边缘发光，小字看起来发糊。近黑表面和稍暗的文字更适合长会话。

表面用 #121316 到 #1c1c1e，文字用 #f5f0e8 而不是 #ffffff。比例仍远高于 4.5:1，视觉冲击更低。面板分隔靠稍亮的表面和细边框，不靠阴影。

浅色主题：要纸，不要白

纯白把眩光拉满。暖米白如 #f5f0e8 让页面平静，同时给石板文字足够对比。浅色主题的风险相反：边框和次要文字太淡。

测禁用按钮、占位符和侧栏与任务之间的边框。它们消失，主题就不是极简，是没做完。加装饰之前先提边框对比。

差异颜色要单独测

新增和删除行不是普通文字。它们靠颜色携带意义，所以是色觉无障碍问题。默认的绿和红，也正是很多人最难分的一对。

保持两者明度差，加一个非颜色线索，比如左边框或背景色，再在实际表面上测。一个过了文字对比度的绿色，仍可能在饱和背景上消失。

强调色是控件色

强调色不是装饰。它标记主操作、链接和焦点，所以和表面要达到 3:1，而且不该用于大段文字。

亮强调色在缩略图里好看，放在侧栏一下午就会累。选一个强调色，少量使用，其余层级交给墨色。

怎么量才不骗自己

量渲染后的那一对，不是设计稿里的那一对。抗锯齿、透明度和背景图都会改变有效颜色。面板 88% 不透明叠在照片上，文字不是坐在面板色上，而是坐在混合色上。

CodexSkin 工作室在允许导出前会跑同一套 WCAG 计算，本页的检查器用的也是同一个公式。这是故意的：你应该能审计我们的预设，而不是相信一张截图。预设过不了你的数字，就改掉，或者别用。

工作室用你选的表面值，这是正确的第一遍。第二遍靠眼睛：密集差异、长段落、低亮度屏幕。比例过了但眼睛累，就相信眼睛去调。

一张短清单

六条都过，通常就舒服了。数字过、视觉不过，问题多半是对比度太均匀：所有东西一样响，就没有层级。

• 正文与实际表面至少 4.5:1。
• 控件与焦点环至少 3:1。
• 禁用和占位文字仍然可读。
• 差异新增与删除不只靠色相区分。
• 强调色用于控件，不用于正文。
• 低亮度和明亮房间都测过。

FAQ