<p>动态计算可读文字色的核心方案是：用CSS变量分离HSL的亮度值--bg-l，通过clamp(0, var(--bg-l) - 44, 1)生成明暗开关，结合calc()控制hsl(0 0% calc(100% * (1 - clamp(...))))实现黑白字自动切换，并兼容prefers-color-scheme上下文。</p>
background-color怎么动态算出可读的文字色
直接用 color-mix() 或 contrast() 不行——它们还没进主流浏览器。真正在用的方案是：CSS 变量 + HSL 色相偏移 + 亮度判断，配合 clamp() 控制阈值。
核心逻辑不是“算对比度”，而是“把背景转成灰度后看亮不亮”：亮背景配黑字，暗背景配白字。人眼对亮度敏感，比纯 RGB 差值靠谱得多。
-
--bg-hsl必须传 HSL 三元组（如210 80% 65%），不能只传 hex 或 rgb，否则没法抽亮度 - 别用
lch()或oklch()做判断——Safari 17.4 才开始支持lch()，且计算开销大，实测滚动时掉帧 - 亮度提取靠
hsl(var(--bg-hsl) / 0.1)这类写法无效，必须拆成三个变量：--bg-h、--bg-s、--bg-l
用 calc() 和 clamp() 判断明暗分界点
亮度值（L）在 HSL 中是 0–100，50 是中性灰。但人眼觉得“够暗”的临界点其实是 42–46，不是 50。用 clamp(0, var(--bg-l) - 44, 1) 得到一个 0/1 开关更稳。
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-h: 210;
--bg-s: 80%;
--bg-l: 65%;
--text-color: hsl(0 0% calc(100% * (1 - clamp(0, var(--bg-l) - 44, 1))));
}这里 clamp(0, var(--bg-l) - 44, 1) 输出 0（暗背景）或 1（亮背景），再乘 100% 控制黑白切换。注意 calc() 里不能混单位——44 是纯数字，var(--bg-l) 是带 % 的值，要提前归一化或统一单位。
- Chrome 115+ 支持
clamp()里的 CSS 变量，旧版需 fallback 到 JS 计算 - 如果
--bg-l来自 JS 动态注入，确保它始终是整数+%，比如65%，不是65.234%，否则 Safari 可能解析失败 - 别用
min()/max()替代clamp()，它们不接受三参数，语义不同
深色模式下 prefers-color-scheme 和变量冲突怎么解
用户开了系统深色模式，但页面背景色由 JS 设置为浅蓝（--bg-l: 92%），此时文字按规则该用黑色，但和深色模式整体违和。不能简单覆盖 prefers-color-scheme，得让变量“感知上下文”。
解法是加一层条件变量：
@media (prefers-color-scheme: dark) {
:root {
--sys-is-dark: 1;
}
}
:root {
--sys-is-dark: 0;
--text-color: hsl(0 0% calc(100% * (var(--sys-is-dark) + (1 - clamp(0, var(--bg-l) - 44, 1)) * (1 - var(--sys-is-dark)) ))));
}这段逻辑意思是：系统深色时强制白字（除非背景极暗），否则按原亮度规则；但若背景本身就很暗（--bg-l < 44），即使系统深色也允许黑字避免过曝。
- 别用
@media (prefers-color-scheme: dark) { :root { --bg-l: 20%; } }覆盖原始变量——会破坏 JS 对背景色的控制权 -
--sys-is-dark必须定义在@media外做默认值，否则未匹配媒体查询时变量未定义，calc()直接失效 - Firefox 对嵌套
calc()+ 变量的支持弱，超过两层就可能退成 initial，建议把逻辑拆到 JS 做一次预计算再注入 CSS 变量
为什么不用 JavaScript 直接 setStyle
因为重排触发太频繁：背景色可能来自 scroll、resize、input 甚至 IntersectionObserver，JS 每次改 style.color 都强制同步计算 layout，卡顿明显。
- CSS 变量 +
calc()是纯渲染层运算，GPU 可加速，滚动中无感 - 但前提是变量更新必须用
element.style.setProperty()，不能用element.style.color = '...'，后者绕过变量链 - 如果背景色来自渐变（
linear-gradient），CSS 无法取亮度，必须 JS 提前算好 L 值并注入变量，别指望getComputedStyle读 gradient 后再解析
最麻烦的是多层嵌套组件共享同一套主题变量时，父组件改了 --bg-l，子组件的 calc() 不会自动 re-evaluate——得靠 new MutationObserver 监听 style 属性变化，或者干脆放弃纯 CSS 方案，在关键节点用 JS 触发 requestAnimationFrame 强制刷新。
