颜色对比度检查
在线颜色对比度检查工具，支持前景色与背景色实时对比度计算、WCAG AA/AAA标准校验与配色建议，适用于网页无障碍设计、UI评审与品牌规范验收
前景色（文字颜色）
常用颜色
背景色
常用颜色
实时预览
示例标题
这是一段示例文本，用于观察当前配色在正文场景下的可读性表现。
链接文本预览
21.00:1
对比度比值
WCAG AA
WCAG AAA
颜色调整建议
点击任意建议即可直接应用到前景色。
亮化前景色
深化前景色
常见颜色组合
颜色对比度检查说明
颜色对比度直接影响阅读效率与无障碍体验。通过本工具，你可以快速验证色彩组合是否符合规范，并在设计与开发阶段提前规避可读性问题。
什么是颜色对比度
颜色对比度用于衡量前景内容与背景之间的明暗差异，通常使用 x:1 表示。比值越高，文本越清晰，弱视或复杂光线环境下的阅读体验也更稳定。
WCAG 标准要求
WCAG AA 级别
- 普通文本至少 4.5:1。
- 大文本（18pt 或 14pt 粗体）至少 3:1。
- 满足大多数网站和产品的基础可访问性要求。
WCAG AAA 级别
- 普通文本至少 7:1。
- 大文本至少 4.5:1。
- 适合高可读性要求的内容和场景。
对比度计算公式
对比度基于两种颜色的相对亮度计算，其中 L1 为较亮颜色亮度，L2 为较暗颜色亮度，亮度范围为 0 到 1。
(L1 + 0.05) / (L2 + 0.05)
实务建议
- 优先保证正文文字达到 AA 标准。
- 不要仅依赖颜色传达关键信息。
- 在浅色与深色背景中都进行可读性验证。
- 将对比度检查纳入设计评审与发布前验收流程。
应用场景
- 网页和后台系统的无障碍改造。
- 设计规范制定与品牌色系统验证。
- 组件库按钮、标签、输入框可读性检查。
- 活动页、海报图和运营素材上线前审阅。
隐私说明
本工具所有计算均在浏览器本地完成，不会上传你的颜色数据或设计内容。