设计配色 · 颜色处理

颜色对比度

WCAG AA/AAA 评级/文字背景

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 62 次使用
WCAG Contrast
前 景 / 背 景Foreground & Background
文字(前景)
底色(背景)
前景 α 100%
前景含透明度时,按 与背景合成后的实际颜色计算对比度(半透明文字常见于水印 / 提示语)。
对 比 比Contrast Ratio · WCAG 2.x 相对亮度
21:1
Contrast Ratio
无 障 碍 评 级AA / AAA · 正常文字 / 大字 / UI 组件
自 动 修 正最接近的达标色 · 固定色相
建议
WCAG 标 准阈值速查
≥ 4.5:1正常文字 AA(< 18pt / < 14pt 加粗)—— 政府 / 银行 / 医疗等公共服务最低合规线
≥ 3:1大字 AA(≥ 18pt 或 ≥ 14pt 加粗)· 同时也是 UI 图形组件 / 边框 / 焦点框的最低线
≥ 7:1正常文字 AAA(最高等级)—— 追求极致可读性时采用
≥ 4.5:1大字 AAA
实 时 预 览所见即可读性
QUANBAO · CONTRAST PREVIEW

主按钮 文字链接
对比报告
就绪 · 调整前景 / 背景颜色,实时评定 WCAG AA / AAA · 全程浏览器本地处理
第一节

关于本工具

About

设计师在 Sketch 或 Figma 里调好一套配色,切到手机上一看,灰色文字在浅灰背景上几乎消失——这不是屏幕问题,是对比度不够。这个工具直接输出 WCAG 2.1 AA(4.5:1)和 AAA(7:1)的判定结果,以及精确的对比度比值。输入十六进制或 RGB 色值即可,所有计算在浏览器本地完成,色值不会离开设备。

使用场景

深色模式正文配色

设计师为 App 深色模式配正文色,背景 #121212 上选了 #BBBBBB。用本工具一测,普通文本对比度仅 4.2:1,未达 WCAG AA 的 4.5:1 要求。调至 #D0D0D0 后对比度 5.1:1 才通过。这个决策在 30 秒内完成,避免了上线后被视障用户投诉的风险。

户外大屏紧急换字色

商场中庭大屏背景临时换成深蓝色 #003366,原白色文字对比度仅 3.8:1,远低于 AA 级标准。运营人员用工具输入色值,工具直接给出推荐文字色 #FFE066(黄色),对比度 5.2:1 达标。现场 2 分钟完成修改,避免了顾客远距离看不清促销信息的投诉。

政府网站无障碍验收

某区政务网改版验收前,需逐页检查按钮文字与背景对比度。测试人员将页面截图导入取色器,取到按钮色 #0078D7 与背景 #FFFFFF,工具显示对比度 5.8:1,满足 AA 级。但发现灰色提示文字 #999999 与白底对比度仅 2.8:1,不达标。当天全部替换为 #767676,顺利通过验收。

PPT 投屏配色翻车

市场部同事在会议室投屏,投影仪偏色导致原本清晰的深蓝底白字变成灰底灰字,后排看不清。他用手机拍下投屏画面,用工具取色器提取实际显示色,发现对比度只有 2.1:1。根据工具推荐,把文字改为 #FFCC00 亮黄色,对比度提升到 6.5:1,全场都能看清。

邮件签名链接配色

销售总监要求邮件签名里的链接用品牌色 #2B579A,但背景是白色。用工具一测对比度 3.9:1,不满足 AA 级。改为 #1A3A6B 后对比度 5.7:1 达标。这个改动避免了客户在手机上因对比度不足误以为链接不可点击,影响询盘转化。

第二节

使用指南

Getting Started

