WCAG 2.1 A级与AA级合规标准解析

WCAG 2.1 AA级并非A级的简单叠加，而是直击可访问性的核心痛点——从“能用”跃升至“好用”：它强制要求精准的错误定位、逻辑连贯的键盘焦点流、严苛的文本与非文本元素对比度（小字号≥4.5:1、图标/开关≥3:1）、不依赖颜色的清晰焦点指示，以及面向色觉障碍用户的多重感知设计；真正挑战在于将这些硬性标准无缝融入日常开发流程——靠肉眼判断对比度、忽略SVG图标或开关状态的可辨识性、禁用:focus-visible却无降级方案，都是高频翻车点；想真正达标，必须让自动化检测（如axe、WebAIM）、组件级语义保障和设计-开发协同校验成为标配，而非上线前疲于补救的技术债。

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校验报告。否则每次上线前手动补，永远在还技术债。

以上就是《WCAG 2.1 A级与AA级合规标准解析》的详细内容，更多关于的资料请关注golang学习网公众号！