WCAG对比度检测中AA与AAA等级含义及评分对应规则

AA、AAA等级核心定义 #

WCAG即Web内容无障碍指南，设置A、AA、AAA三个递进级别的无障碍合规要求，高等级要求覆盖低等级要求的适配范围，针对对比度项的具体阈值按检测对象的属性差异化设置，不存在全场景统一的评级数值线：

• AA等级：网页无障碍的通用基线要求，为普通用户、轻度视力障碍用户提供基础可读保障，是全球多数地区公共网站、商业网站的强制合规标准
• AAA等级：最高级无障碍适配要求，可覆盖重度视力障碍用户的可读需求，无全站强制适配要求，仅面向核心公共信息文本推荐适配

对比度评级对应规则 #

WCAG对比度计算公式为(L1 + 0.05) / (L2 + 0.05)，其中L1为较亮颜色的相对亮度，L2为较暗颜色的相对亮度，计算结果范围为1:1（同色无对比）到21:1（纯黑配纯白最高对比），所有等级要求均为最低阈值，达到阈值即满足对应等级，阈值按检测对象分三类设置：

• 普通正文（常规字重下字号<18pt/24px，或粗体字重下字号<14pt/18.66px）
  • AA等级最低要求：对比度≥4.5:1
  • AAA等级最低要求：对比度≥7:1
• 大尺寸文本（常规字重下字号≥18pt/24px，或粗体字重下字号≥14pt/18.66px）
  • AA等级最低要求：对比度≥3:1
  • AAA等级最低要求：对比度≥4.5:1
• UI交互组件、装饰性非信息类文本
  • 仅设AA等级要求：对比度≥3:1，无AAA评级标准

检测评级差异原因 #

你观察到的数值与评级不匹配现象是工具按检测对象属性匹配对应阈值导致的，不属于检测错误：

• 评分为5.5:1且拿到AAA等级的检测对象为大尺寸文本，该场景下AAA阈值为4.5:1，5.5:1已超过阈值要求，因此判定为AAA级
• 得分接近7:1但仅拿到AA等级的检测对象为普通尺寸正文，该场景下AAA阈值为7:1，得分未达AAA最低线，仅满足普通正文≥4.5:1的AA要求，因此判定为AA级

提示：Firefox内置Web Developer工具的对比度检测会自动识别检测目标的字号、字重、元素类型，自动匹配对应场景的阈值判定等级，不会用普通正文的7:1阈值统一衡量所有页面元素。

内容的提问来源于stack exchange，提问作者Bytech