用 forced-colors 适配 Windows 高对比度：系统颜色与自定义控件

Windows 高对比度模式会启用强制颜色（forced colors），浏览器用系统调色板覆盖页面中作者指定的颜色。很多自定义控件在普通模式下正常，进入该模式后却出问题：复选框的选中状态只靠背景图或背景色，焦点环只靠 box-shadow，结果选中态和焦点位置都难以辨认。目标不是关闭强制颜色，而是让控件在系统颜色下仍然可读、可辨状态。

问题场景

常见写法是给自定义复选框设置 background-image 勾选图标，选中时只改变背景色；焦点环则用 box-shadow: 0 0 0 3px ...。在强制颜色模式下，背景色会被系统调色板覆盖，背景图、渐变和阴影也不适合作为唯一的状态表达方式。于是用户可能看到“复选框有边框但看不出是否选中”，键盘焦点也可能完全消失。

适配原则

1. 普通样式仍使用品牌色；在 @media (forced-colors: active) 中切换为系统颜色关键字。
2. 用边框、轮廓和形状表达状态，不要只依赖背景色、背景图或阴影。
3. 常用系统颜色：Canvas/CanvasText、Field/FieldText、ButtonFace/ButtonText、Highlight/HighlightText、GrayText。
4. 焦点环使用 outline 与 outline-offset，不要只用 box-shadow。
5. forced-color-adjust: none 只在确有必要且逐项验证对比度时使用，默认保持 auto。

最小可运行示例

保存为 forced-colors-demo.html 后用浏览器打开。示例中的颜色值是占位值，可按品牌调整。

<!doctype html>
<html lang='zh-CN'>
<meta charset='utf-8'>
<title>forced-colors 示例</title>
<style>
  body { margin: 2rem; font: 16px/1.6 system-ui, sans-serif; }
  .field { display: inline-flex; align-items: center; gap: .5rem; }
  .field input {
    appearance: none; width: 1.25rem; height: 1.25rem; margin: 0;
    border: 2px solid #6c757d; border-radius: .25rem; background: #fff;
    display: grid; place-content: center;
  }
  .field input::before {
    content: ''; width: .55rem; height: .3rem; opacity: 0;
    border-left: 3px solid #fff; border-bottom: 3px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
  }
  .field input:checked { background: #0a58ca; border-color: #0a58ca; }
  .field input:checked::before { opacity: 1; }
  .field input:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }
  .card { margin-top: 1rem; padding: 1rem; border: 1px solid #6c757d; border-radius: .5rem; }
  .card:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }

  @media (forced-colors: active) {
    .field input { background: Field; border-color: ButtonText; }
    .field input:checked { background: Highlight; border-color: Highlight; }
    .field input:checked::before { border-color: HighlightText; }
    .field input:focus-visible { outline-color: Highlight; }
    .card { border-color: CanvasText; }
    .card:focus-visible { outline-color: CanvasText; }
  }
</style>
<label class='field'><input type='checkbox'><span>接收更新提醒</span></label>
<div class='card' tabindex='0'>可聚焦卡片：按 Tab 检查焦点环。</div>

关键点：复选框的选中态由 ::before 的勾形边框和 border-color: Highlight 共同表达，不只靠背景；焦点环在强制颜色下改用 outline-color: Highlight，卡片焦点使用 CanvasText，保证轮廓可见。

运行与验证

1. 在 Edge 或 Chrome 中打开页面，按 F12 打开开发者工具。
2. 打开“渲染”（Rendering）面板，找到“模拟 CSS 媒体功能 forced-colors”，选择 active。
3. 用鼠标切换复选框，确认未选中与选中状态都有清晰边框或勾形；用 Tab 键移动焦点，确认焦点环可见。
4. 在 Windows 设置中切换“辅助功能 > 对比度主题”，用真实高对比度主题复查黑底、白底等场景。
5. 关闭模拟后确认普通模式样式没有回归。

边界与限制

forced-colors 媒体查询只在支持该特性的浏览器中生效，不支持时保留普通样式；系统颜色关键字的具体映射由浏览器和对比度主题决定，不能假设所有主题下 Highlight 都与背景有足够差异。不同主题下应实际切换检查，必要时用 ButtonText 边框加勾形形状兜底。

强制颜色模式会覆盖作者颜色，不能假设背景图、渐变、阴影仍按设计显示；不要全局使用 forced-color-adjust: none 来“保住”原样式，除非逐项验证对比度与可读性。还要注意：仅用颜色区分状态仍可能失败，应同时提供形状、边框或文本标签；焦点样式只影响可见性，不改变键盘顺序。最后，prefers-contrast 表达用户对比度偏好，不能替代 forced-colors 的强制调色板适配。