# 视觉可访问性判据（WCAG 阈值 + 栅格 + 触控目标）

> a05 方法论层 · 跨学科通用、几乎不过时。从 db05 各设计卡上抽的**纯阈值类**判据集中一处维护。
> 范式专属的 a11y 判断（玻璃拟态可读性、新拟物硬伤）仍留在 db05 对应卡的 implementation_notes——
> 那是范式库的自包含价值，本文件只收"对任意视觉设计都成立"的硬阈值。
> 权威源：[WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/quickref/)、[Apple HIG](https://developer.apple.com/design/human-interface-guidelines/)、[Material Design](https://m3.material.io/)。

## 1. 对比度（WCAG 2.1 AA，硬门槛）

| 元素 | 最小对比度 | 说明 |
|---|---|---|
| 正文文字（< 18pt 常规 / < 14pt 粗体） | **4.5:1** | 与背景色 |
| 大字（≥ 18pt 常规 / ≥ 14pt 粗体） | **3:1** | |
| UI 组件 / 图形（按钮边界、图标、图表线） | **3:1** | 与相邻色 |
| 装饰性元素 / 失效态 | 无要求 | 不承载信息 |

- AAA 级正文 7:1、大字 4.5:1（投影/答辩/低视力受众建议靠 AAA）。
- 颜色**不作唯一信息载体**：状态除颜色外加图标/文字/形状（红绿色盲约占男性 8%）。
- 校验：浏览器 DevTools 对比度检查 / WebAIM Contrast Checker；落 token 时在 design_tokens 里就锁定。

## 2. 触控目标尺寸

| 平台 | 最小可点区域 | 来源 |
|---|---|---|
| iOS | **44×44 pt** | Apple HIG |
| Android / Material | **48×48 dp** | Material Design |
| Web（WCAG 2.2 AA 2.5.8） | **24×24 px**（建议 44+） | WCAG 2.2 |

- 相邻目标间距 ≥ 8px，避免误触。移动端主操作放拇指热区（屏幕下 1/3）。

## 3. 间距与栅格（4/8pt 系统）

- 间距、尺寸取 **4 或 8 的倍数**（4/8/12/16/24/32/48/64）——多端一致、易 token 化。
- 正文**行长 45–75 字符**（中文 25–40 字）最易读；行高 1.5–1.7。
- 字体层次少而精：标题/正文/辅助 3–4 级即可，靠字号+字重拉开而非堆字体。

## 4. 动效与运动

- 尊重 `prefers-reduced-motion`：用户开启减弱动效时，关闭视差/自动播放/大位移，保留必要反馈。
- 过渡时长 150–300ms（微交互偏短）；避免闪烁（每秒 > 3 次闪烁有诱发癫痫风险，WCAG 2.3.1）。

## 5. 键盘与焦点

- 所有可交互元素键盘可达（Tab 顺序合理）；焦点态**可见**（不可 `outline:none` 不补替代）。
- 模态打开时焦点移入、关闭时归还；Esc 可关。

---

> **与 db05 的分工**：本文件 = 跨范式硬阈值（一处维护、任意学科适用）；
> db05 卡 implementation_notes = 该范式专属 a11y 判断（如玻璃拟态"模糊层下正文须足够对比、避免长段落、blur 吃 GPU 移动端控层数"、新拟物"边界靠阴影非对比、低视力/强光不可辨、只配装饰性轻交互"）。引用时两者配合：先满足本文件硬阈值，再看具体范式的额外风险。