按钮在高对比度模式下“消失”是因为系统强制重绘时未重置border、background-color、color和outline四项关键属性，导致文字与背景同色、边框透明、焦点轮廓缺失。
高对比度模式下按钮为什么“消失”或不可见
系统开启高对比度后，浏览器会强制重绘所有元素，但不会帮你补样式。常见现象是按钮文字和背景同色、边框变细甚至透明、焦点轮廓被抹掉——根本原因不是没写 @media (prefers-contrast: high)，而是写了却没覆盖关键属性。
必须重置以下四项，缺一不可：
-
border：不能依赖border: 1px solid currentcolor，要显式设为2px solid #000或2px solid #fff -
background-color：禁用transparent、渐变、rgba()，强制用纯色如#000或#fff -
color：确保与背景形成强反差，比如黑底配白字、白底配黑字 -
outline：:focus-visible的轮廓至少3px solid，且颜色与背景反差足够（例如白底用#000）
原生
不要。原生 <button></button> 已自带完整无障碍语义和行为，加 role="button" 或只设 aria-disabled="true" 反而破坏一致性。
典型错误：
-
<button role="button" aria-disabled="true">提交</button>→ 视觉禁用但读屏仍报“可点击” -
<button aria-label="删除">?️</button>→ 图标未加aria-hidden="true"，导致重复朗读
正确做法：
- 禁用时用
disabled属性：<button disabled>提交</button> - 纯图标按钮必须配
aria-label或aria-labelledby，且图标加aria-hidden="true" - 动态控制禁用状态，只改
el.disabled = true/false，别只操作 ARIA 属性
按钮文本与背景的对比度怎么才算达标
WCAG AA 级要求普通文本对比度 ≥ 4.5:1，但高对比模式下不能只靠“看着深”判断。很多设计师用 #666 配 #fff，实测只有 4.49:1 —— 差 0.01 就不合规。
验证方法（Chrome/Edge DevTools）：
- 右键按钮文字 → “检查” → 切到 Computed 标签页
- 展开
color和background-color→ 点击右侧色块图标 - 看弹窗里
Contrast ratio: X.XX是否 ≥ 4.5
注意：
- 如果背景含
opacity或rgba()，DevTools 不自动合成，得先算出最终色值再测 - 按钮内图标（如 SVG）若没设
aria-hidden="true"，也会被纳入对比度检测范围 - 禁用态按钮禁用
opacity: 0.5，必须换真实色值（例如灰底配深灰字）
高对比按钮的焦点管理容易被忽略的细节
很多人只处理了 :focus，但高对比下更关键的是 :focus-visible —— 它才是键盘用户的唯一视觉锚点。
常见疏漏：
- 用
outline: none抹掉默认焦点框，又没提供替代样式 - 焦点样式用了
box-shadow或border-radius，高对比下会被系统强制清除 - 模态框里的按钮打开后，焦点没锁定在内部，键盘用户能 Tab 出去
安全写法：
button:focus-visible { outline: 3px solid #000; outline-offset: 2px; }- 避免
box-shadow、border-radius、filter等高对比下失效的属性 - 模态框激活时，用
inert或手动管理tabindex锁定焦点流
高对比适配不是加一层 CSS 就完事，它要求你放弃“视觉优先”的惯性思维，从系统渲染逻辑出发，把每个像素的可读性当作硬约束来对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
