---
title: "Figma 颜色对比度与 WCAG：取色器就能查，AA 不过还能一键修正"
excerpt: "Figma 取色器自带 Check color contrast，选中图层即可看对比度与 WCAG AA/AAA 是否通过并一键修正；再讲官网在线检查器、Check designs 的套餐边界，以及色盲模拟和合规色阶插件。"
canonical: https://plugmate.figmod.top/blog/figma-color-contrast
---

# 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 批量替换颜色](/blog/figma-batch-replace-colors)。
- **自动修正只改前景色**。如果你更想动背景色，需要选中背景图层反过来检查，因为被检查的永远是当前选中的那一层。
- **背景复杂时别全信自动识别**。帮助文档只说明了前景与背景两种颜色的比较；文字压在照片、渐变或半透明叠层上时，建议取文字下方最浅和最深的区域分别核一次。

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

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

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

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

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

需要注意边界：按 [Figma 帮助中心](https://help.figma.com/hc/en-us/articles/39592284074263-Check-designs-in-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](/plugin/plugin-6)：选中两个图层就比较它们的对比度；插件保持开启时，切换选择会自动更新结果。它还能预览不同类型的色觉障碍效果，并把对比度结果复制到颜色样式的描述里做记录。适合日常边做边查。
- [Stark - Contrast & Accessibility Checker](/plugin/plugin-191)：更像一整套无障碍工具，除了对比度检查和视觉模拟，还有文件扫描、焦点顺序、替代文本标注、点击区域大小检查等。适合要做完整无障碍交付的团队。Stark 有免费功能也有付费套餐，库里标为免费，**具体哪些能力要付费，以安装时提示为准**。

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

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

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

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

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

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

## 关于 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 这类插件扫整页。

想按场景找更多颜色和无障碍类插件，可以在 [觅件](https://plugmate.figmod.top/) 里直接用中文搜「对比度」「色盲」「色阶」。