对比度实时计算
输入前景色和背景色后，立即计算 WCAG 对比度和 AA/AAA 通过情况。
可读性预览
同页展示文字预览，方便直接判断当前配色在界面里是否清晰。
浏览器本地处理
颜色检测在浏览器本地完成，不上传服务器，适合检查内部设计稿和样式草案。
WCAG 对比度 · 浏览器本地计算
检测前景色和背景色可读性
计算颜色对比度、AA/AAA 等级和展示预览。颜色值只在浏览器本地处理，不会上传服务器。
对比度
17.74:1
可读性等级
AAA
建议
正文可用
示例文字 Preview Text
这是前景色和背景色组合后的可读性预览。
工具使用说明
怎么用 颜色对比度检测工具
输入两组颜色
填写前景色和背景色，可以使用常见 HEX 或颜色选择器。
查看 WCAG 结果
页面会同步显示对比度数值、普通文字和大号文字的 AA/AAA 判断。
按预览调整配色
如果未通过标准，可以继续调整颜色，直到达到可读性要求。
功能说明
这个工具解决什么问题
颜色对比度检测工具 适合什么场景
它适合检查按钮、正文、标签、卡片等界面元素的文字颜色是否足够清晰。
检测逻辑在浏览器本地完成，不需要上传设计稿或页面数据。
为什么要同时看数值和预览
WCAG 数值能给出标准判断，预览能帮助你快速判断实际阅读感受。
两者放在同一页，可以减少在设计工具和检测工具之间反复切换。
常见问题
关于 颜色对比度检测工具，用户常问这些
颜色对比度检测工具 适合做正式测算吗？
适合。它按 WCAG 对比度公式做本地计算，可用于前端配色和设计稿复核。
结果是实时更新的吗？
是。前景色或背景色变化后，对比度和等级会同步更新。
计算过程会上传数据吗？
不会。默认按浏览器本地计算设计。
AA 和 AAA 有什么区别？
AAA 标准更严格，AA 是多数网页可访问性场景的常见合规目标。