颜色对比度检测 - WCAG 无障碍对比度怎么算（AA/AAA）

🌟 为什么要在意对比度#

文字看不看得清，取决于前景色与背景色的对比度。对比度太低，弱视用户、强光环境下都会读不清；这也是无障碍规范（WCAG）明确要求的指标。

星点对比度检测工具输入前景色和背景色，实时给出对比度数值与是否达标。

🧮 对比度怎么算#

对比度 = (L1 + 0.05) / (L2 + 0.05)

其中 L 是相对亮度，按 sRGB 与 WCAG 公式计算：

每通道归一化到 0~1，做 sRGB 反伽马：
- 若 c ≤ 0.03928：c / 12.92
- 否则：((c + 0.055) / 1.055) ^ 2.4
加权求和：L = 0.2126·R + 0.7152·G + 0.0722·B

L1 是较亮颜色，L2 是较暗颜色。结果范围 1:1（完全相同）到 21:1（黑白）。

黑底白字：(1 + 0.05) / (0 + 0.05) = 21:1（最高）
同色：1:1（完全看不清）

📏 WCAG 标准#

等级	普通文本	大字号（≥18.66px 粗体或 ≥24px）
AA	≥ 4.5:1	≥ 3:1
AAA	≥ 7:1	≥ 4.5:1

大字号定义：约 24px 以上，或约 18.66px 以上且加粗。

🔍 达标实例#

组合	对比度	AA 普通文本
黑字白底	21:1	✅
白字深蓝底	约 10:1	✅
深灰字白底 `#333`	约 12.6:1	✅
灰字白底 `#999`	约 2.8:1	❌
白字星点蓝底 `#409eff`	约 2.78:1	❌
黄字白底	约 1.07:1	❌

可见”品牌色背景 + 白字”常常不达标。

💡 怎么快速达标#

用工具的”最佳文字色”功能，直接得到在给定背景上对比度最高的文字颜色；
背景偏亮时用深色字，背景偏深时用白色字（分界约在背景相对亮度 0.18）；
实在要用品牌色，可加深背景（降低亮度）；
大字号标题的标准更宽松，但正文务必满足 4.5:1。

♿ 顺带说说色盲#

对比度之外，还要考虑色盲用户能否区分。用色觉模拟可以预览红绿色盲等视角下的效果，避免”只靠颜色区分”的设计。

📦 批量检测#

对比度检测支持批量输入”前景背景”逐行检测，适合一次性核对整套配色的可读性。

❓ 常见问题（FAQ）#

对比度多少才算合格？

普通文本建议 ≥ 4.5:1（AA），追求更高可到 7:1（AAA）；大字号可放宽到 3:1（AA）。

能批量检测多组颜色吗？

