浏览器无法自动识别深浅背景，所谓自动适配实为人为设定亮度阈值（如luminance>0.5），需借助color-mix()或hsl()+calc()模拟，但css无法动态读取背景色，故仅适用于预设可控背景；真自动需js计算亮度并切换class，css仅负责样式定义。
background-color深浅怎么影响文字色判断
浏览器本身不识别“深色背景”或“浅色背景”，所谓自动适配，本质是人为定义一个亮度阈值（比如 luminance > 0.5），再据此切换文字颜色。CSS 没有内置的 luminance 函数，但可以用 color-mix() 或 hsl() + calc() 模拟——前提是背景色是已知的、静态的，且用的是支持现代函数的格式（如 hsl()、lab()、oklab()）。
常见错误是直接对 rgb(42, 130, 218) 做算术运算，这没意义：RGB 通道权重不同，简单平均会误判。真正可用的亮度近似公式是 0.299 * R + 0.587 * G + 0.114 * B，但 CSS 里没法动态读取当前 background 的 RGB 值——所以「自动适配」只在背景色可控、可预设的前提下成立。
用color-mix() + calc()做对比度切换
color-mix() 是目前最贴近需求的原生方案，它能按比例混合两种颜色，并支持指定色彩空间。配合 calc() 可构造基于亮度的插值逻辑，但注意：它不能读取运行时背景，只能用于你「提前知道背景倾向」的场景，比如主题色变量。
- 必须用支持的色彩空间，推荐
oklab（感知均匀，亮度分离明确）或lch -
color-mix(in oklab, var(--bg) 70%, black 30%)不是“检测深浅”，而是“按固定比例偏移亮度”，适合微调而非二值切换 - 真要黑白二选一，更稳妥的是用 CSS 自定义属性配合 JS 设置，或用两个 class 分别定义深/浅模式
示例（仅当 --bg 是 oklab() 格式时有效）：
立即学习“前端免费学习笔记（深入）”；
body {
--bg: oklab(0.7 0.1 0.2);
background-color: var(--bg);
color: color-mix(in oklab, var(--bg) 20%, white 80%);
}
hsl() + calc()手动模拟亮度阈值
如果背景色是你自己定义的变量（如 --primary-h: 210, --primary-s: 70%, --primary-l: 60%），那可以用 hsl() 提取明度通道，再用 calc() 做条件映射——虽然不是真条件语句，但能实现“明度高就用黑字，低就用白字”的效果。
-
--primary-l必须是 0–100 范围内的数值（不能带%单位，否则calc()会报错） -
calc((var(--primary-l) - 50) * -1)这类写法不能直接控制颜色，只能生成中间值；最终仍需用color-mix或两套 class 切换 - 安全做法：定义
--text-light: #1a1a1a和--text-dark: #f0f0f0，再用color: calc(var(--primary-l) > 50 ? var(--text-light) : var(--text-dark))——但注意：CSS 目前不支持三元运算符，这行会失效
所以实际能跑通的，还是靠预设两套值 + JS 或媒体查询驱动，calc() 在这里只是辅助计算中间参数，不是控制分支的开关。
为什么不用 JS 更简单，却还要折腾 CSS？
因为有些场景 JS 不可靠：比如 SSR 页面首屏渲染、打印样式、禁用 JS 的环境，或者组件库需要纯 CSS 的主题切换能力。这时候硬编码两套 class（如 .bg-blue-50 / .bg-blue-900）并配好对应文字色，比强求 CSS “智能判断”更稳。
容易被忽略的一点：color-contrast() 函数已在 CSS Color Level 5 草案中，但目前仅 Safari 技术预览版部分支持，Chrome/Firefox 尚未落地。别在生产环境依赖它。
真要“自动”，现阶段最务实的做法是：用 JS 读取 getComputedStyle(el).backgroundColor，算 luminance，再设 class；CSS 只负责定义好 .text-on-light / .text-on-dark 规则。把判断交给 JS，把呈现留给 CSS，各干各的活。
