颜色对比度检查器
检查前景/背景颜色组合是否符合 WCAG 2.1 AA 和 AAA 无障碍标准。
普通文本
大号字体（18磅/14磅加粗）
The quick brown fox jumps over the lazy dog.
对比度
17.40:1
为什么要使用 PixConvert 对比度检查器
一个工具即可完成 WCAG 合规性检查——选择颜色，立即查看结果。
符合 WCAG 2.1 标准
检查所有相关的 WCAG 2.1 成功标准：AA 普通、AA 大、AAA 普通、AAA 大和 UI 组件。
实时预览
请查看在正常尺寸、大尺寸和 UI 组件尺寸下，实际背景颜色上的文本渲染效果。
颜色选择器
浏览器原生颜色选择器，外加十六进制输入，实现精确颜色选择。
精确比例
显示精确到小数点后两位的对比度（例如 4.53:1），以便记录。
交换颜色
一键交换前景和背景，即可立即查看两种组合。
100% 私密
完全基于 WCAG 公式，在您的浏览器中计算。无需服务器，不进行任何追踪。
何时检查颜色对比度
在许多司法管辖区，无障碍设施是法律要求。请尽早确认。
设计评审
在将 Figma 设计稿移交给工程部门之前，请确认其中的颜色选择符合 WCAG 要求。
- 检查主按钮颜色
- 核对品牌背景上的文字
- 测试占位符文本可读性
无障碍审核
作为法律或质量审查的一部分，审核现有用户界面是否符合 WCAG 2.1 AA 标准。
- 识别失效的颜色对
- 文档对比度
- 按严重程度确定修复优先级
设计系统
发布前，请验证调色板中的每个元素是否符合可访问性要求。
- 验证颜色标记对
- 构建易于访问的主题变体
- 符合文件要求的组合
如何检查颜色对比度
使用颜色选择器或十六进制输入选择文本颜色（前景色）和背景颜色。
对比度和 WCAG 通过/失败结果会立即更新。使用 Swap 功能可以检查相反的组合。
查看 AA 和 AAA 合规等级的结果——所有计算均遵循官方 WCAG 2.1 公式，并完全在您的浏览器中运行。
常见问题解答
色彩对比度和可视性解析。
WCAG对比度要求是什么？
WCAG 2.1 AA 级要求：普通文本的宽高比为 4.5:1，大号文本（18 磅以上或 14 磅以上粗体）的宽高比为 3:1，UI 组件和图形对象的宽高比也为 3:1。AAA 级要求：普通文本的宽高比为 7:1，大号文本的宽高比为 4.5:1。
对比度是如何计算的？
对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮颜色的相对亮度，L2 为较暗颜色的相对亮度。亮度值根据线性化的 sRGB 值，使用 WCAG 2.1 公式计算得出。
什么才算“大字”？
WCAG 将大号文本定义为 18 磅（24 像素）或更大，或者加粗时为 14 磅（约 18.67 像素）或更大。由于大号文本本身更易于阅读，因此其对比度要求更为宽松（3:1 而不是 4.5:1）。
我需要达到AAA级标准吗？
WCAG AA 级是大多数司法管辖区（例如美国的 ADA 和欧盟的 EN 301 549）的标准法律要求。AAA 级是更高阶的目标——最低目标是 AA 级，关键内容应尽可能达到 AAA 级。
这种方法适用于图像和渐变吗？
此工具会检查纯色对。对于图像或渐变背景上的文本，您必须评估最差情况下的背景颜色（深色文本的背景色为文本后方最亮的点，浅色文本的背景色为文本后方最暗的点）。WCAG 并不要求图像背景必须通过对比度测试——这只是一个最佳实践。