深色模式正文配色
设计师为 App 深色模式配正文色,背景 #121212 上选了 #BBBBBB。用本工具一测,普通文本对比度仅 4.2:1,未达 WCAG AA 的 4.5:1 要求。调至 #D0D0D0 后对比度 5.1:1 才通过。这个决策在 30 秒内完成,避免了上线后被视障用户投诉的风险。
设计师在 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,顺利通过验收。
市场部同事在会议室投屏,投影仪偏色导致原本清晰的深蓝底白字变成灰底灰字,后排看不清。他用手机拍下投屏画面,用工具取色器提取实际显示色,发现对比度只有 2.1:1。根据工具推荐,把文字改为 #FFCC00 亮黄色,对比度提升到 6.5:1,全场都能看清。
销售总监要求邮件签名里的链接用品牌色 #2B579A,但背景是白色。用工具一测对比度 3.9:1,不满足 AA 级。改为 #1A3A6B 后对比度 5.7: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 要求整个文字区域的最小对比度都达标。应取渐变中最接近背景色的那个颜色测。
对比度 = (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)要求。
WCAG 的 AA 和 AAA 对对比度要求不同。普通文本 AA 要求 >= 4.5:1,AAA 要求 >= 7:1;大文本(>=18px 粗体或 >=24px)AA 是 >= 3:1,AAA 是 >= 4.5:1。所以同一个颜色组合可能过 AA 但过不了 AAA。工具结果区会同时显示两个评级,分别对应普通文本和大文本的通过状态,可以对照看具体是哪个尺寸卡住了。
支持。本工具的前景色和背景色输入框接受 Hex(#fff / #ffffff)、RGB(rgb(255,255,255))、RGBA(rgba(255,255,255,0.5))、HSL、以及常见英文颜色名(如 white、black、red、blue)。不区分大小写,空格可省略。如果输入格式错误,输入框会变红提示,结果区不会显示对比度。注意:带透明度的 RGBA 或 HSL 会按白色背景做叠加计算,不是直接取 RGB 值。
正常。人眼对颜色差异的感知不是线性的,尤其是饱和度低或明度接近的相邻色(如浅灰背景+深灰文字)。WCAG 对比度算法基于相对亮度(Luminance)的数学比值,而非色相差异。两个颜色即使色相完全不同,只要亮度接近(比如深蓝和深红),对比度也可能很低。建议用工具直接测,不要凭感觉判断。
本工具采用 W3C WCAG 2.1 标准定义的相对亮度公式(sRGB 线性化 + 加权求和)和对比度公式 (L1 + 0.05) / (L2 + 0.05)。这是国际通行的无障碍评测标准。如果其他网站结果不同,可能是它们用了旧版公式(如 WCAG 2.0 的简化版),或者对透明度、抗锯齿像素的处理方式不同。本工具严格遵循最新规范,结果与 W3C 官方参考实现一致。
不能直接测。本工具只接受纯色值输入(Hex / RGB 等),不支持图片上传或取色。对于渐变背景,需要手动取最浅和最深的两个颜色分别测:文字与最浅色的对比度必须达标,与最深色的对比度也要达标,才能保证整段文字可读。如果渐变区域文字跨了多个色块,建议按最差情况(对比度最低的那个点)来评估。
不会。本工具全部在浏览器本地运行,颜色值输入后不会离开你的电脑。即使断网,已加载的页面也能正常计算。适合处理敏感设计稿或内部品牌色。刷新或关闭页面后输入内容自动清除,不留缓存。
WCAG 标准是数学上的最低保障,但不是视觉舒适度的保证。AA 级 4.5:1 的对比度对正常视力用户通常可读,但对小字号细体字、低分辨率屏幕、或环境光刺眼的情况,可能仍不够清晰。建议在 AA 基础上,结合实际使用场景(屏幕尺寸、字体粗细、阅读距离)适当提高对比度,比如目标定在 5:1 或 7:1 以上。工具给出的只是基准线,不是最终决策。
对比度公式中,当两个颜色完全相同时,相对亮度相等,分子分母相减为 0,所以计算结果为 0:1。但工具显示为 1:1 是因为做了最小下限处理(避免除零或显示负数),实际上代表「无对比度」。这种情况在任何 WCAG 合规工具上结果都一样,不是 bug。如果输入了看似不同但亮度完全相同的颜色(如纯红 #FF0000 和纯绿 #00FF00 的亮度值巧合接近),也可能出现接近 1:1 的结果。
工具结果区会分别列出「普通文本」和「大文本」的评级。大文本定义为 >= 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 图标直观标出,不需要自己记数值。
隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。