在构建无障碍Web界面时，文本与背景之间的颜色对比度是一项不可忽视的核心指标。Bootstrap 5的Sass系统内置了一个关键变量来把控这一标准：$min-contrast-ratio。其默认值为4.5，这一数值并非随意设定，而是严格遵循了WCAG AA级无障碍规范。
不过，这个变量相对“隐蔽”。它并不直接暴露为CSS属性，而是在Sass编译过程中，被一个名为color-contrast()的内部函数悄然调用。它的职责非常明确：根据传入的背景色，静态判断应当搭配黑色文字还是白色文字，从而确保足够的可读性与视觉清晰度。
color-contrast() 的工作机制：一次静态的亮度裁决
你可能会好奇，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（浅灰背景搭配黑色文字） - 如果你传入的是一个Sass变量，比如
color-contrast($primary)，你必须确保$primary是一个具体的颜色值（例如#0d6efd）。如果它指向一个CSS变量如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-white 或 .text-dark 这样的工具类，它们的颜色值是写死的。同样，基于CSS变量的 .text-body 类也不受影响，因为它依赖的是手动设置的 --bs-body-color 变量。
为什么修改后可能看不到效果？
有时候，明明修改了变量值，但页面上却毫无变化。问题通常不出在函数本身，而在于修改的位置或编译流程。以下是几个常见的“陷阱”：
- 时机不对：你必须在
@import "bootstrap/scss/functions"之后，并且在@import "bootstrap/scss/variables"之前，重新定义$min-contrast-ratio。否则，你的自定义值会被Bootstrap默认的变量值覆盖。 - 用错了文件：如果你直接使用的是编译好的Bootstrap CSS文件（比如通过CDN引入），那么修改Sass变量是毫无作用的，因为颜色早在编译阶段就已经确定好了。
- 构建工具缓存：像Vite这类工具，可能会缓存
node_modules下的Sass模块。修改后需要清除缓存或重启开发服务器才能生效。 - 静态计算的局限：
color-contrast()返回的是一个具体的颜色值（如#212529），它不会生成一个可以动态响应的CSS变量。这意味着，如果你想让它适配深色模式，无法单纯依靠Sass，而需要借助JavaScript来动态设置属性。
最后，还有一个根本性的认知点：这个变量只在你主动调用 color-contrast() 的地方生效。Bootstrap自身的组件中，使用这个函数的地方是有限的。实际上，项目中大量的文本颜色来自于像 --bs-body-color 这样的语义化CSS变量——它们的颜色搭配，需要你手动维护和更新，而不是靠这个函数自动计算。
