在 Figma 中落地 WCAG 颜色对比体验

今年年初，我们为新的产品品牌色做探索。配色在深浅模式下都很好看，但一旦放进真实界面，WCAG 对比度检查就不断报红。之前我的做法是将色值复制进在线计算器，得到一个通过值后再手动同步回 Figma——效率低、上下文割裂，而且很容易在组合样式时出错。

这次我想把整个流程嵌进设计工具里，于是我们围绕 Figma Variables 和插件 API 做了一次“无障碍优先”的实验，让颜色探索从一开始就拥有可验证的对比度信息。

先定义约束，再玩色彩

我从 WCAG 2.2 的等级要求出发，提炼出三套目标：正文 4.5:1、按钮 3:1、关键提示 7:1。对应到 Figma 变量时，我没有直接写死色值，而是构建了一个包含 base, on-base, on-base-muted 等语义的色板。这样无论日后品牌色怎么调整，约束关系都仍然成立。

const contrastTargets = {
  body: 4.5,
  action: 3,
  highlight: 7,
}

function getContrastReport(foreground: string, background: string) {
  const ratio = figma.utilities.contrast(foreground, background)
  const level = Object.entries(contrastTargets).find(
    ([, target]) => ratio >= target,
  )
  return {
    ratio: ratio.toFixed(2),
    passes: Boolean(level),
    level: level?.[0] ?? 'insufficient',
  }
}

这段插件代码会在我选择任意图层时自动读取填充、描边和文本颜色，并与变量面板同步。对比结果直接以 badge 的形式贴在 Figma 画布旁，避免了来回切换。

将对比度指标融入设计评审

把指标显示出来只是第一步，关键是让团队在评审时真正关注到它。我做了两个调整：

• 看板同步：在设计交付 Notion 页面中增加“Contrast Check”字段，由插件生成的快照自动填入。任何色彩调整都必须附上最新截图。
• 情境校验：我们选了三种真实页面（营销页、仪表盘、移动端卡片）作为对比样例，插件会一次性输出每个场景的合规情况，让评审讨论聚焦在“这个使用场景该形成怎样的视觉和层级”。

这些举措让数字信息不再是“设计师告诉你没问题”，而是直接呈现在大家面前的事实依据。工程团队甚至据此写了一个 Storybook 装饰器，运行时自动检查 PR 中的新组件是否符合相同阈值。

设计探索与无障碍不冲突

在这次迭代里我察觉一个重要洞察：当约束变得可视化、可追踪，创造力反而更自由。我们最终的品牌配色依然保留了高饱和的霓虹绿色，只是通过增加亮度梯度与叠加层，使对比度在视觉 mood 和法规之间取得了平衡。

未来我打算把这一套工作流进一步扩展到渐变、透明度和图像覆盖上，让无障碍指标成为设计系统的内建能力，而不是上线前的“检查项”。WCAG 不是枷锁，它更像一组提醒——当设计尊重这些提醒时，整个产品的体验会变得更加清晰而可信。