按钮文字颜色必须满足WCAG对比度最低要求：小字号（<18pt或<14pt加粗）文本需≥4.5:1，大字号（≥18pt或≥14pt加粗）需≥3:1，须用官方公式(L1+0.05)/(L2+0.05)计算，不可凭RGB差值或肉眼判断。
按钮文字颜色必须满足 WCAG 对比度最低要求
直接看结论：小字号按钮文字（font-size font-weight
别信 RGB 差值或肉眼判断。必须用 WCAG 官方公式：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是文字相对亮度，L2 是背景相对亮度（需经 sRGB → 线性光转换）。浏览器 DevTools 的拾色器不计算这个，只显示十六进制。
验证按钮文字对比度的三种高效方式
逐个手算太慢，优先用工具定位真实风险点：
- Chrome 扩展
axe DevTools一键扫描整页，直接报出button元素的对比度违规位置和对应 CSS 选择器 - VS Code 插件
Color Highlight+Color Picker：悬停在color或background-color值上，实时显示当前组合对背景的对比度数值 - 命令行快速验证：运行
npx color-contrast "#333" "#fff"，输出4.52表示刚好达标；npx color-contrast "#999" "#fff"输出4.06，说明不满足 AA 小字标准
重点查三类高危位置：按钮文字本身、placeholder、disabled 态按钮——它们常被忽略，又最容易踩线。
立即学习“前端免费学习笔记（深入）”；
深色模式下按钮文字颜色极易翻车
不是把 background-color 改成 #121212，再配个 #ffffff 就万事大吉。OLED 屏上纯白会过曝，实际对比度可能跌破 3:1；系统级暗色适配（@media (prefers-color-scheme: dark)）还会触发浏览器自动降亮逻辑，导致你写的 #e0e0e0 在某些设备上变成更浅的灰。
更稳妥的做法是：
- 用 CSS 自定义属性统一管理明/暗模式下的文字色，例如
--btn-text-light: #1a1a1a;和--btn-text-dark: #e6e6e6; - 配合
forced-colors媒体查询兜底，避免高对比度模式下文字消失 - 禁用态按钮别只靠透明度（
opacity: 0.5），它会同时削弱文字和背景的亮度，大幅拉低对比度；改用明确的低饱和度色值，如color: #757575;配background-color: #f5f5f5;
Bootstrap 等框架的辅助类不能盲目信任
像 text-success 这类类名看似安全，但它的对比度保障只在默认背景（如 bg-light）下成立。一旦你覆盖了背景色，比如给按钮加了 background-color: #004d40;，原来的 text-success（绿色）就可能立刻不达标。
真正可靠的写法是：
- 用框架提供的语义化类组合，例如 Bootstrap 的
btn-success而非单独text-success - 自定义按钮时，始终成对设置
color和background-color，并用工具验证组合结果 - 避免在伪类（
:hover、:active）中只改背景色却不同步调整文字色——悬停后对比度可能骤降
复杂点在于：对比度不是静态值，它随背景材质（纯色/渐变/图片）、模式切换、系统强制色彩而动态变化。每次改色，都得重新验算，而不是“设完就忘”。
