如何使用颜色对比度检查工具

先了解输入与检查范围

这款对比度检查工具用于比较前景色与背景色，并根据四个阈值返回通过或未通过的评估。它适合在设计页面文字、按钮或其他前景元素时，先检查一组颜色的对比度表现。输入可以使用三位或六位十六进制颜色，也可以使用包含三个逗号分隔数字分量的 RGB 形式。

检查一组前景色和背景色

1. 在前景色输入中填写颜色，在背景色输入中填写另一种颜色。两个输入都可以留空；留空时，前景色使用黑色 #000000，背景色使用白色 #ffffff。
2. 输入十六进制颜色时，使用以 # 开头的三位或六位形式，例如 #369 或 #336699。也可以输入以 rgb 开头、包含三个逗号分隔十进制数字分量的 RGB 形式。
3. 提交检查。颜色文本两端的空白会被去除，字母会先转换为小写后再解析，因此可以先清理明显的前后空格，再进行检查。
4. 查看结果中的对比度比值和阈值评估。结果会把比值四舍五入到小数点后两位，并分别评估普通文本的 4.5 和 7.0 阈值，以及大号文本的 3.0 和 4.5 阈值。

如何理解结果与边界

先看对比度比值，再看四项通过或未通过评估。比值经过小数点后两位的四舍五入后用于这些阈值评估；普通文本对应 4.5 和 7.0，大号文本对应 3.0 和 4.5。两种颜色相同时，比值为 1.0，因此不能据此判断文字与背景具有足够区分度。

如果任一颜色无法解析，结果仍会成功返回，但会包含错误提示，不会生成正常的对比度评估。此时应检查是否使用了受支持的颜色形式，而不要把这种情况理解为一次失败执行。通过这些阈值只能了解这组颜色在工具所检查项目中的结果，不能将其当作对整个设计或无障碍表现的完整评估。

使用示例

设计人员正在检查白色背景上的灰色文字，想先了解这组前景色和背景色的对比度结果。

在前景色中输入 #767676，在背景色中输入 #ffffff，提交检查，然后查看比值和四项评估。

结果会包含一个四舍五入到小数点后两位的对比度比值，以及普通文本和大号文本对应的四项通过或未通过评估。

使用限制

• 工具只报告已定义阈值的颜色对比度评估；无法解析的颜色不会生成正常评估，这些结果不能代表对整个设计的完整无障碍检查。

常见错误

• 错误原因：输入了不受支持的颜色写法，例如没有以 # 开头的其他十六进制形式或不符合要求的颜色文本。改正方法：改用三位或六位十六进制形式，或使用包含三个逗号分隔数字分量的 rgb 形式；若仍无法解析，请分别检查前景色和背景色。

常见问题

支持哪些颜色格式？

可以，但只支持以 # 开头的三位或六位十六进制颜色文本，以及以 rgb 开头、含三个逗号分隔数字分量的 RGB 形式。其他 CSS 颜色写法不在已确认的支持范围内。

不填写颜色时会使用什么值？

可以。前景色和背景色输入都是可选的；两者留空时，前景色默认为 #000000，背景色默认为 #ffffff。

颜色格式错误时会发生什么？

如果任一颜色无法解析，结果仍会成功返回错误提示，但不会出现正常的对比度评估。请先检查颜色格式，再重新提交。