可以，[对比度检测](https://www.xingdian.net/app/color/contrast/)支持批量输入"前景背景"逐行检测。

对比度和亮度是一回事吗？

不是。对比度是两个颜色的相对亮度之比，和单一颜色的亮度不同。

设计稿里怎么用？

把设计稿里的文字色与背景色填进工具，确认达标再定稿。

AA 和 AAA 要选哪个？

AA 是普遍要求；AAA 更严格，关键内容或高要求产品可追求。

文字阴影能替代对比度吗？

不能。WCAG 看的是文字与背景的对比度，阴影只是视觉辅助。

渐变背景怎么检查？

在最浅与最深两端分别检测，取较差的一端为准。

对比度和色差是一回事吗？

不是。对比度是明暗之比；色差（Delta E）是比较两色的整体差异。

🧮 手算相对亮度（示例）#

以中灰 #808080 为例：

归一化：128/255 ≈ 0.502；
反伽马：((0.502 + 0.055) / 1.055)^2.4 ≈ 0.2159；
三通道相同，L = 0.2159。

与白色（L=1）对比：

1
(1 + 0.05) / (0.2159 + 0.05) ≈ 3.95

约 3.95:1 —— 作为正文不达标（需 4.5:1），但作为大字号可以（需 3:1）。

这说明：“看起来不浅的灰”，作正文仍可能不达标。

🎨 深色模式与对比度#

深色模式同样要过对比度检查：

常见做法	问题	建议
纯黑背景 + 纯白文字	对比过强，长时间易疲劳	用深灰 + 浅灰
深色背景 + 品牌色文字	品牌色偏亮时可能不达标	提高文字亮度
半透明背景	实际对比度随底层变化	按最差情况检查

深色模式背景建议 #0f172a~#1f2937，文字用 #e2e8f0 左右。

📋 常见组件对比度清单#

做 UI 时，逐项核对：

用对比度检测的批量模式一次核对。

📊 对比度数值速查#

前景 / 背景	对比度（约）	普通文本 AA
`#000000` / `#ffffff`	21:1	✅
`#333333` / `#ffffff`	12.6:1	✅
`#666666` / `#ffffff`	5.7:1	✅
`#767676` / `#ffffff`	4.54:1	✅（临界）
`#999999` / `#ffffff`	2.85:1	❌
`#ffffff` / `#409eff`	2.78:1	❌
`#ffffff` / `#2563eb`	5.2:1	✅
`#ffffff` / `#1f2937`	14.6:1	✅

规律：背景越亮，文字要越深；背景越暗，文字要越浅。临界值附近（如 #767676）建议再深一点留余量。

🧰 无障碍改造案例#

案例：品牌按钮白字不达标

原方案：#409eff 背景 + 白字 → 2.78:1 ❌
改法一：加深背景为 #2563eb → 白字约 5.2:1 ✅
改法二：文字改深色 #1f2937 → 约 5.3:1 ✅
改法三：加大字号到 24px+，按大字号标准（3:1）仍不达标，需继续加深

案例：浅灰占位符

#bbb 白底约 1.9:1 ❌ → 改为 #767676 左右可达 4.5:1 ✅

案例：图表颜色

非文本图形建议 ≥ 3:1；折线图还应用不同线型辅助区分。

🌐 WCAG 版本与相关标准#

WCAG 2.1：当前广泛采用，含对比度 1.4.3（AA）、1.4.6（AAA）；
WCAG 2.2：新增焦点可见、目标尺寸等要求；
非文本对比度（1.4.11）：UI 组件与图形建议 ≥ 3:1；
无障碍不止对比度，还包括键盘可达、语义标签、可缩放等。

🧭 更多常见问题#

对比度检测需要联网吗？

不需要，全部在浏览器本地计算。

能检测图片上的文字吗？

不能自动识别；请把图片中文字的近似颜色填入工具检测。

透明背景怎么算？

透明区域实际显示取决于底层颜色，按最终叠加后的颜色检测。

为什么同样的颜色，深浅感觉不同？

人眼对不同色相的感知亮度不同（黄比蓝显亮），对比度用相对亮度计算。

对比度合格就无障碍了吗？

不够。还需考虑色盲、键盘可达、语义标签、可缩放等。

按钮禁用态也要检查吗？

建议检查。禁用态可适当降低对比，但不应完全看不清。

有批量检测方式吗？

有，[对比度检测](https://www.xingdian.net/app/color/contrast/)支持批量输入"前景背景"。

📐 对比度公式速记#

1
对比度 = (L亮 + 0.05) / (L暗 + 0.05)

完全同色 → 1:1
黑白 → 21:1
达标线：普通文本 AA 4.5:1、AAA 7:1；大字号 AA 3:1、AAA 4.5:1

记住”相对亮度”是核心，而不是简单的 RGB 平均。

📎 对比度与设计系统#

在成熟的设计系统里，对比度通常被固化为规范：

定义一组语义色（text-primary、text-secondary、text-disabled），每个都预设好与背景的对比度；
深色模式单独定义一套；
新增颜色时先过对比度检查再入库；
用 Design Token 管理，避免各处手填色值。

这样能从根本上减少”上线后才发现看不清”的问题。用设计辅助可导出 Token。

💬 总结#

对比度是可量化的无障碍指标：公式是相对亮度之比，AA 普通文本要 4.5:1、大字号 3:1。拿不准就用对比度检测输入两个颜色，直接看结果与最佳文字色。

立即体验：访问对比度检测