Figma 颜色对比度与 WCAG：取色器就能查，AA 不过还能一键修正

做 UI 时常被问到两个问题：这个灰字在白底上够不够清楚？Figma 里能不能直接查颜色对比度、看是否符合 WCAG？

先说结论：能，而且不用装插件。 Figma 取色器里自带「Check color contrast」，选中图层就能看到对比度数值和 AA / AAA 是否通过，不达标还能一键修到最近的合规颜色。插件更适合三类需求：色盲模拟、批量扫描整页、或者从头生成一套「天生合规」的色阶。

先弄清标准：WCAG 对比度要多少

WCAG（Web 内容无障碍指南）用「对比度」衡量前景色和背景色的亮度差，范围从 1:1（没有差别）到 21:1（白底黑字）。Figma 帮助中心列出的常用门槛是：

场景 AA（常规要求） AAA（更高要求） 正文等普通文字 4.5:1 7:1 大号文字 3:1 4.5:1 图标、输入框边框等图形和界面元素 3:1 —

「大号文字」在 WCAG 2 里指至少 18pt，或至少 14pt 的粗体，换成网页像素大约是 24px，或 18.66px 粗体。图形元素只有 AA 一档，Figma 的设置里 AAA 也只对文字开放。

大多数产品把 AA 当作底线；AAA 很难在所有颜色上做到，通常只在正文等关键文字上追求。

方法一：取色器自带的对比度检查（所有套餐可用）

Figma 帮助中心「Update fills using the color picker」写明，这个功能所有套餐都能用，需要文件的编辑权限。官方给的流程是：

1. 选中要检查的图层（比如一段文字），在右侧栏点它的填充色块，打开取色器。
2. 点取色器里的 Check color contrast，进入无障碍视图。
3. 看前景色和背景色之间的对比度数值，以及 AA、AAA 是否通过。你选中的图层颜色永远被当作前景色，背景由 Figma 自动识别。
4. 如果某一档没通过，点那个未通过的标识，Figma 会把颜色自动修正到最近的合规颜色。
5. 在设置里可以手动指定判断类别：Auto（按选中图层自动判断）、Large text、Normal text、Graphics；合规等级可选 AA 或 AAA（AAA 仅限文字）。

几个实用的判断：

• 改灰字最省事的做法：先用自动修正拿到一个合规值，再把它存成颜色样式或变量，避免下一个页面又手调出不合规的灰。批量换色可以参考我们之前写的 Figma 批量替换颜色。
• 自动修正只改前景色。如果你更想动背景色，需要选中背景图层反过来检查，因为被检查的永远是当前选中的那一层。
• 背景复杂时别全信自动识别。帮助文档只说明了前景与背景两种颜色的比较；文字压在照片、渐变或半透明叠层上时，建议取文字下方最浅和最深的区域分别核一次。

方法二：没打开文件时，用 Figma 官方的在线检查器

Figma 官网还有一个免费的 Color Contrast Checker 页面：输入前景和背景的 HEX 色值，就能看到对比度，以及普通文字、大号文字、界面元素三类在 AA / AAA 下是否通过。页面还提供交换前后景，以及模拟不同类型色盲的下拉选项。

它适合和产品、开发在会上快速对一个颜色，或者在定品牌色之前先试几组搭配。

方法三：整页扫描的 Check designs（仅限部分套餐）

如果你想一次检查一整页，而不是一个个点图层，Figma 的 Check designs 可以在「Colors」标签下给出对比度建议，并在设置里选 AA 或 AAA 等级。它还会找出没绑定变量的硬编码颜色、间距和字体。

需要注意边界：按 Figma 帮助中心 的说明，Check designs 只在 Organization、Enterprise、Government 和 Education（K-12）套餐可用，一次只能检查一个页面，选中图层上限 2.5 万个，而且它更依赖已发布的、基于变量的设计系统。个人版和专业版用户用不到它，整页扫描就要靠插件。

自带工具做不到的，再交给插件

Figma 自带能力已经覆盖「单个颜色合不合规」。下面这些需求，自带工具要么做不到，要么不方便，才值得装插件。

数据来自觅件插件库：用「对比度」「无障碍」「色盲」三个关键词检索觅件插件库，至少有 12 个插件条目在介绍中明确写了对比度检查或对比度规则（其中 HCT color picker 收录了两个条目），11 个在库里标为免费、1 个标为付费；只有 3 个条目的介绍提到了色盲模拟。

想在设计时看色盲效果：Able、Stark

• Able – Friction free accessibility：选中两个图层就比较它们的对比度；插件保持开启时，切换选择会自动更新结果。它还能预览不同类型的色觉障碍效果，并把对比度结果复制到颜色样式的描述里做记录。适合日常边做边查。
• Stark - Contrast & Accessibility Checker：更像一整套无障碍工具，除了对比度检查和视觉模拟，还有文件扫描、焦点顺序、替代文本标注、点击区域大小检查等。适合要做完整无障碍交付的团队。Stark 有免费功能也有付费套餐，库里标为免费，具体哪些能力要付费，以安装时提示为准。

想一次查完整个文件、又没有企业版：Stark

Check designs 用不了时，Stark 介绍中的 Sidekick 能自动扫描 Figma 文件并给出修复建议，是这类需求在库里最直接的选择。同样，付费范围以安装时提示为准。

想从源头避免不合规：用合规色阶生成器

与其每次事后修，不如在建色板时就把对比度算进去：

• Color Ramp Generator：输入一个 HEX 色值，生成 15 级色阶，编号相差 50 约对应 4.5:1，相差 40 约对应 3:1，相差 60 约对应 7:1。选字色和底色时按编号差来配，就能大致落在 AA 或 AAA。
• PencilColor：基于 OKLCH 生成色阶，内置 WCAG 2.1 和 APCA 对比度检查，能推荐用黑字还是白字，并生成 Figma 变量和明暗两套主题。
• HCT color picker：基于 Google 的 HCT 色彩逻辑，用 Tone 明度差辅助判断：小元素与背景建议差 50，大元素建议差 40。适合以单一品牌色扩展色板。

如果你的配色里有渐变，可以顺带看看 Figma 渐变与弥散渐变 那篇，渐变上的文字要按最浅处来核对比度。

关于 APCA，说清楚一点

上面有几款插件支持 APCA（一种新的感知对比度算法）。它的结果和 WCAG 2 的对比度数值不能直接换算，也不是目前 WCAG 2.x 的正式判定方法。如果你的产品需要按 WCAG 2.1 / 2.2 做合规，验收时仍以 4.5:1、3:1 这套对比度为准，APCA 可以当作调色时的参考。

一套够用的检查顺序

1. 建色板时用色阶生成器，把文字色和底色的搭配规则先定下来。
2. 做稿时用取色器自带的 Check color contrast 抽查关键文字和图标，不过就一键修正。
3. 文字压在图片、渐变上的地方，手动取最浅处再核一次。
4. 需要看色盲效果时，用 Able 或官网在线检查器的模拟选项。
5. 交付前，有企业版就跑一遍 Check designs，没有就用 Stark 这类插件扫整页。

想按场景找更多颜色和无障碍类插件，可以在 觅件 里直接用中文搜「对比度」「色盲」「色阶」。