CSS prefers-contrast 与 forced-colors 高对比度适配与可访问性实践

CSS prefers-contrast 与 forced-colors 高对比度适配与可访问性实践概述通过用户偏好的对比度与强制颜色模式检测，为界面提供可读性与可访问性强化，避免在高对比度下的内容不可见与信息丢失。核心概念与参数- `@media (prefers-contrast: moreless)`：响应用户对比度偏好。`@media (forced-colors: active)`：检测系统强制颜色模式（如 Windows 高对比度）。`forced-color-adjust: none`：在必要时避免 UA 强制调色（谨慎使用）。实践示例@media (prefers-contrast: more) { .button { outline: 3px solid CanvasText; } } @media (forced-colors: active) { .badge { background: ButtonFace; color: ButtonText; } } 验证方法规范与支持：参考 MDN（`prefers-contrast`、`forced-colors`、`forced-color-adjust`）。可读性：启用系统高对比度模式，检查文本/控件可见与焦点状态。注意事项优先使用系统颜色关键字（如 `CanvasText`、`ButtonFace`），保证对比度与一致性。谨慎使用 `forced-color-adjust: none`，只在必要时绕过 UA 调整。与 `:focus-visible` 一并验证键盘可达性样式。参考：MDN（prefers-contrast、forced-colors、forced-color-adjust）。