免费在线工具,依据 WCAG 2.1 计算前景色与背景色的对比度,并判定 AA/AAA 等级是否通过。
适用场景
设计师和前端开发者需要确保文字与背景颜色的对比度符合无障碍标准,但手动计算复杂且容易出错。
使用步骤
- 1打开工具页面,默认显示前景色 #111827 和背景色 #ffffff。
- 2通过颜色选择器或输入十六进制色值(如 #RRGGBB)设置前景色和背景色。
- 3工具自动计算对比度并显示在预览区域,同时更新 AA/AAA 各等级的通过状态。
- 4如需交换前景色和背景色,点击“交换颜色”按钮。
- 5点击“复制结果”可将对比度结果复制到剪贴板。
输入与输出
输入:前景色和背景色的十六进制色值(支持 #RGB 或 #RRGGBB 格式)。输出:对比度比值(如 4.5:1)、AA/AAA 各等级通过/未通过状态,以及预览效果。
适用人群
网页设计师、前端开发人员和无障碍审计人员,用于确保颜色组合符合 WCAG 无障碍标准。
常见问题
- 支持哪些颜色格式?
- 支持十六进制格式,包括 #RGB 和 #RRGGBB,例如 #fff 或 #ffffff。
- 如何判断对比度是否通过?
- 工具根据 WCAG 2.1 标准自动判定:AA 普通文字需 ≥4.5:1,AA 大字需 ≥3:1,AAA 普通文字需 ≥7:1,AAA 大字需 ≥4.5:1。
- 可以交换前景色和背景色吗?
- 可以,点击“交换颜色”按钮即可快速互换。
- 复制结果会复制什么内容?
- 复制当前状态栏显示的对比度结果文本,例如“对比度 4.5:1 — AA普通:通过 / AA大字:通过 / AAA普通:未通过 / AAA大字:通过”。