颜色对比度检测

计算文字颜色与背景色的对比度,判定是否达到 WCAG AA、AAA 标准;不达标时推荐最接近的合格颜色。

功能特点

  • 按 WCAG 2.x 相对亮度公式计算对比度,精确到小数点后两位,边输入边更新
  • 一次同时判定正文 AA/AAA、大字号 AA/AAA,以及 UI 组件所需的 3:1
  • 用你输入的真实颜色预览正文、标题和按钮,难不难读一眼就能看出来
  • 不达标时只调整明度,推荐色相不变、最接近的合格颜色,点一下即可套用

适用场景

确定网站或 App 配色

保留品牌色的色相,只微调深浅,找到既好看又看得清的组合。

无障碍与适老化改造

快速确认页面文字是否满足 WCAG AA,方便老年人和视力不佳的用户阅读。

按钮、链接、图标配色

除了文字,还能同时看到边框、图标等非文本元素需要的 3:1。

设计评审时分享

把判定结果生成链接发给同事或开发,对方打开就是同一组配色。

隐私说明

颜色的解析和判定全部在浏览器本地完成,不会上传到服务器。只有在生成分享短链接时,分享链接(含所选颜色)才会发送给短链接服务。

常见问题

WCAG 的 AA 和 AAA 有什么区别?

AA 是大多数无障碍规范和采购要求采用的标准级别:正文对比度至少 4.5:1,大字号至少 3:1。AAA 要求更高:正文 7:1,大字号 4.5:1。实际工作中,一般先保证全站达到 AA,再在长篇正文等阅读量大的地方争取 AAA。

对比度是怎么计算的?

完全按照 WCAG 2.x 的定义:先求出两种颜色各自的相对亮度 L,再用 (L1 + 0.05) ÷ (L2 + 0.05) 计算(L1 为较亮的一方)。相对亮度的算法是:把 sRGB 各通道归一化到 0~1,小于等于 0.03928 时除以 12.92,否则取 ((c + 0.055) / 1.055) 的 2.4 次方,最后按 0.2126R + 0.7152G + 0.0722B 加权求和。对比度的范围是 1:1~21:1。

“大字号”是怎么定义的?

指 18pt(约 24px)及以上,或 14pt(约 18.66px)及以上的粗体。满足这一条件的文字,AA 放宽到 3:1,AAA 放宽到 4.5:1。不过汉字笔画多、结构密,即使达到了放宽后的标准,实际也可能不好认,所以正文最好按正常字号的标准来要求。

除了文字,其他元素也需要对比度吗?

需要。WCAG 2.1 成功标准 1.4.11“非文本对比度”要求:按钮边框、输入框轮廓、图标、图表元素等传达信息的图形和界面组件,与相邻颜色的对比度至少为 3:1。本工具会根据同一组颜色同时给出 3:1 的判定结果。

相关工具

选择颜色

支持 #aabbcc、#abc、rgb(0,0,0)、hsl(210,50%,40%) 等写法

对比度

对比度
- : 1

WCAG 判定

效果预览

大字号指 18pt(约 24px)及以上,或 14pt(约 18.66px)及以上的粗体。

修改建议