C04 无障碍与视觉

摘要：视觉层面的无障碍有四个硬指标：正文对比度不低于 4.5:1、焦点必须可见、状态不能只靠颜色区分、动效必须可关闭。四项都能在 CSS 内解决，不需要额外脚本。本文给出每项的具体写法与验证方式。
关键词：对比度，焦点可见，色觉差异，减少动效，强制色彩

所属：frontend/css / C-高级 ｜ 上一篇：C03-渲染性能 ｜ 下一篇：C05-CSS工程化

1 引言

视觉无障碍常被当作设计要求，实际是可测量的技术指标。达标与否不依赖审美判断，只看数值与行为。

本文给出四项指标的实现与验证。范围见表 1-1。

项	本文覆盖	本文不覆盖
对比度	正文 4.5:1、大字 3:1、非文本 3:1	配色体系设计
焦点	:focus-visible、可见轮廓、跳过导航	焦点陷阱实现
颜色依赖	图标、下划线、图案等非颜色线索	色盲模拟工具细节
偏好	prefers-reduced-motion、forced-colors	语音与开关控制

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/a11y.html	编码 UTF-8
工具	取色器、对比度检查、强制色彩模拟	开发者工具 Rendering 面板
前置	B04、B06	伪类与主题变量

3 原理与实现

3.1 四项指标的检查顺序

四项互不替代，按「能否看清 → 能否操作 → 能否区分 → 是否舒适」检查，如图 3-1 所示。

flowchart LR
    A["对比度 ≥ 4.5:1"] --> B["焦点可见"]
    B --> C["状态不只用颜色"]
    C --> D["动效可关闭"]
    D --> E["强制色彩下仍可用"]

图 3-1 视觉无障碍的四项检查

图上可见：任何一项不通过都会阻断特定用户群，不能靠其它项补偿。

3.2 对应写法

/* 运行环境：Chrome 130+；css-practice/a11y.css */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: 1rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
}
.skip-link:focus-visible { inset-block-start: 1rem; }

/* 状态不只靠颜色：错误态加图标与边框样式 */
.field[aria-invalid="true"] {
  border: 2px dashed #b91c1c;
  padding-inline-start: 1.75rem;
  background-image: url("./images/warning.svg");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
}

/* 动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 强制色彩模式 */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}

四项指标的具体要求见表 3-1。

指标	要求	实现方式
正文对比	≥ 4.5:1	调整语义色，用取色器核对
大字对比	≥ 3:1（24 像素或 19 像素加粗）	标题可略低
焦点	始终可见，不被 outline: none 移除	:focus-visible + 轮廓
非文本对比	图标与边框 ≥ 3:1	边框加深
状态区分	颜色 + 形状/文字/图标	下划线、图标、虚线边框
动效	可关闭	prefers-reduced-motion

常见失败写法与替代见表 3-2。

失败写法	后果	替代方案
outline: none	键盘用户找不到焦点	保留轮廓或自定义明显样式
只用红色表示错误	色觉差异用户无法识别	加图标与文字
浅灰文字 #cbd5e1 作正文	对比度约 1.9:1	提到 4.5:1 以上
悬停才显示关键信息	触摸设备无法触发	常显或可点击展开
全屏循环动画	引发不适	响应减少动效偏好

4 验证与讨论

1. 用取色器读取正文与背景，计算对比度，确认 ≥ 4.5:1。
2. 只用 Tab 遍历页面，确认每一步焦点都可见且不被裁切。
3. 把页面截图转灰度，确认错误态仍能识别。
4. 系统开启减少动效与强制色彩，分别刷新观察变化。

检查项	预期结果	说明
对比度	正文 ≥ 4.5:1	取色器
焦点	键盘遍历全程可见	无 outline: none
灰度识别	错误态有图标与虚线边框	非颜色线索
减少动效	动画时长趋近 0	媒体查询
强制色彩	按钮仍可见边界	forced-colors

讨论与局限。 对比度按公式计算，实际观感受字重与背光影响，数值只是下限。另 prefers-reduced-motion 只能降低动效，不能替代「不要用闪烁」这条底线。

5 常见问题

现象	原因	处理
键盘操作看不到焦点	全局去掉了 outline	用 :focus-visible 自定义轮廓
灰色辅助文字看不清	对比度不足	加深颜色或加大字号
表单错误无法识别	仅改边框颜色	加图标与文字提示
动画引发不适	未响应减少动效偏好	补媒体查询
高对比模式下按钮消失	依赖背景色区分	强制色彩下补边框

6 结论

序号	结论	依据
1	四项指标按顺序检查，互不替代	图 3-1
2	焦点必须可见，禁止全局去掉轮廓	表 3-1
3	状态用颜色 + 形状/文字双线索	表 3-2
4	动效与强制色彩都要有分支	3.2 节代码

• 上一篇：C03-渲染性能
• 下一篇：C05-CSS工程化
• 返回：C00-总结 ｜ 科目 README

参考文献

[1] W3C · WCAG 2.2 对比度要求，https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html（访问于 2026-10-31）
[2] MDN Web Docs · forced-colors，https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/forced-colors（访问于 2026-10-31）