WCAG 对比度标准详解 - AA/AAA 要求与计算方法

556 字
3 分钟
WCAG 对比度标准详解 - AA/AAA 要求与计算方法

🌟 WCAG 是什么#

WCAG(Web Content Accessibility Guidelines,网页内容无障碍指南) 是国际通用的无障碍标准。其中”对比度”要求,是设计/前端最容易落地、也最常被检查的一条。星点对比度检测按 WCAG 给出结果。


📏 对比度要求#

等级普通文本大字号文本
AA≥ 4.5:1≥ 3:1
AAA≥ 7:1≥ 4.5:1

大字号定义:约 18pt(24px)以上,或 14pt(约 18.66px)以上且加粗。


🧮 对比度怎么算#

对比度 = (L1 + 0.05) / (L2 + 0.05)

L1、L2 是两个颜色的相对亮度,按 sRGB 与 WCAG 公式计算:

  1. 每通道归一化后做 sRGB 反伽马:
    • 若 c ≤ 0.03928:c/12.92
    • 否则:((c + 0.055)/1.055)^2.4
  2. 加权:L = 0.2126·R + 0.7152·G + 0.0722·B

范围:1:1(同色)~ 21:1(黑白)。


🔍 达标实例#

组合对比度AA 普通文本
黑字白底21:1✅
白字深蓝底约 10:1✅
灰字白底 #999约 2.8:1❌
白字星点蓝底 #409eff约 2.78:1❌

可见”品牌色背景 + 白字”常常不达标。


💡 达标实践#

  • 正文优先深色字 + 浅背景;
  • 用工具”最佳文字色”功能直接取达标色;
  • 大字号标题可用 3:1,但正文必须 4.5:1;
  • 渐变背景要在最浅/最深处都检查;
  • 图形/图标也应有足够对比(非文本 3:1 参考)。

🧰 与其他无障碍项配合#

  • 色觉:不能只靠颜色区分,见色觉模拟;
  • 语义:文字/按钮有可读标签;
  • 可缩放:文字可放大到 200% 不丢内容。

🔧 常见问题#

AA 和 AAA 要选哪个? AA 是普遍要求;AAA 更严格,关键内容或高要求产品可追求。
对比度 4.5 是硬线吗? WCAG 以 4.5:1 为 AA 门槛;接近但略低仍应优化,别卡线。
能批量检测吗? 可以,[对比度检测](https://www.xingdian.net/app/color/contrast/)支持批量输入"前景 背景"。

💬 总结#

WCAG 对比度是可量化的无障碍标准:普通文本 AA 4.5:1 / AAA 7:1,大字号 AA 3:1 / AAA 4.5:1。用对比度检测逐组核对,是性价比最高的无障碍改进。

立即体验:访问 对比度检测

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

最后更新于 2026-09-13,距今已过 32 天

部分内容可能已过时

相关文章 智能推荐
1
颜色对比度检测 - WCAG 无障碍对比度怎么算(AA/AAA)
颜色工具 颜色对比度怎么算?本文解释 WCAG 对比度公式与 AA/AAA 标准(普通文本 4.5:1、大字号 3:1),给出正误示例、达标实践、批量检测与最佳文字色建议,并附在线对比度检测工具。
2
linear-gradient 怎么用 - 线性渐变语法与角度详解
颜色工具 CSS linear-gradient 怎么用?本文详解线性渐变语法:方向/角度、颜色停止点、多色渐变、透明渐变与常见写法,附可直接复制的代码。在线 CSS 渐变生成器一键出代码。
3
HEX 转 HSL 怎么转 - 颜色换算方法与示例
颜色工具 HEX 转 HSL 怎么算?本文解释 HSL(色相/饱和度/亮度)的含义、HEX 转 HSL 的步骤与示例,并说明 HSL 为什么适合调色。附在线颜色格式转换工具,一键互转。
4
图片主色怎么提取 - 主色调原理与获取方法
颜色工具 图片主色怎么提取?本文讲清"主色"的定义、中位切分与 k-means 聚类原理、主色与调色板的区别,以及在设计、网页、品牌还原中的应用。附在线图片主色提取工具,图片本地处理。
5
RGB 转 HSL 怎么算 - 色相/饱和度/亮度换算方法
颜色工具 RGB 转 HSL 怎么算?本文给出从 RGB 求色相 H、饱和度 S、亮度 L 的公式与完整示例,说明 HSL 在调色中的优势,并附常见颜色对照。在线颜色格式转换工具。
随机文章 随机推荐
公告
🎉 已升级 2.0 版本,欢迎使用。
分类
标签
站点统计
文章
197
分类
24
标签
747
总字数
334,099
运行时长
0 天
最后活动
0 天前

目录