Bootstrap 5 颜色类按语义分层：text- 用于常规识别，text--emphasis 提供更高对比度（AA+级）专用于聚焦元素，bg-*-subtle 则基于独立灰度体系保障文字对比度，三者均自动适配深色模式。
Bootstrap 5 的颜色深浅类（如 text-primary、text-primary-emphasis、bg-primary-subtle）不是靠“加数字后缀”控制深浅，而是按语义角色分层设计的——直接套用预设类比手动调 opacity 或改 color 更可靠，也更符合可访问性要求。
text-*-emphasis 和 text-* 有什么实际区别
别再以为 text-primary-emphasis 就是“更深的 text-primary”。它本质是 Bootstrap 5.3+ 新增的强调级文本类，底层用的是 color-mix(in srgb, var(--bs-primary), black 30%) 这类动态计算值，而非固定色值。
-
text-primary：绑定主题变量，明度固定（比如shade-color($primary, 20%)），适合标签、标题等需强识别的场景 -
text-primary-emphasis：对比度更高（AA+ 级），专用于需要视觉聚焦但又不破坏层级的元素，比如表单必填星号、错误提示前缀 - 两者在深色模式下会各自适配——
text-primary-emphasis在 dark 下自动变亮，而text-primary只是变浅一点，容易糊成一片 - 常见误用：给按钮文字加
text-primary-emphasis——按钮已有btn类控制对比度，再叠加强调类反而导致 WCAG 检测失败
bg-*-subtle 类为什么比 bg-* 更安全
bg-primary-subtle 不是“淡一点的 bg-primary”，它是从 $primary-100 变量生成的独立背景色，和 text-body-secondary 是同一灰度体系。这意味着它和文字类之间有预设的对比度余量。
-
bg-primary+text-primary：底色和文字色明度差小，实测对比度常低于 4.5:1，尤其在小字号或 Retina 屏上直接过不了 axe 工具检测 -
bg-primary-subtle+text-primary：明度差拉到 8:1 以上，且在深色模式下自动切换为var(--bs-primary-900)配text-white，不用 JS 切换 - 注意：
bg-primary-subtle不支持响应式断点（如bg-primary-subtle-md），要适配不同屏幕，得配合media查询自己写 - 别用
bg-opacity-10模拟 subtle 效果——它只是降低整个背景透明度，会透出下层内容，破坏隔离性
怎么避免自定义颜色时深浅错位
加一个 text-navy，结果深色模式下文字变黑看不见？问题大概率出在 $theme-color-interval 没同步更新。
- 只改
$theme-colors: (navy: #001f3f)，不碰$theme-color-interval：Sass 编译时仍用默认 20% 步长计算text-navy，深色模式下可能算出接近纯黑的值 - 正确做法：同时设置
$theme-color-interval: 15%，让明度偏移更精细，尤其对深蓝、深紫这类低明度基础色更友好 - 验证方法：编译后查 CSS 文件里
.text-navy的值，浅色模式下应是#00172d（约 15% 暗），深色模式下应是#a0b0ff（明显提亮） - 别在 HTML 里硬写
style="color: #xxx"覆盖——它绕过所有颜色系统，深色模式完全失效
真正难的不是记住哪一类该用哪个类名，而是理解每层类背后的设计意图：强调级（emphasis）、辅助级（secondary/tertiary）、背景级（subtle）各自承担不同的视觉权重任务，混用或跳级使用，轻则对比度崩坏，重则整页在深色模式下“消失”。
