正在准备工作区…
输入
正在准备工作区…
输出
结果将显示在这里。
使用方法
- 输入不透明的文本颜色与背景颜色。
- 查看预览、对比度和各项通过情况。
- 调整颜色或使用“交换颜色”，确认后复制对比度。
理解对比度结果
前景色在一种背景上可能清晰，在另一种背景上却难以辨认。此工具比较两种颜色，并分别检查普通文本、大文本和界面图形的要求。
预览提供视觉参考，通过与否依据计算出的对比度判断。仍需在最终界面中评估字号、字重及周围设计。
理解对比度
先将 sRGB 通道线性化，计算相对亮度。对比度等于较亮颜色的亮度加 0.05，再除以较暗颜色的亮度加 0.05。
黑字白底示例的对比度为 21:1。交换前景色和背景色不会改变比值，但会改变视觉效果。
输入
#000000 on #ffffff结果
21.00:1 · AA and AAA pass黑字白底达到 WCAG 对比度最大值 21:1。
阈值与舍入
普通文本 AA 和 AAA 阈值分别为 4.5:1 和 7:1；大文本分别为 3:1 和 4.5:1。适用的界面图形检查阈值为 3:1。
显示值保留两位小数，但通过与否使用未舍入的数值判断。不接受透明颜色，因为最终颜色取决于下方背景。
检查最终界面
结合实际字号、字重和组件状态使用对比度结果。配色通过检查，并不代表已评估焦点可见性、键盘操作、有效标签或页面其他部分。
处理限制
文本输入最大 1 MiB。CSS 和 HTML 转换在工作线程中运行，限时 30 秒。颜色工具使用 sRGB；生成的样式仅供预览，需要在您的布局中测试。
延伸阅读W3C · WCAG 对比度指南
?
常见问题
为什么显示的对比度达到阈值，却仍未通过？
两位小数的显示值可能向上舍入。判断使用完整计算值，因此略低于阈值的数值仍不会通过。
可以输入透明颜色吗？
不可以。请先将颜色与相关背景合成，再输入最终的不透明颜色。
交换颜色会改变对比度吗？
不会。亮度比值是对称的。“交换颜色”仅改变预览，便于比较两种视觉效果。
达到 AA 代表整页都无障碍吗？
不代表。工具仅按显示的阈值检查当前配色。适用的文本或组件标准，以及其他无障碍要求，仍需分别审查。
可以保存对比度结果吗？
使用“复制”复制显示的对比度。工具不会生成无障碍报告，也不会为页面提供认证。