16.65:1
AA 通过AA(大) 通过AAA 通过
敏捷的棕色狐狸跳过了懒狗。
AaBbCcDdEeFf 0123456789 - 此颜色组合的文本预览。
功能说明
计算前景色与背景色之间的 WCAG 2.2 对比度比值,并对照无障碍阈值做出判定:正文 AA(≥ 4.5:1)、大号文字 AA large(≥ 3:1)以及 AAA(≥ 7:1)。数学部分是真正的相对亮度公式——每条 sRGB 通道先做线性化,再以 WCAG 系数合并,比值为 (lighter + 0.05) / (darker + 0.05)。
它接受 #rgb 和 #rrggbb 十六进制颜色(大小写不敏感,带不带前导 # 均可),同时显示三个阈值各自的通过/未通过徽章,并渲染一个实时预览面板——用你选定的颜色对绘制一句全字母句和一行字符/数字。100% 客户端运行。
使用方法
- 设置前景色:点击色块打开颜色选择器,或在文本框中输入十六进制值。
- 用同样的方式设置背景色。工具初始状态是
#e9e9f1叠在#07070b上——这是经过设计、直接通过 AAA 的一对。 - 点击交换互换两个颜色——便于同时检查主题的深底浅字与浅底深字两个方向。
- 阅读结果:比值(保留两位小数)加上 AA、AA large、AAA 三枚徽章,各为绿色(通过)或红色(未通过)。
- 查看下方的预览块——用所选颜色对渲染的文字——用自己的眼睛做判断。
- 任何一个值不是合法的十六进制颜色时,工具会显示错误并隐藏结果,直到你修正为止。
示例
由运行 src/lib/color.ts 中的 contrastRatio()(工具使用的同一个函数)验证:
#e9e9f1 on #07070b 16.65:1 AA pass · AA large pass · AAA pass (tool defaults)
#ffffff on #000000 21.00:1 AA pass · AA large pass · AAA pass (the maximum)
#f8fafc on #1e293b 13.98:1 AA pass · AA large pass · AAA pass
#abc on #000000 10.69:1 AA pass · AA large pass · AAA pass (3-digit shorthand works)
#767676 on #ffffff 4.54:1 AA pass · AAA fail (the classic "just barely AA" gray)
#777777 on #ffffff 4.48:1 AA fail · AA large pass (one notch darker fails AA)
#3b82f6 on #ffffff 3.68:1 AA fail · AA large pass (Tailwind blue-500 on white)
#767676 与 #777777 这一对说明了为什么精确的数学胜过目测:1 个十六进制单位的差异就越过了 4.5:1 的 AA 线。