使用步骤

  1. 1在「前景色」色块上点击,弹出取色器后选取文字颜色,或直接输入十六进制值(如 #333333),色块同步更新
  2. 2在「背景色」色块上点击,选取或输入背景颜色(如 #FFFFFF),右侧对比度比值实时刷新
  3. 3查看评级结果:绿色对勾表示通过 WCAG AA(普通文本 4.5:1),红色叉号表示未达标
  4. 4点击「大文本」开关切换评级标准,大文本(≥18px 粗体或 ≥24px 常规)AA 要求降至 3:1,结果自动重算

输入输出示例

输入输出说明
前景色:#000000,背景色:#FFFFFF,文字大小:16px,文字粗细:normal对比度:21:1,评级:AAA(通过)常规:黑底白字极端对比,验证最大对比度值和 AAA 评级基准
前景色:#333333,背景色:#CCCCCC,文字大小:14px,文字粗细:bold对比度:5.6:1,评级:AA(通过)常规:典型灰色组合,验证 AA 级对加粗小文字的要求(≥3:1)
前景色:#FF0000,背景色:#FFFFFF,文字大小:12px,文字粗细:normal对比度:4.0:1,评级:AA(通过)边界:红色与白色组合,对比度刚好在 AA 级阈值(4.5:1)之下,实际为 4.0:1,说明小文字需更高对比度
前景色:#FFFFFF,背景色:#FFFFFF,文字大小:18px,文字粗细:normal对比度:1:1,评级:无(不通过)边界:完全相同的颜色,对比度为 1:1,验证工具对零对比度的处理
前景色:#123456,背景色:#654321,文字大小:16px,文字粗细:normal对比度:3.2:1,评级:AA(不通过)易错:深蓝与深棕组合,视觉上看似可读,但实际对比度不足 4.5:1,容易误判为通过
前景色:#000000,背景色:#000001,文字大小:14px,文字粗细:bold对比度:1.01:1,评级:无(不通过)易错:人眼几乎无法区分的极近色,验证工具对细微色差的计算精度
前景色:#FFA500,背景色:#FFFFFF,文字大小:24px,文字粗细:normal对比度:2.5:1,评级:AA(不通过)边界:橙色与白色,大文字(≥24px)需 3:1 才能通过 AA,此处仅 2.5:1,说明大文字也有下限

常见错误对照

1.只测了文本颜色,忽略背景色

✗ 错误只输入文字色 #333 就点击计算
✓ 修复同时输入文字色 #333 和背景色 #fff

对比度是前景与背景的比值,缺任一值计算结果无意义。WCAG 要求同时指定前景色和背景色才能判定 AA/AAA 等级。

2.用十六进制简写时漏了补全

✗ 错误输入 #fff 作为背景色
✓ 修复输入 #ffffff 作为背景色

简写 #fff 会被工具自动补全为 #ffffff,但若手动输入 #f0f 则补全为 #ff00ff,与预期 #f0f0f0 不同。建议直接写完整六位。

3.把透明背景当作白色处理

✗ 错误背景色输入 #00000000(带透明通道)
✓ 修复背景色输入实际可见背景色,如 #ffffff

对比度计算基于不透明色。透明背景的实际对比度取决于底层颜色,工具无法模拟叠加效果。若设计稿背景透明,应取最终叠色后的颜色。

4.误以为 3:1 就满足所有 AA 要求

✗ 错误小号正文文字对比度 3.2:1,认为达标
✓ 修复小号正文文字需 ≥ 4.5:1(AA 级)

WCAG 2.1 规定:正常文字(<18pt 或 <14pt 粗体)需 ≥ 4.5:1;仅大号文字(≥18pt 或 ≥14pt 粗体)才接受 3:1。3:1 不适用于正文。

5.用 RGB 数值时忘了归一化

✗ 错误输入 rgb(255, 0, 0) 作为文字色
✓ 修复输入 #ff0000 或 rgb(255,0,0)(工具自动解析)

部分工具要求输入十六进制,若直接粘贴 rgb() 字符串可能被当作无效值。建议统一使用十六进制格式,避免解析歧义。

6.忽略 hover/focus 状态的对比度

✗ 错误只测默认状态文字对比度 4.8:1
✓ 修复同时测 hover 状态文字色 #666 与背景 #fff 的对比度

WCAG 2.1 要求非文本组件(含链接)的视觉状态变化也需满足对比度要求。若 hover 时文字变浅,可能降至 3:1 以下。

7.把纯色背景上的渐变文字当作统一对比度

✗ 错误渐变文字取中间色 #888 测对比度
✓ 修复取渐变中对比度最低的点(如最浅色 #aaa)测

渐变文字的对比度随位置变化,WCAG 要求整个文字区域的最小对比度都达标。应取渐变中最接近背景色的那个颜色测。

第三节

工作原理

How It Works

核心公式

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

变量说明

  • L1较亮颜色的相对亮度
  • L2较暗颜色的相对亮度

示例

白色(#FFFFFF)相对亮度 L1=1.0,深灰色(#555555)相对亮度 L2=0.0902。对比度 = (1.0+0.05)/(0.0902+0.05)=1.05/0.1402≈7.49:1。该对比度满足 WCAG AA 级正常文字(需≥4.5:1)和 AAA 级正常文字(需≥7:1)要求。

输入前景色 + 背景色计算相对亮度(sRGB 线性化 + 加权)计算对比度比值(L1+0.05)/(L2+0.05)输出比值 + WCAG 评级用户选择文字大小 / 粗细判断 AA / AAA(查表阈值)显示通过 / 失败
用户输入 本地处理 输出结果
第五节

常见问题

Q & A
我测出来 AA 级通过,AAA 级不通过,这俩到底差在哪?

WCAG 的 AA 和 AAA 对对比度要求不同。普通文本 AA 要求 >= 4.5:1,AAA 要求 >= 7:1;大文本(>=18px 粗体或 >=24px)AA 是 >= 3:1,AAA 是 >= 4.5:1。所以同一个颜色组合可能过 AA 但过不了 AAA。工具结果区会同时显示两个评级,分别对应普通文本和大文本的通过状态,可以对照看具体是哪个尺寸卡住了。

输入框里填色值,用 #fff 和 white 都能识别吗?

支持。本工具的前景色和背景色输入框接受 Hex(#fff / #ffffff)、RGB(rgb(255,255,255))、RGBA(rgba(255,255,255,0.5))、HSL、以及常见英文颜色名(如 white、black、red、blue)。不区分大小写,空格可省略。如果输入格式错误,输入框会变红提示,结果区不会显示对比度。注意:带透明度的 RGBA 或 HSL 会按白色背景做叠加计算,不是直接取 RGB 值。

我两个颜色肉眼看着差不多,但对比度算出来才 1.2:1,这正常吗?

正常。人眼对颜色差异的感知不是线性的,尤其是饱和度低或明度接近的相邻色(如浅灰背景+深灰文字)。WCAG 对比度算法基于相对亮度(Luminance)的数学比值,而非色相差异。两个颜色即使色相完全不同,只要亮度接近(比如深蓝和深红),对比度也可能很低。建议用工具直接测,不要凭感觉判断。

工具算对比度时到底用的是什么公式?跟别的网站结果不一样怎么办?

本工具采用 W3C WCAG 2.1 标准定义的相对亮度公式(sRGB 线性化 + 加权求和)和对比度公式 (L1 + 0.05) / (L2 + 0.05)。这是国际通行的无障碍评测标准。如果其他网站结果不同,可能是它们用了旧版公式(如 WCAG 2.0 的简化版),或者对透明度、抗锯齿像素的处理方式不同。本工具严格遵循最新规范,结果与 W3C 官方参考实现一致。

我上传了一个带渐变背景的截图,能测文字和渐变背景的对比度吗?

不能直接测。本工具只接受纯色值输入(Hex / RGB 等),不支持图片上传或取色。对于渐变背景,需要手动取最浅和最深的两个颜色分别测:文字与最浅色的对比度必须达标,与最深色的对比度也要达标,才能保证整段文字可读。如果渐变区域文字跨了多个色块,建议按最差情况(对比度最低的那个点)来评估。

工具是纯前端算的,我的颜色值会上传到服务器吗?

不会。本工具全部在浏览器本地运行,颜色值输入后不会离开你的电脑。即使断网,已加载的页面也能正常计算。适合处理敏感设计稿或内部品牌色。刷新或关闭页面后输入内容自动清除,不留缓存。

我测出来 AA 通过了,但甲方说看不清,是不是工具不准?

WCAG 标准是数学上的最低保障,但不是视觉舒适度的保证。AA 级 4.5:1 的对比度对正常视力用户通常可读,但对小字号细体字、低分辨率屏幕、或环境光刺眼的情况,可能仍不够清晰。建议在 AA 基础上,结合实际使用场景(屏幕尺寸、字体粗细、阅读距离)适当提高对比度,比如目标定在 5:1 或 7:1 以上。工具给出的只是基准线,不是最终决策。

为什么我输入两个一样的颜色,对比度显示 1:1?

对比度公式中,当两个颜色完全相同时,相对亮度相等,分子分母相减为 0,所以计算结果为 0:1。但工具显示为 1:1 是因为做了最小下限处理(避免除零或显示负数),实际上代表「无对比度」。这种情况在任何 WCAG 合规工具上结果都一样,不是 bug。如果输入了看似不同但亮度完全相同的颜色(如纯红 #FF0000 和纯绿 #00FF00 的亮度值巧合接近),也可能出现接近 1:1 的结果。

大文本和小文本的 AA/AAA 要求不一样,工具里怎么区分?

工具结果区会分别列出「普通文本」和「大文本」的评级。大文本定义为 >= 18px 粗体 或 >= 24px 常规体。计算时,大文本的 AA 门槛是 3:1,AAA 是 4.5:1;普通文本 AA 是 4.5:1,AAA 是 7:1。如果输入的颜色组合对比度是 4:1,那么大文本 AA 通过(>3:1),但普通文本 AA 不通过(<4.5:1)。结果区会用 Pass / Fail 图标直观标出,不需要自己记数值。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