4、无障碍设计基础：WCAG等无障碍标准，视觉障碍用户需求，以及对比度、可读性要求
视觉设计合规性检验的第一步，是理解“为谁而设计”。全球约有2.85亿人存在视觉障碍，包括低视力、色觉缺陷（色盲）、光敏感以及完全失明。无障碍设计并非少数人的特殊需求，而是一种通用设计策略——当界面在极端条件下依然清晰可读时，它在阳光直射、老旧屏幕、弱网环境等普通场景下也会表现更佳。本章将围绕WCAG（Web内容无障碍指南）标准，系统拆解视觉障碍用户的核心需求、对比度计算原理、可读性设计方法，以及如何在设计流程中嵌入合规性检验。
4.1 核心原理：从视觉障碍用户需求到WCAG标准映射
视觉障碍并非一个单一群体，而是包含多种不同状况的谱系。低视力用户（视力在0.3以下）依赖高对比度、大字号和屏幕放大工具；色觉缺陷用户（全球约8%男性和0.5%女性）无法区分红绿或蓝黄；光敏感用户（如癫痫患者）对闪烁内容有严重反应；全盲用户则完全依赖屏幕阅读器将视觉信息转换为语音或盲文。理解这些差异，是进行无障碍设计的前提。
WCAG 2.1（Web Content Accessibility Guidelines）是当前国际通用的无障碍标准，其核心原则为POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮性（Robust）。在视觉设计层面，最常涉及的是“可感知”原则下的1.4.3对比度（最小）和1.4.11非文本对比度，以及“可操作”原则下的2.4.7焦点可见性。
| WCAG 2.1 成功标准 | 等级 | 视觉设计要求 | 典型检验方法 |
|---|---|---|---|
| 1.4.3 对比度（最小） | AA | 正文文本对比度 ≥ 4.5:1；大文本（≥18pt或14pt加粗）≥ 3:1 | WebAIM Contrast Checker 测量 |
| 1.4.11 非文本对比度 | AA | UI组件边界、图标、图表数据点对比度 ≥ 3:1 | axe DevTools 自动检测 + 人工目测 |
| 1.4.1 使用颜色 | A | 颜色不能作为唯一的信息传达方式 | 灰度模式截图检查 |
| 2.4.7 焦点可见 | AA | 键盘操作时焦点指示清晰可见 | Tab键遍历页面检查 |
4.2 判断方法：对比度计算与可读性评估流程
对比度是衡量前景色与背景色亮度差异的量化指标，计算公式基于相对亮度（L），范围从0（纯黑）到1（纯白）。对比度 = (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮颜色的相对亮度，L2为较暗颜色的相对亮度。相对亮度计算涉及RGB通道的线性化转换，实际工作中通常使用工具完成，但理解原理有助于判断设计方案的合理性。
可读性评估不能只看对比度数值，还需综合考量字号、字重、字体族、行高、字间距以及背景纹理等因素。例如，同样对比度下，无衬线字体比衬线字体在低分辨率屏幕上更易读；浅色背景上的深色文字比深色背景上的浅色文字在眩光环境下表现更好。
- 确定目标元素：列出页面中所有需要检验的文本、图标、表单控件、图表数据点。
- 测量对比度：使用WebAIM、Contrast Ratio等工具，输入前景色和背景色的十六进制值或RGB值。
- 对照标准：判断元素属于正文（≥4.5:1）、大文本（≥3:1）还是非文本组件（≥3:1）。
- 模拟视觉障碍：使用Figma的Able插件或Stark插件，模拟色盲、低视力、白内障等视觉状态。
- 键盘遍历测试：仅使用Tab键和Enter键操作页面，确认焦点环清晰可见且逻辑顺序正确。
- 屏幕阅读器抽测：使用NVDA或VoiceOver，确认图片替代文本、表单标签、标题层级正确传达。
4.3 案例拆解：电商产品筛选栏的无障碍改造
某电商平台在无障碍审计中发现，其商品筛选栏存在多处视觉无障碍问题。初始现象：筛选条件使用“灰色勾选”表示已选状态，但灰色与白色背景的对比度仅为1.8:1，低视力用户无法辨认；价格区间用红色高亮显示选中项，但红绿色盲用户无法区分选中与未选中状态；筛选按钮的键盘焦点环在蓝色背景上几乎不可见。
关键输入数据：设计稿中筛选栏背景色为#F5F5F5，未选中文字色为#666666（对比度5.1:1，达标），选中项文字色为#FF0000（对比度3.9:1，不达标），焦点环颜色为#2196F3（对比度2.1:1，严重不达标）。
分析判断过程：首先，勾选状态仅依赖颜色区分，违反WCAG 1.4.1“使用颜色”标准；其次，红色文字在浅灰背景上对比度不足，且红绿色盲用户无法感知颜色变化；最后，焦点环对比度远低于3:1的非文本对比度要求。
实际操作步骤：
- 将选中状态改为“勾选图标 + 文字加粗 + 背景色变化”三重编码，不再仅依赖颜色。
- 选中项背景色改为#E3F2FD（浅蓝），文字色改为#0D47A1（深蓝），对比度达到7.8:1。
- 焦点环改为2px实线#000000（黑色），对比度超过12:1，并在焦点环外增加2px白色描边以适配深色背景。
- 在筛选栏底部增加“已选条件”文字摘要，方便屏幕阅读器用户快速了解当前筛选状态。
结果对比：改造后，筛选栏所有文本对比度均≥4.5:1，非文本组件对比度≥3:1，通过axe DevTools自动检测和人工色盲模拟测试。灰度模式下，选中状态仍可通过勾选图标和背景色差异辨识。
风险与代价：增加勾选图标和背景色变化需要额外约0.5个设计人日；但避免了因无障碍不合规可能面临的法规风险（如美国ADA诉讼），且提升了所有用户在强光环境下的可读性。
4.4 常见误区与总结复盘
误区一：对比度达标即可，忽略其他可读性因素。对比度是必要条件而非充分条件。即使对比度达到4.5:1，如果字号过小（如12px以下）、字重过轻（如Thin字重）、或背景有复杂纹理，实际可读性依然很差。建议正文最小字号不低于14px（移动端）或16px（桌面端），并避免在图片上直接叠加文字。
误区二：只检验正文文本，忽略图表和图标。WCAG 1.4.11明确要求非文本内容（如图表数据点、图标、表单控件边界）的对比度≥3:1。饼图中相邻色块的对比度、折线图中线条与背景的对比度，都需要纳入检验范围。
误区三：认为无障碍只影响少数人。实际上，无障碍设计受益人群远超视觉障碍者。老年人、临时性视力下降（如眼疾术后）、环境因素（如户外强光）都会产生类似需求。遵循无障碍标准的设计，其信息层级和视觉清晰度通常也更好。
误区四：自动检测工具通过即代表合规。自动工具只能检测约30%的无障碍问题，焦点顺序、屏幕阅读器语义、颜色依赖等需要人工验证。建议建立“自动检测 + 人工抽测 + 真实用户测试”三层检验机制。
在实际项目中，建议设计团队建立一份“无障碍视觉自检清单”，包含：所有文本对比度≥4.5:1、所有UI组件边界对比度≥3:1、不使用颜色作为唯一信息传达方式、键盘焦点环清晰可见、图表数据点可区分、图片有替代文本、表单标签明确关联。每次设计评审时逐项核对，将无障碍从“事后补救”转变为“设计前置”。