高对比度模式下需用系统颜色关键词（如canvastext、field）重置所有文本/边框/填充属性，而非硬编码色值；必须在@media (prefers-contrast: high)中全覆盖伪元素、禁用态、outline等，且不可依赖color-scheme: only。
prefers-contrast: high 会强制覆盖所有 CSS 颜色声明
系统高对比度模式（如 Windows 高对比主题、macOS “增加对比度”）不是“换套配色”，而是直接接管渲染层：浏览器会禁用 background-image、background-color、border-color 和所有自定义 color 值，统一替换为操作系统预设的高对比色板（通常是纯黑/纯白/高饱和原色）。prefers-contrast: high 媒体查询只是让你感知到这个状态，它本身不提供颜色值，也不自动修复你的样式。
常见错误是以为加了 @media (prefers-contrast: high) 就能“适配”，结果只改了 background-color，却没重置 color、border-color、outline-color、fill（SVG 图标）、placeholder 等——这些全会被系统覆盖，但若你没显式声明，它们就变成不可控的默认值（常是极淡灰或透明）。
- 必须成对重写所有可能被覆盖的文本/描边/填充类属性，不能只动背景
-
color: CanvasText和background-color: Canvas这类系统颜色关键词在高对比模式下才真正生效；其他硬编码值（如#000、rgb(0,0,0)）会被忽略 - 不要依赖
inherit或currentcolor，它们在高对比上下文中行为不稳定
用 CanvasText / ButtonFace 等系统颜色关键词才是正解
WCAG 要求高对比模式下所有可读内容必须使用操作系统提供的语义化系统颜色，而不是开发者自定义值。这些关键词由浏览器映射到当前系统主题的实际色值，且在高对比启用时自动切换为强对比版本（例如 CanvasText 在 Windows 高对比黑底白字主题下就是纯白，在白底黑字主题下就是纯黑）。
关键系统颜色关键词包括：Canvas（主背景）、CanvasText（主文字）、ButtonFace（按钮背景）、ButtonText（按钮文字）、Field（表单输入框背景）、FieldText（表单文字）、Highlight（选中高亮）、Mark（高亮标记背景）。
- 优先用
color: CanvasText替代color: #1e293b，用background-color: Field替代background-color: #f9fafb - 避免混用：比如
background-color: Canvas+color: #fff是错的——#fff会被覆盖，而CanvasText才是与Canvas语义匹配的前景色 - SVG 图标需显式设
fill: currentColor并确保父元素color已设为系统关键词，否则图标会消失
@media (prefers-contrast: high) 内必须重置所有文本相关属性
仅靠系统关键词还不够。高对比模式下，很多组件依赖多层颜色叠加（如 placeholder、::selection、disabled 状态、focus-visible outline），这些都不会被系统自动处理，必须手动在媒体查询内全覆盖。
示例结构：
@media (prefers-contrast: high) {
:root {
--text-primary: CanvasText;
--bg-surface: Canvas;
--border-default: ButtonText;
}
body {
color: var(--text-primary);
background-color: var(--bg-surface);
}
input,
textarea,
select {
color: FieldText;
background-color: Field;
border-color: ButtonText;
}
input::placeholder,
textarea::placeholder {
color: GrayText; /* 系统预留的 placeholder 语义色 */
}
::selection {
background-color: Highlight;
color: HighlightText;
}
button:disabled,
[disabled] {
color: GrayText;
background-color: ButtonFace;
}
}
- 别漏掉伪元素：
::placeholder、::file-selector-button、::marker都需单独声明 -
outline必须显式设为outline: 2px solid Highlight，否则高对比下可能完全不可见 - 禁用态不要用
opacity: 0.5，它在高对比下会削弱系统色板效果，改用color: GrayText+background-color: ButtonFace
color-scheme: only 无法替代 prefers-contrast 媒体查询
color-scheme: light dark 声明在 :root 上，只是告诉浏览器“我支持深色/浅色模式”，它不触发任何样式变化，也不影响高对比模式。而 color-scheme: only（实验性）更危险：它会强制禁用系统级高对比覆盖，使页面在高对比用户设备上直接不可用——这违反 WCAG 4.1.1 强制要求。
真实场景中，用户可能同时开启深色模式和高对比模式（如 macOS 深色主题 + “增加对比度”开关打开），这时 prefers-color-scheme: dark 和 prefers-contrast: high 会同时匹配，你得用嵌套媒体查询处理交集：
@media (prefers-color-scheme: dark) and (prefers-contrast: high) {
/* 深色+高对比双重环境下的专属重置 */
body { color: CanvasText; background-color: Canvas; }
code { color: SyntaxText; background-color: SyntaxBackground; }
}
- 永远不要用
@supports not (prefers-contrast: high)做降级——安卓 WebView 会崩溃整段 CSS - 测试必须真机实测：Chrome/Firefox 开发者工具的模拟器仅支持基础高对比色板，无法还原 Windows 高对比主题对 SVG、阴影、渐变的彻底禁用行为
- 最易忽略的点：高对比模式下，
box-shadow和text-shadow全部失效，别指望它们辅助可读性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
