按钮必须同时满足三件事——足够大的可点击区域（≥44×44px）、文本与背景对比度≥4.5:1、状态变化不能只靠颜色传达；button元素默认具备基础语义和键盘支持，但不自动解决尺寸、对比度及状态反馈等低视力障碍。
直接结论：按钮必须同时满足三件事——足够大的可点击区域（≥44×44px）、文本与背景对比度 ≥4.5:1、状态变化不能只靠颜色传达。
button 元素本身是否默认符合 WCAG？
是，但仅限基础语义和键盘支持。<button> 天然支持 Tab 焦点、回车/空格触发，且会被屏幕阅读器读作“按钮”。但它不自动解决尺寸、对比度、状态反馈这三项低视力核心障碍。
- 默认 padding 往往太小，触控或精细操作困难
- 未显式设置 font-size 或 line-height 时，文字可能小于 16px，缩放后易糊或丢失
- 禁用状态（
disabled）仅靠灰度变色，对低视力用户几乎不可辨
如何确保按钮文本对比度 ≥4.5:1？
别信肉眼判断，用 Chrome DevTools 实时验证。右键按钮文字 → 「检查」→ 悬停在 color 或 background-color 值上 → 看「对比度」图标。如果显示 ⚠️ 或 ❌，立刻改。
- 避免用
#999这类浅灰配白底（对比度常为 2.8:1）；改用#333或更深 - 若背景是图片或渐变，无法直接测，需用 WebAIM Contrast Checker 手动输入叠加后的等效色值
- 禁用按钮的文本色不能简单设为
#ccc，应保持与启用状态相同的深色，仅加opacity: 0.5+cursor: not-allowed，并用aria-disabled="true"
怎么让 hover / focus / disabled 状态都对低视力用户有效？
纯颜色变化等于没提示。必须叠加形状、尺寸、图标或文字说明。
立即学习“前端免费学习笔记（深入）”；
-
:focus必须保留 outline（或用box-shadow替代），且宽度 ≥2px、模糊值 ≤4px，否则键盘用户根本看不到焦点在哪 -
:hover除了变色，建议加transform: scale(1.03)或轻微上移translateY(-1px) - 禁用状态不要只灰掉，加上
border: 2px dashed #666或在按钮右下角加小图标（如aria-label="当前不可用"） - 成功/失败反馈按钮（如提交后变绿/红），必须同步添加图标（✅/❌）和文字（“已发送”/“发送失败，请重试”）
为什么用 padding 比 width/height 更可靠？
因为低视力用户常开启系统级字体放大（如 Windows 的 125% 缩放或 macOS 的「更大字体」）。固定宽高会切断文字流，导致换行错位或截断；而基于 padding 的尺寸随字体等比放大，始终维持可点击区域安全。
- 推荐最小尺寸：
padding: 12px 24px（内边距）+font-size: 16px→ 实际点击区轻松超 44×44px - 避免
min-width: 120px这类绝对值，它在高缩放下反而压缩文字空间 - 移动端务必加
touch-action: manipulation，防止 iOS Safari 300ms 延迟影响响应感
最易被忽略的一点：所有状态样式（尤其是 :focus 和 :disabled）必须在 CSS 中显式声明，不能依赖浏览器默认。很多团队只写了 :hover，结果键盘用户一按 Tab 就“消失”在页面里。
