css无法自动感知背景色反色，需用mix-blend-mode（限分层结构）、color-scheme（系统级适配）、oklch()亮度预设或js计算对比度并切换class来实现。
background-color 变化时，文字颜色怎么自动反色？
纯 CSS 没法“感知”背景色并实时计算对比度，color 不支持基于 background-color 的条件表达式。所谓“自动反色”，本质是预设规则 + 有限适配，不是真 AI 感知。
最直接的路是用 mix-blend-mode: difference，但它只在特定叠层结构下生效，且对父容器有严格限制：
- 文字必须和背景处于**不同堆叠上下文**（比如文字在
position: relative层，背景在position: absolute层） - 父容器需设
isolation: isolate，否则混合模式会被截断 - 不适用于纯色背景块内嵌文字（如
<div style="background: #333"><span>text</span></div>），因为同层无法 blend
用 prefers-contrast 和 color-scheme 做系统级适配
如果你真正想解决的是深色/浅色模式切换时文字可读性问题，别硬算色差——交给浏览器。
color-scheme: light dark 告诉浏览器该元素支持双模式，配合 prefers-contrast 媒体查询可降级处理高对比需求：
body {
color: black;
background: white;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: #121212;
}
}
@media (prefers-contrast: high) {
body {
font-weight: bold;
}
}
注意：color-scheme 必须写在根元素（html 或 body），且只影响表单控件、滚动条等系统部件的默认样式，对自定义文字颜色无直接作用——但它是让整个页面响应系统主题的基石。
用 lch() 或 oklch() 手动控制亮度做“伪自适应”
现代 CSS 支持 lch() 和更精准的 oklch() 颜色空间，其中 L（亮度）值可独立调节。你可以把文字颜色固定为高/低亮度值，与背景形成天然反差：
- 背景偏暗（
L ）→ 文字用 <code>oklch(95% 0 0)（近白） - 背景偏亮（
L > 50）→ 文字用oklch(20% 0 0)（近黑） - 关键：你得提前知道背景的
L值——这只能靠设计约定或 JS 注入，CSS 自身无法读取
所以实际项目中，常见做法是定义两套 CSS 变量：
:root {
--bg-l: 90;
--text-l: 20;
}
.dark-theme {
--bg-l: 20;
--text-l: 90;
}
.text {
color: oklch(calc(var(--text-l))% 0 0);
background: oklch(calc(var(--bg-l))% 0 0);
}
JS 辅助计算对比度并切换 class 是最稳的方案
当背景色动态生成（比如用户上传图片、渐变、随机色块），必须用 JS 判断 WCAG 对比度是否达标。核心逻辑就一句：getContrastRatio(foreColor, backColor) > 4.5。
推荐用 chroma.js 或原生 rgbToLuminance + 公式计算，然后根据结果加类名：
- 避免每次重排都计算——只在背景变更后触发一次
- 不要用
getComputedStyle(el).backgroundColor读 rgba 字符串再解析，容易出错；改用el.style.backgroundColor或数据源直传 - 阈值别死守 4.5：标题可用 3:1，装饰性文字可放宽；但按钮文字必须 ≥ 4.5
一个最小可行示例：
function setTextColor(el, bgColor) {
const luminance = getLuminance(bgColor);
el.classList.toggle('text-light', luminance = 0.5);
}
真正难的不是算色差，而是决定“谁来负责这个判断”——CSS 想包揽，但能力有限；JS 能搞定，却要接管状态。多数项目卡在这一步，不是不会写，是没想清职责边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
