颜色对比度检查
颜色对比度检查
输入文字色与背景色,实时计算 WCAG AA / AAA 对比度。
通过对比度不代表所有字号、字重和情境都自动无障碍
前景与背景
两种颜色,先看清再使用
对比度按 WCAG 相对亮度公式实时计算。
对比度结果
14.25:1这段文字用来检查正文是否容易阅读。Aa 你好 123
普通文字 AA通过 · ≥ 4.5
大号文字 AA通过 · ≥ 3.0
普通文字 AAA通过 · ≥ 7.0
方法与边界
对比度比较的是相对亮度,不是色相相差多远
两种颜色会先转换为线性 RGB,再计算相对亮度。较亮色与较暗色的亮度差被转换成 1:1 到 21:1 的比值。
普通正文达到 4.5:1 才满足 AA;大号文字可使用 3:1。颜色只是可读性的一部分,还要考虑字号、字重、行距与实际显示环境。
对比度 =(较亮颜色相对亮度 + 0.05)÷(较暗颜色相对亮度 + 0.05)。
常见问题
颜色对比度检查 · 常见问题
AA 和 AAA 有什么区别?
AAA 阈值更高。普通文字 AA 至少 4.5:1,AAA 至少 7:1;大号文字分别为 3:1 和 4.5:1。
什么算大号文字?
通常指至少 24px 的常规文字,或至少约 18.66px 的粗体文字;实际产品还应结合字体和平台验证。
为什么红绿看起来差很多却可能不通过?
不同色相不一定有足够的明度差。对色觉不同的用户,仅靠色相也可能无法区分,因此状态还应配合文字或图形。