免费设计工具
颜色对比度检查器 - 检查文字和背景 WCAG 对比度
输入前景色和背景色，计算对比度并辅助判断文字可读性，适合网页设计、按钮、卡片、主题色和无障碍检查。
工具加载中...
快速答案
颜色对比度检查器可以计算文字颜色和背景颜色之间的对比度。
它适合检查按钮、链接、正文、深色模式和品牌配色的可读性。
适合输入
清晰输入
准备好要处理的前景色和背景色，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
检查方式
工具会根据颜色亮度计算对比度比例，并给出可读性参考。
对比度越高通常越容易阅读。
小字号需要更高对比度。
结果适合设计复核。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
检查白色文字放在绿色按钮上是否足够清晰。
假设
输入颜色代表实际页面中使用的前景和背景。
限制
对比度只是可读性的一部分，字号、字体、状态和环境也会影响体验。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
按钮设计
确认按钮文字清晰。
正文排版
检查长文本可读性。
主题色
验证品牌色搭配。
深色模式
检查暗色背景上的文字。
常见问题
什么是对比度？
它表示前景和背景亮度差异，常用于判断文字可读性。
支持 HEX 吗？
支持常见颜色格式，具体以页面输入为准。
结果等于无障碍合规吗？
不完全等于，还需要结合界面上下文检查。
会上传颜色吗？
不会。计算在浏览器中完成。
推荐流程
配色检查流程
先取色或转换颜色，再检查对比度。