颜色对比度
按 WCAG 计算两色对比度并评级。
核心结论
- 用途：「颜色对比度」属于「设计配色」分类，用于按 WCAG 计算两色对比度并评级。
- 输入：需要填写 2 项——颜色1、颜色2。
- 运行方式：全部计算在浏览器本地完成，输入内容不上传服务器；永久免费，无需注册或安装。
- 结果口径：屏幕与印刷的色域不同，颜色必然存在差异；无障碍对比度建议结合最终字号与字重复核。
温馨提示：本工具结果基于公开数据与算法，仅供参考，不构成专业意见。涉及隐私的查询均在本地完成，不会上传。
什么是颜色对比度
可用于按 WCAG 计算两色对比度并评级。页面共 2 项输入，填写「颜色1」、「颜色2」后即可得出结果。换算与设计软件、主流前端框架一致，取色后可直接写进样式。无障碍对比度请结合最终字号与字重复核。
如何使用颜色对比度
- 在「颜色1」中填写对应数值
- 在「颜色2」中填写对应数值
- 点击「查询」按钮
- 在下方的「结果」区域查看颜色对比度的结果
颜色对比度与同类工具对比
| 工具 | 用途说明 | 适用关键词 |
|---|---|---|
| 颜色对比度（本工具） | 按WCAG计算两色对比度并评级。 | 对比度,WCAG |
| 对比度(WCAG) | 计算两色对比度。 | 对比度,无障碍 |
| 相对亮度 | 计算颜色的相对亮度。 | 亮度,WCAG |
| 对比度检测（WCAG） | 计算两色对比度，并判断是否满足WCAGAA/AAA标准。 | 对比度,wcag,可访问性 |
| 颜色对比度检测 | 计算前景色与背景色的WCAG对比度比值，判断是否达到AA/AAA无障碍标准。 | 对比度,wcag,无障碍,配色检测,可读性 |
| 行差异 | 列出仅在A中出现的行。 | 差异,对比 |
常见问题
结果准确吗？
本工具在浏览器本地完成计算/生成，不上传任何数据；结果基于标准算法或内置数据，仅供参考。
我的输入会被上传吗？
不会。所有数据仅在您本地浏览器中处理，不会发送到任何服务器，可放心使用。