使用方法
- 输入文本（前景）颜色和背景颜色，支持 HEX、rgb()、hsl() 或其他 CSS 格式，也可以使用取色器。
- 查看对比度，以及每项 WCAG 要求是否通过。
- 如果未达到某项要求，请选择目标并应用建议的颜色。该颜色会保留色相，只调整明度。
- 使用“交换”检查反向配色，例如深色按钮上的浅色文字。
工作原理
对比度比值遵循 WCAG 2.2 的定义：根据每种颜色的 sRGB 通道计算相对亮度，比值为（较亮颜色 + 0.05）÷（较暗颜色 + 0.05）。比值范围为 1:1（颜色相同）至 21:1（黑底白字）。
检查的要求：成功准则 1.4.3（AA）要求普通文本达到 4.5:1，大号文本达到 3:1；1.4.6（AAA）分别要求 7:1 和 4.5:1；1.4.11 要求用户界面组件和有意义的图形（例如输入框边框和图标）达到 3:1。大号文本指常规字重至少 24px，或粗体约 18.66px。WCAG 不允许向上取整，因此即使 4.49:1 已经很接近，仍不符合 AA；此处显示的比值经过截断，并非四舍五入。
建议颜色会在 OKLCH 中保留文本颜色的色相和色度，并搜索满足目标的最近亮度值，无论是调暗还是调亮。对比度只是可读性的一个方面：字体粗细、字号和色觉差异也会产生影响。WCAG 2.2 是当前的 W3C 建议，大多数无障碍法律都以此为依据。
示例
差一点才达标的灰色文本
白色背景上的 #777777 文本对比度为 4.48:1。它符合大号文本和 UI 组件的要求，但不符合 AA 普通文本的要求。最接近且符合要求的灰色约为 #767676，对比度为 4.54:1。
品牌按钮上的白色文本
#ff8800 背景上的白色文本对比度约为 2.4:1，连大号文本要求的 3:1 都达不到。通常的解决方法是加深橙色，或改用深色文本；建议会显示文本颜色需要加深到什么程度。
检查表单字段边框
白色背景上的浅灰色边框 #cccccc 对比度约为 1.6:1。根据准则 1.4.11，用于标识输入框的边框需要达到 3:1，因此需要使用 #949494 左右或更深的颜色。
常见问题
WCAG AA 要求的对比度是多少？
普通正文文本需要达到 4.5:1，大号文本（24px，或 18.66px 粗体）和 UI 组件及有意义的图形需要达到 3:1。AAA 要求文本达到 7:1，大号文本达到 4.5:1。
徽标文字或已禁用按钮的文字也需要达标吗？
不需要。WCAG 豁免徽标和品牌名称中的文本、纯装饰性文本，以及非活动（已禁用）用户界面组件中的文本。
为什么我的结果和其他检查工具略有不同？
有些工具会将比值四舍五入到一位小数，或向上取整。WCAG 会比较精确值，因此此工具会将比值截断到两位小数。输入带透明度的颜色也可能造成微小差异。
新的 APCA 对比度方法是什么？
APCA 是一种为未来版本 WCAG 提出的不同方法。它不属于 WCAG 2.2，而本工具测量的是 WCAG 2.2，也是当前无障碍规范所参考的标准。
隐私
颜色在浏览器中检测，不会上传或存储。