跳到主要内容
首页工具图片与设计颜色对比度检测

颜色对比度检测

浏览器本地处理

计算文字与背景颜色的对比度,按 WCAG 2.1 判断 AA、AAA 与大号文字标准,并给出替代颜色。

文件不上传 无需注册 单文件 ≤ 1 MB
工作区 就绪
按 WCAG 2.1 计算对比度
正文文本需要达到 4.5:1(AA)或 7:1(AAA);18pt 以上的大号文字与界面图标需要达到 3:1。浅灰字放在白底上是最常见的不达标情况。
对比度结果
16.63:1
对比度
AA 正文 4.5:1通过
AAA 正文 7:1通过
AA 大字 3:1通过
AAA 大字 4.5:1通过

示例标题文字 22px

这是一段 14px 正文示例。多数正文使用这个字号,因此应以 AA 正文标准作为判断依据。

辅助说明文字 12px,用于标注与补充信息。

在这个背景上推荐使用的文字颜色
#111111,对比度 16.63:1

对比度按 WCAG 相对亮度公式计算,不考虑透明度叠加、渐变背景与图片背景。

使用说明

01

选择文字与背景颜色

02

查看对比度数值

03

确认 AA 与 AAA 是否达标

适用范围与限制

  • 不计算透明度叠加、渐变与图片背景
  • 不评估色觉障碍用户的辨识度

常见问题

4.5:1 是什么标准?

WCAG 2.1 对正文文本的 AA 级要求。大号文字(18pt 以上或 14pt 加粗)可放宽到 3:1,AAA 级正文要求 7:1。

对比度达标就一定好看吗?

不一定。对比度只保证可读性,配色还需要考虑信息层级、品牌调性与色觉障碍用户的辨识体验。

文件会被上传吗?

不会。此工具在浏览器内完成处理,文件不会发送到服务器。关闭页面后,文件与结果都不会保留。

需要注册或登录吗?

不需要。核心工具无需账号即可使用;收藏与最近使用仅保存在浏览器本地。

处理失败时怎么办?

先核对文件格式、大小与是否加密。若仍失败,请通过页面底部反馈入口提交问题描述,不要附带包含敏感信息的原文件。

下一步

完成当前任务后可能用到
颜色对比度检测 — WCAG AA 与 AAA 无障碍检查 · 馍琳 Molin