ZH
我的工具

颜色对比度检测器(WCAG 2.2)

按 WCAG 2.2 的 AA 和 AAA 标准检测文字与背景的对比度,并给出 APCA(草案)Lc、色觉缺陷模拟和 ΔE,还能推荐达标颜色、生成调色板对比表。

每行一种颜色,输入 2 到 12 种,会评估每一组文字/背景搭配。
我的工具 →
广告

WCAG 2.2 要求常规文字的对比度至少为 4.5:1,大号文字和界面图形至少为 3:1(AA 级),AAA 级则是 7:1 / 4.5:1。本检测器严格按标准定义计算对比度,告诉你在当前字号下通过了哪些等级,推荐最接近的达标文字颜色,模拟三种主要色觉缺陷下的显示效果,并给出较新的 APCA 分数(明确标注为草案)。

使用方法

  1. 输入文字颜色和背景颜色,可以是 HEX、rgb()、hsl()、oklch() 或 CSS 颜色名称。
  2. 设置字号;如果是粗体就勾选,以便采用正确的阈值。
  3. 查看对比度及 AA/AAA 结果;若未通过,可使用建议的颜色。
  4. 也可以粘贴一个调色板,一次性评估所有文字/背景组合。

计算公式

对比度 = (L₁ + 0.05) ÷ (L₂ + 0.05),L = 0.2126 R + 0.7152 G + 0.0722 B,其中每个通道 c = v/255 先线性化:c ≤ 0.04045 ? c/12.92 : ((c + 0.055)/1.055)^2.4

L₁ 是较亮的颜色。对比度范围从 1:1(相同颜色)到 21:1(白底黑字)。结果按截断而非四舍五入显示:4.499:1 不满足 AA。大号文字指 24 px 及以上,或 18.66 px(14 pt)及以上的粗体。

示例

白底灰字 #767676:118/255 = 0.4627 线性化后为 0.1812,所以对比度为 1.05 ÷ (0.1812 + 0.05) = 4.54:1,满足常规文字 AA,但不满足 AAA。再浅一级的 #777777 为 4.47:1,正文已不满足 AA。

常见问题

APCA 是什么?应该用吗?

APCA(可及性感知对比度算法)是未来 WCAG 3 的候选方法,对感知的建模更好,尤其适用于深色模式,但目前仍是草案:现在的合规判断以最先显示的 WCAG 2 对比度为准。

对色盲友好的搭配,只看对比度够吗?

对比度取决于明度,在色觉缺陷下大多仍能保持,但红绿之间的区别可能消失。模拟表展示了红色盲、绿色盲和蓝色盲人群眼中的每组搭配;千万不要只靠颜色来传达含义。

徽标或禁用按钮也需要 4.5:1 吗?

不需要。WCAG 豁免徽标文字、纯装饰性文字和不可用的控件。传达信息的图标和输入框边框则需要 3:1。

资料来源

最后更新:

引用此工具
APA

kakaoCalc. (2026, November 8). 颜色对比度检测器(WCAG 2.2). https://kakao.mobile/zh/tools/color-contrast-checker/

MLA

“颜色对比度检测器(WCAG 2.2).” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/color-contrast-checker/.

广告