面向设计师的 WCAG 对比度，不是法律文本

真正要紧的两个数字

WCAG 2.1 把对比度定义为 1:1（同色）到 21:1（黑底白字）之间的比值。真正干活的只有两个阈值：

• AA —— 正文 4.5:1，大字 3:1（18px 常规或 14px 加粗及以上）以及 UI 组件。
• AAA —— 正文 7:1，大字 4.5:1。更严格，用于长篇正文。

多数产品以 AA 为目标。AAA 是阅读密集场景的加分项，不是通用要求。

设计真正在哪里翻车

灰压灰是最常见的失败：#94a3b8 的标签放在 #f1f5f9 上看着「很现代」，实际比值只有约 2.9:1，做大号展示元素没问题，做正文就不合格。次要文字是对比度预算最先被花掉的地方，所以常见的修法是让次要文字更深（或者背景更浅），而不是把整套设计重做一遍。

不毁审美的策略

1. 让正文接近黑色。 好看的中间灰只留给大标题和图标。
2. 在极端情况上测，而不是测平均值。 深底浅字和浅底深字都要检查。
3. 给悬停态单独定一个比值。 交互文字在悬停时变暗，可能恰好在用户正在盯着它的时候跌破 4.5:1。
4. 不要只依赖颜色。 对比度不达标往往是在提示某个状态（错误、选中），这种状态还应该配图标或下划线。

快速读懂数字

低于 2 的比值只能算装饰。2 到 3 之间可以做大号展示文字和非文字 UI，但绝不能做正文。3 到 4.5 之间你就进了「只适合大字或加粗」的区域。高于 4.5 用在正文就达到 AA，高于 7 则除最严格的情况外都满足 AAA。如果你只记一个阈值，就记正文用的 4.5:1。

配色检查清单

做新主题时，下面这几组搭配要在任何东西上线前先过一遍检查器：页面背景上的正文、页面背景上的弱化文字、每一种表面色和卡片色上的文字、你打算放标签的每一种品牌色上的文字，以及按钮底色上的按钮文字。这五项检查能覆盖绝大多数真实世界的对比度失败，而 token 定义好之后只要大约十分钟。

如何验证

对你配色里的每一组文字与背景搭配，都用 ToolsKit 的 对比度检查器：粘入 #HEX、rgb() 或 hsl() 值，它会返回比值，以及常规字号和大字号下 AA 与 AAA 的 PASS/FAIL。要在设计过程中就检查，而不是上线前才做一轮审计。