开发工具 125文本工具 40编码加密 40图片文件 66查询工具 46计算转换 57站长工具 57生活工具 55娱乐工具 39金融理财 45
首页/开发工具/颜色对比度检测

颜色对比度检测

输入文字色和背景色,算出 WCAG 对比度比值并逐条判断是否达到 AA / AAA 标准(正文 4.5:1、大字 3:1、AAA 7:1),同时给出「保持色相、只调亮度」的达标改法。做无障碍适配、检查设计稿可读性时用得上。

本地运行 · 数据不上传 开发工具 免费 · 无需注册
第一行文字色、第二行背景色
对比度报告

使用说明

  1. 第一行填文字颜色,第二行填背景颜色,点「检测对比度」。
  2. 结果里会分别给出 AA 正文、AA 大字、AAA 正文、AAA 大字的达标情况。
  3. 如果没达标,结果下方会给出保持色相、只调明度的具体改法与对应比值。

常见问题

为什么 4.5:1 是正文的底线?
这是 WCAG 2.1 里 AA 级的要求。这个数字来自对视力障碍用户(低视力、色觉异常)的实际测试:低于它,相当一部分人在正常亮度下阅读会明显吃力。它不是审美标准,是可访问性的门槛。
大字的标准为什么更宽松?
因为字越大,笔画越粗,同样的对比度下辨认难度越低。WCAG 里「大字」指 18.66px(14pt)以上,或 14px 加粗。
图标和边框也要看对比度吗?
要。WCAG 2.1 新增了「非文本对比度」要求,界面元素和图标与相邻颜色的对比度至少要到 3:1,否则识别困难。本工具会一并给出这一项判定。

相关工具

开发工具 · 该分类共 125 个工具,展开查看全部