原生<button>天然支持高对比模式，因其默认渲染逻辑已内置系统强制重绘适配，依赖边框、文字色和焦点轮廓传递状态；需配合prefers-contrast媒体查询重置样式，并确保语义结构完整。
原生 <button> 元素天然支持高对比度模式，但必须配合系统级 prefers-contrast 媒体查询和语义化结构才能真正生效；手动加 role="button" 或用 <div> 模拟，反而会绕过系统识别，导致高对比下按钮“消失”或不可操作。
为什么直接写 <button> 就能响应高对比模式
操作系统开启高对比（如 Windows 高对比主题、macOS “增加对比度”）后，浏览器会自动匹配 @media (prefers-contrast: high)。原生 <button> 的默认渲染逻辑已内置对系统强制重绘的适配——它不依赖 background-color 或阴影，而是靠边框、文字色和焦点轮廓传递状态。只要你不覆盖这些关键属性，系统就会接管并增强对比。
常见错误是给 <button> 加 background: transparent 或 box-shadow，结果高对比下按钮变成纯色块，视觉锚点全失。
- 不要设
background: transparent或渐变；高对比下必须有明确背景色，比如background-color: #000或#fff - 禁用
border-radius和box-shadow；它们在高对比模式下会被系统清除或渲染异常 - 确保
:focus-visible轮廓至少为3px solid，且颜色与背景强反差（如白底配黑轮廓） - 图标按钮必须提供可访问名称：
<button aria-label="删除">?️</button>，不能只靠 emoji
如何用 prefers-contrast: high 重置按钮样式
@media (prefers-contrast: high) 不是可选补丁，是高对比用户能看清按钮的唯一可靠路径。仅靠 JS 切换 class 或监听 color-scheme 完全无效——系统不会触发读屏器重读，也不会强制重绘原生控件。
立即学习“前端免费学习笔记（深入）”；
必须显式重置以下几项，否则按钮在高对比下可能文字不可见、边框消失、焦点丢失：
- 强制设置
border：哪怕原设计是无边框，也要加1px solid currentcolor或具体色值 - 重置
color和background-color为高对比可用组合（如黑底白字、白底黑字），避免中间灰阶 - 禁用
opacity、rgba()和所有透明度相关声明 - 对
<button disabled>单独定义样式，确保禁用态文字对比度 ≥ 3:1（大文本）
示例：
@media (prefers-contrast: high) {
button {
border: 2px solid currentcolor;
background-color: #000;
color: #fff;
box-shadow: none;
border-radius: 0;
}
button:focus-visible {
outline: 3px solid #fff;
}
button:disabled {
color: #aaa;
background-color: #333;
}
}
纯图标按钮的 aria-label 写法陷阱
当按钮内只有 <svg> 或 emoji，没有可见文字时，aria-label 是唯一能让读屏器播报操作意图的方式。但写错会导致语义错位或重复播报。
- 别写
<button aria-label="设置">⚙️</button>同时又在 SVG 上设aria-hidden="false"——必须配对aria-hidden="true"，否则图标和 label 都被朗读 - 避免模糊描述，如
aria-label="操作"；应准确表达行为，如aria-label="打开侧边栏" - 如果旁边有可见文本（如“搜索”文字紧邻放大镜图标），优先用
aria-labelledby关联，而非aria-label - 禁用状态要同步：用 JS 设置
el.disabled = true，而不是只加aria-disabled="true"
表单中按钮与 label 的绑定误区
高对比模式下，很多按钮失效不是因为样式没重置，而是语义链断裂。尤其是按钮作为表单提交控件时，常被误认为“独立元素”，忽略其与 <label> 或 <form> 的上下文关系。
-
<button type="submit">必须位于<form>内部，否则无法参与表单提交逻辑，键盘用户按 Enter 也无法触发 - 若按钮用于控制其他表单控件（如展开密码可见性），需用
aria-controls="password-id"显式关联 - 避免把
<button>和<label>并列写却未做 DOM 关联；屏幕阅读器不认 CSS 位置，只看结构 - 检查
for/id是否严格一致，大小写、空格、连字符都不能错——高对比下 label 文字若被压暗，唯一依赖的就是这个绑定
高对比适配真正的复杂点不在写多少 CSS，而在于意识到：系统会强制重绘一切，你写的每一条样式都可能被覆盖或忽略。唯一可控的是语义结构和媒体查询的精确响应——<button> 是起点，@media (prefers-contrast: high) 是必经通道，aria-label 和 aria-controls 是补全语义的最后一环。漏掉其中任意一环，按钮就只是“看起来像按钮”。
