对比度检测 在线WCAG网页色彩对比度检测
文字看不清是不是对比度不够？检测文字和背景颜色的对比度，对照WCAG AA和AAA标准评级，附带修改建议和预览，适合无障碍设计等场景。
更新于 2026-08-26
相关工具
功能特性
- 实时对比度计算，使用WCAG 2.1 sRGB亮度公式
- WCAG AA和AAA合规性检查，支持普通文本、大文本和UI组件
- 支持十六进制、RGB和HSL颜色格式输入，含可视化颜色选择器
- 即时通过/失败指示器，清晰显示每个WCAG等级的合规状态
- 实时文本预览，查看颜色组合的实际显示效果
- 可调预设文本大小，分别测试普通文本和大文本场景
- 颜色交换按钮，快速测试前景色和背景色互换后的效果
- 智能颜色建议，当组合不合规时推荐满足WCAG标准的颜色
- 支持Alpha透明度，测试覆盖层和半透明颜色组合
使用方法
- 1使用颜色选择器或十六进制输入框设置前景色（文字颜色）
- 2使用颜色选择器或十六进制输入框设置背景色
- 3查看中间显示的实时对比度比例
- 4检查WCAG合规性面板，查看普通文本、大文本和UI组件的AA/AAA通过/失败状态
- 5在预览区域查看实际文本效果，确认颜色组合的可读性
- 6如果组合不合规，点击推荐颜色查找无障碍替代方案
- 7使用交换按钮快速反转前景色和背景色，测试反向组合
- 8调整预设文本大小滑块，分别测试普通文本（小于18pt）和大文本（18pt及以上）场景
- 9复制对比度比例值，用于文档或无障碍报告
- 10测试网站、应用、演示文稿和印刷材料的颜色组合，确保无障碍合规
常见问题
什么是WCAG对比度比例？
WCAG对比度比例是衡量两种颜色之间亮度差异的数学计算。范围从1:1（无对比度，相同颜色）到21:1（最大对比度，黑白配色）。公式基于sRGB色彩空间的相对亮度。比例越高，视觉障碍用户的可读性越好。（参见：W3C WCAG 2.2）
WCAG AA和AAA标准是什么？
WCAG（Web内容无障碍指南）定义了两个合规级别：AA是大多数无障碍法律要求的最低标准，AAA是增强版金标准。普通文本AA要求4.5:1对比度，AAA要求7:1。大文本（18pt+或14pt+加粗）AA要求3:1，AAA要求4.5:1。UI组件和图形对象要求3:1的AA标准。部分政府和教育机构要求达到AAA。（参见：W3C WCAG 2.2）
什么算大文本？
WCAG将大文本定义为：1）18pt（约24px）或更大，或2）14pt（约18.66px）或更大的加粗文本。大文本的对比度要求较低，因为较大的字符即使对比度较低也更容易阅读。本工具允许您分别测试这两种场景。
对比度比例是如何计算的？
公式为：(L1 + 0.05) / (L2 + 0.05)，其中L1是较亮颜色的相对亮度，L2是较暗颜色的相对亮度。相对亮度通过将sRGB值转换为线性光值（使用伽马校正），然后应用加权系数（R: 0.2126, G: 0.7152, B: 0.0722）计算得出。
为什么颜色对比度对无障碍很重要？
全球约有3亿人患有色觉缺陷，超过20亿人有某种形式的视力障碍。适当的对比度确保文本和UI元素对低视力、色盲、年龄相关视力下降和情境性障碍（如强光）用户可读。它也通过提高可读性使普通视力用户受益。
颜色组合不通过WCAG意味着什么？
不通过WCAG意味着前景色和背景色之间的对比度太低，视觉障碍用户可能无法可靠阅读文本。工具会显示您的组合具体不通过哪些级别（AA普通文本、AA大文本、AAA普通文本、AAA大文本）。使用推荐颜色功能查找无障碍替代方案。
这个工具可以用于移动应用设计吗？
当然可以！WCAG对比度要求适用于所有数字内容，包括移动应用、网站、电子邮件和文档。相同的对比度比例可确保所有设备上的可读性。测试移动应用的文本颜色、按钮颜色和UI元素颜色，确保无障碍合规。
如何修复低对比度问题？
提高对比度的方法：1）加深前景色或提亮背景色，2）提亮前景色或加深背景色，3）使用推荐颜色功能查找合规替代方案，4）考虑使用纯色而非渐变或覆盖层，5）对于图片，添加半透明覆盖层确保文本可读性。
为什么我的颜色组合在 WCAG 检查中不通过？
失败大多来自三个原因之一：对比度低于对应字号要求的阈值（AA 标准下普通文本需 4.5:1、大文本需 3:1）；某个颜色带透明度，降低了有效对比度；或按错误的字号档位测试。先对照字号阈值查看比例读数，然后加深文字、提亮背景，或使用推荐颜色。渐变或照片上的文字不能用两个纯色测试，先采样实际颜色对再测。
支持哪些颜色格式？
工具支持多种颜色格式：十六进制（如#FF5733）、RGB（如rgb(255, 87, 51)）和HSL（如hsl(14, 100%, 60%)）。您也可以使用可视化颜色选择器直观地选择颜色。所有格式在内部转换为 sRGB 以准确计算对比度。
这个工具与专业软件相比准确吗？
本工具使用与专业无障碍测试工具（如axe、WAVE和Colour Contrast Analyser）完全相同的WCAG 2.1对比度公式。计算在数学上完全相同。唯一的区别可能在于颜色选择器的精度，但实际用途中结果等同于行业标准工具。
这个对比度检测有 Chrome 扩展版本吗？
没有，这是网页工具，无需安装，页面加载后断网也能用，覆盖大多数快速检查场景。如果你需要浏览器集成的工作流（在检查真实页面时测颜色），axe DevTools 或 WAVE 扩展可以在 Chrome 开发者工具中加入对比度检查并整页审计；而本页面是测试单个颜色组合最快的方式。
能检查图片/照片上文字的对比度吗？
不能直接检查：本工具比较两个纯色，而照片里有成千上万种颜色。正确做法：用吸管（浏览器开发者工具或任意图片编辑器）分别采样文字最深色区域和背景最杂的区域，把两个值粘回来测这一对。照片上的文字还有个常用修复：在文字底下加半透明遮罩，先在本地把遮罩色和文字色测过再应用。
能和 Figma 配合使用吗？
没有插件或实时联动，这是独立网页。在 Figma 里点击图层填充即可显示其 HEX 值，复制到这里测试这对颜色。如果想在 Figma 内部直接检查，社区插件如 Contrast 或 Stark 运行的是同一套 WCAG 计算，能就地比较两个颜色。
别的工具测出通过、这里显示不通过（或反过来），谁是对的？
WCAG 公式是固定的，只有临界值附近的组合才会出现分歧。常见原因：有的工具先把 HEX 四舍五入成 3 位简写再计算；有的合成 alpha 透明而有的忽略；有的按「大文本」（18pt 或 14pt 加粗，3:1）测，有的按普通文本（4.5:1）测。你的比值离阈值在 0.1 以内就算临界；与其争论工具，不如直接加深对比再测。
误把前景和背景两个颜色输反了，结果会变吗？
数学上不会：对比度比值是对称的（contrast(前景， 背景) 等于 contrast(背景， 前景)），因为公式总是用较亮的亮度除以较暗的。所以交换不影响结果，工具还提供了交换按钮可以验证。真正随交换改变的是设计本身：深底浅字与浅底深字的可读性和阴影渲染不同，但比值完全一样。