WCAG 2.1 AA级在A级基础上补足关键可操作性缺口：A级仅保障“能用”（如alt文本、label），AA级强制“好用”，要求错误提示精准关联字段、焦点顺序逻辑连贯、小字号文本对比度≥4.5:1（非肉眼判断）、焦点必须清晰可见且不依赖颜色，并覆盖图标/开关等非文本元素≥3:1对比度。
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然后不补替代样式，直接不合规。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别只写
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校验报告。否则每次上线前手动补，永远在还技术债。
