用途:在交付需满足 WCAG 2.2 合规的前端功能时,提供对比度测量、动效处理和用户偏好媒体特性的操作参考。不覆盖焦点/键盘机制、ARIA 角色、调色板生成与 INP 性能测量。
主要能力:
- 对比度判定:正文常规文本 AA 需 4.5:1、大文本(18pt 或 14pt 粗体)3:1;AAA 分别为 7:1 与 4.5:1;非文本(UI 组件边界、图形对象)AA 需 3:1;焦点外观 AAA 需 3:1。须在渲染后的前景-背景配对上测量,勿信声明令牌。APCA 仅供信息参考,合规仍引用 WCAG 2.x 亮度比。
- 动效策略:非必要动效交付前先检查 @media (prefers-reduced-motion: reduce);装饰性动画放入 no-preference 分支;功能性状态提示在 reduce 下改用透明度/颜色交叉淡化而非完全移除;startViewTransition 需在 reduce 时跳过或禁用动画;GSAP/Framer Motion 等应读取 matchMedia 并监听变更。
- 目标尺寸:交互目标至少 24×24 CSS 像素(SC 2.5.8),或满足间距、等效、行内、UA、必要五类例外之一。
- 拖拽替代:使用拖拽的交互须提供单指针替代(SC 2.5.7)。
- 无障碍认证:允许密码字段粘贴并支持 autocomplete=current-password(SC 3.3.8)。
- 用户偏好:@media (forced-colors: active) 下使用系统颜色关键字并显式加边框(box-shadow 会被强制为 none);prefers-contrast: more/less/custom 切换高/低对比令牌;prefers-reduced-transparency: reduce 关闭 backdrop-filter(该特性截至 2026-05-19 支持有限,仍建议预留)。
使用方式:按决策树选择适用标准,采用文中给出的 CSS/JS 模式(如动画出入偏好分支、调色板换用、系统颜色边框、内边距扩展命中区、scroll-padding 处理焦点遮挡、可访问登录表单等),并在 Windows 高对比度模式下实测。
适用场景:前端组件与界面在动效、对比度、目标尺寸和无障碍登录流程上的 WCAG 2.2 合规实现与审查。
限制:APCA 与 WCAG 3 尚未成为约束性标准,截至 2026-05-19 WCAG 3 仍为工作草案,审计与合同应引用 2.x 比率;prefers-reduced-transparency 可用性有限。具体价格与授权信息暂未提供。