$min-contrast-ratio 默认值为4.5,仅在sass编译期被color-contrast()函数调用,通过yiq亮度模型静态计算背景色应配黑字或白字,不支持运行时响应css变量,修改后需重编译且仅影响所有显式调用color-contrast()的地方。
$min-contrast-ratio 是 bootstrap 5 sass 系统中控制文本可读性的关键阈值,默认值为 4.5(符合 wcag aa 标准)。它不直接暴露在 css 中,只在编译期被 color-contrast() 函数内部调用,决定一个背景色该配黑字还是白字。
color-contrast() 怎么用 $min-contrast-ratio 判断前景色
color-contrast() 不是“智能识别”,而是按固定算法算亮度差:先将输入色转为 YIQ 模型中的亮度分量 Y,再比较 Y 与 $black/$white 的对比度比值。只要 Y / $black-contrast 或 $white-contrast / Y ≥ $min-contrast-ratio,就选对应文字色。
这个过程完全静态——没有运行时检测,不看 DOM,不读 CSS 变量,只认编译时传入的纯色值。
- 传
color-contrast(#212529)→ 返回#fff(深灰背景配白字) - 传
color-contrast(#f8f9fa)→ 返回#212529(浅灰背景配黑字) - 若你传的是变量如
color-contrast($primary),那必须确保$primary是确定颜色值(如#0d6efd),不能是var(--bs-primary),否则 Sass 编译报错
改 $min-contrast-ratio 会影响哪些地方
修改 $min-contrast-ratio 后,所有通过 color-contrast() 生成的文字色都会重算。典型影响点包括:
-
.btn-primary的文字色(由color-contrast($primary)决定) -
.badge.bg-success的文字色 - 自定义主题色类(如
.bg-brand)的配套文字色,如果你写了color: color-contrast($brand) - 任何你在自定义 Sass 中手动调用
color-contrast($some-color)的地方
注意:$min-contrast-ratio 不影响 .text-* 类(如 .text-white),它们是写死的;也不影响基于 CSS 变量的 .text-body,后者靠的是 --bs-body-color 的手动设置。
为什么改了 $min-contrast-ratio 却没看到效果
常见失效原因不是函数没起作用,而是你没改对位置或没触发重编译:
- 必须在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前重定义$min-contrast-ratio,否则会被默认值覆盖 - 如果你用的是预编译 CSS(CDN 或 dist 文件),改 Sass 变量毫无意义——它早已编译完毕
- 某些构建工具(如 Vite + sass)缓存了
node_modules/bootstrap下的 Sass,需清缓存或重启 dev server -
color-contrast()返回的是具体颜色值(如#212529),不会生成 CSS 变量;想让它响应深色模式,必须配合 JS 手动 setProperty,Sass 层做不到
真正容易被忽略的点是:这个变量只在「你主动调用 color-contrast()」时才生效。Bootstrap 自身组件里用它的地方有限,大部分文本色其实来自 --bs-body-color 等语义变量——它们靠的是你手动配对更新,而不是自动计算。











