低视力用户最常卡在文字不可读、控件不可见、焦点不可辨三类问题上；诊断须从视觉层切入，检查CSS是否破坏系统字体放大、高对比模式下颜色失效、焦点样式在色盲/暗背景下丢失。
直接说结论：低视力用户最常卡在文字不可读、控件不可见、焦点不可辨这三类问题上，诊断必须从视觉层切入，而不是先看语义或键盘操作。
检查字体缩放是否被 CSS 强制截断
很多页面在 html 或 body 上写了 font-size: 62.5% 或 transform: scale(0.9)，表面看是“优化显示”，实际会破坏系统级字体放大（如 Windows 的“放大文本”设置或 macOS 的“辅助功能→显示→更大字体”）。浏览器缩放能绕过，但系统级缩放会被忽略。
- 用 Chrome DevTools → Rendering → 勾选 “Emulate CSS media feature prefers-reduced-motion” 和 “Emulate CSS media feature forced-colors” 同时观察文字是否随系统缩放变化
- 禁用所有自定义
font-size、transform、zoom，改用rem基于根元素默认字号（即不设html { font-size }） - 测试路径：系统设置字体放大至 150% → 打开页面 → 检查正文、按钮、表单标签是否清晰可读，无裁切、重叠或模糊
验证颜色对比度是否在高对比模式下失效
WCAG 的 4.5:1 是静态值，但低视力用户常启用操作系统高对比模式（Windows HC / macOS Dark Mode + Increase Contrast），此时 CSS 中的 background-color 和 color 可能被强制覆盖或反转，导致文字“消失”或按钮“不可见”。
- 在 Windows 开启“高对比主题”（如“高对比 #1”），用 Edge 或 Chrome 打开页面，肉眼确认所有文本、图标、边框是否仍可识别
- 避免用
background-image或box-shadow模拟边框/分割线——高对比模式下它们大概率被抹掉 - 用
@media (forced-colors: active)主动适配，例如：@media (forced-colors: active) { button { border: 2px solid ButtonText; background-color: ButtonFace; } }
定位焦点样式在低亮度/色弱场景下的丢失问题
默认 :focus 样式（如 outline: -webkit-focus-ring-color）在深色背景、蓝绿色系界面或色盲模拟下极易不可见。低视力用户依赖键盘导航，看不见焦点 = 不知道当前在哪。
- 不要只靠 DevTools 的“无障碍”面板看 ARIA 状态——它不模拟真实视觉衰减。必须手动切换到 Windows 色盲模拟（设置→辅助功能→颜色滤镜→红绿滤镜）再 Tab 导航
- 替换默认 outline：用双层描边（
outline: 2px solid #000; outline-offset: 2px）或内阴影（box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000）确保明暗背景下都突出 - 禁止使用
outline: none除非你提供了同等强度的替代焦点样式；button:focus-visible不能替代:focus，因为低视力用户可能始终需要可见焦点
真正难的不是加 alt 或写 aria-label，而是把“看得见”这件事当成一个运行时变量来对待——它随系统设置、用户偏好、环境光照实时变化。每次修改 CSS，都要在三种状态（默认 / 高对比 / 色盲滤镜）下亲手 Tab 一遍，否则诊断就是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
