WCAG2.1A级与AA级标准详解

WCAG 2.1 A级与AA级的核心差异并非条目数量的增减，而是从“能用”到“好用”的质变跃升：A级仅确保基础可访问性（如alt文本、label标签），而AA级直击真实使用痛点，强制要求精准的错误定位、逻辑清晰的键盘焦点流、严苛的色彩对比度（小字号文本≥4.5:1、非文本元素≥3:1，且必须用官方公式计算而非肉眼判断）、不依赖颜色的持久焦点指示，以及图标、开关、图表等常被忽视组件的可感知性设计；真正卡住项目落地的往往是对比度校验和:focus-visible实现细节——别再凭感觉调色或禁用outline后放任不管，把WCAG约束嵌入CI流程、组件库规范和设计交付标准，才能让无障碍从合规负担变为产品本能。

WCAG 2.1 A级和AA级到底差在哪

不是“多做几条”，而是AA级在A级基础上补上了最关键的可操作性缺口。A级只解决“能用”，比如给图片加alt、给表单控件加label；AA级则强制要求“好用”，比如错误提示必须关联到具体字段、焦点顺序必须逻辑连贯、文本对比度必须达标。很多项目卡在AA级，其实就卡在color contrast和focus visible这两项上。

小字号文本对比度必须≥4.5:1（AA级硬性门槛）

别信“看着挺清楚”。14px常规字体、16px未加粗字体都算“小文本”，必须满足≥4.5:1。这个值不是RGB相减，得用WCAG官方公式：(L1 + 0.05) / (L2 + 0.05)，其中L1是亮色相对亮度，L2是暗色相对亮度——需先将sRGB转线性光再计算。肉眼判断误差常达2:1以上，尤其在LCD屏、阳光直射或轻度视力下降场景下。

• 工具推荐：用浏览器插件axe DevTools或在线检测器WebAIM Contrast Checker实测，别靠设计稿标色值
• 常见翻车点：按钮文字用#666配#fff背景，实际只有3.8:1；禁用态图标用#999配灰色背景，直接跌破3:1
• 大文本（≥18pt 或 ≥14pt 加粗）可放宽到≥3:1，但注意：加粗判定看font-weight是否≥600，不是CSS里写了bold就算

焦点可见性（:focus-visible）不是可选项

A级只要求键盘可操作，AA级明确要求焦点必须有清晰、持久、不依赖颜色的视觉指示。纯靠outline: none然后不补替代样式，直接不合规。

• 别只写outline: 2px solid #007bff——色盲用户可能分辨不出蓝框，建议叠加outline-offset或box-shadow增强轮廓感
• 优先用:focus-visible而非:focus，避免鼠标用户看到突兀焦点环；但得配focus-ring降级方案（如@supports not selector(:focus-visible)）
• 自定义组件（如var-button、ib-animatable）要确保内部tabindex元素也透出焦点样式，不能被overflow: hidden截断

图形界面组件的对比度常被忽略

图标、开关滑块、进度条、状态指示器这些非文本元素，AA级也要求≥3:1（前景与背景）。很多人只盯着文字，结果一个svg图标的描边用了#ccc，背景是#eee，实测才1.8:1，完全不合格。

• SVG内联图标建议用currentcolor继承文字色，统一走文本对比度逻辑
• 开关（toggle）的“开启”状态如果仅靠绿色标识，必须同步加图标（✓）或文字（“开”），否则色觉障碍用户无法识别
• 图表类组件若用颜色区分数据系列，每种颜色必须配独立纹理/图案/标签，不能只靠色相差异

真正难的不是知道标准，而是把对比度、焦点、语义结构这些约束自然嵌进日常开发流里——比如CI流程中加pa11y扫描，组件库默认启用data-testid和aria-* 属性，设计师交付切图时附带WCAG校验报告。否则每次上线前手动补，永远在还技术债。

今天关于《WCAG2.1A级与AA级标准详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！