可访问性测试：color-contrast 与焦点

CSS 会控制颜色对比度、焦点指示器的可见性、元素可见性（display:none 会将元素从无障碍树中移除）以及阅读顺序（通过 flexbox 的 order 进行视觉重排，而不是按照 DOM 顺序）。CSS 选择会直接影响残障用户能否使用界面。

WCAG 2.1 AA 要求普通文本的对比度至少为 4.5:1，大号文本的对比度至少为 3:1（18px 以上的粗体或 24px 以上的常规字体）。AAA 分别要求 7:1 和 4.5:1。这些比例比较前景文字颜色的亮度与背景颜色的亮度。

在 DevTools 中点击任意文本元素 → 样式面板。颜色样本旁会显示对比度比例标记。勾号表示通过；X 表示失败。颜色选择器会在颜色渐变中显示 AA/AAA 阈值线。

axe-core、Lighthouse 和 Pa11y 会自动审核所有文本元素的对比度比例。在开发环境中使用 @axe-core/react 运行 axe-core，可以在开发期间实时获取浏览器控制台中的对比度警告。

在 :focus 上使用 CSS outline: none 或 outline: 0 会移除浏览器默认的焦点环，使键盘导航变得不可见。这是严重的无障碍性问题。请使用自定义的可见焦点样式来替代，而不是完全移除焦点指示器。

:focus 会应用于所有焦点事件，包括鼠标点击（这会在点击时显示焦点环，而设计人员通常不喜欢这样）。:focus-visible 只会在浏览器判断正在使用键盘导航时应用，从而为键盘用户显示焦点环，同时不会在鼠标点击时显示。

WCAG 2.2 引入了成功准则 2.4.11（焦点外观 AA）：焦点指示器与相邻颜色之间的对比度至少必须达到 3:1，并覆盖组件的整个周边。自定义焦点样式不仅要存在，还必须满足这些要求。

Windows 高对比度模式会使用用户定义的系统颜色覆盖 CSS 颜色。使用 @media (forced-colors: active) 提供能够在高对比度模式下正常工作的替代样式。请通过 Windows 设置 → 辅助功能 → 高对比度进行测试。

WCAG 1.4.1 禁止仅使用颜色传达信息。只将错误状态变成红色就不符合这一准则。请将颜色与图标、文本标签、图案或下划线结合使用，确保始终存在不依赖颜色的信息。

WCAG 1.4.4 要求文本可以放大到 200%，且不损失内容。WCAG 1.4.12 要求覆盖文本间距设置（增大的字母间距、行高）时不会破坏布局。请对排版使用相对单位（rem、em），以同时满足这两项要求。

全面的无障碍 CSS 测试方案包括：用于开发的 axe DevTools 浏览器扩展、用于自动化流水线检查的 Lighthouse CI、用于命令行页面审核的 Pa11y，以及使用 Tab/Shift+Tab 进行手动键盘导航测试，以验证焦点指示器的可见性和顺序。

为什么 outline: none 绝不能成为元素 :focus 状态的最终 CSS？

CSS 无障碍测试涵盖颜色对比度比例（AA 最低 4.5:1）、使用 :focus-visible 实现可见且符合 WCAG 2.2 的焦点指示器、避免仅用颜色传递信息、支持 forced-colors 模式，以及使用相对字体排版单位来满足缩放要求。自动化工具结合手动键盘测试，确保全面覆盖。