color-contrast()是CSS原生动态配色方案，依据WCAG标准从候选色中按序选取首个达标且对比度最高的文字色，不返回布尔值、不暴露计算过程，需配合@supports检测与合理fallback。
color-contrast() 是目前唯一能在纯 CSS 层面“自动检测背景色并选文字色”的原生方案，但它不判断“是否需要深色文字”，而是直接返回满足对比度标准的最优颜色——你不需要写 if、不用算亮度、也不用预设阈值。
color-contrast() 的真实行为：它不返回布尔值，只返回颜色
这个函数不是条件判断工具，不能用于生成 needs-dark-text: true 这类中间状态。它的工作流是固定的：给定一个背景色和一组候选文字色，按 WCAG 公式逐个计算对比度，挑出第一个达标且对比度最高的那个。
-
color-contrast(var(--bg) vs #000, #fff to wcag21/aa)—— 返回的是#000或#fff中的一个，不是true/false - 它不会告诉你“为什么选黑”，也不会暴露计算过程中的亮度值或对比度数字
- 如果所有候选色都不达标（比如
--bg: #888且只给#000和#fff），它会退回到第一个候选色（#000），**不报错也不警告**
必须配合 @supports 检测，否则在旧浏览器里会失效静默
Chrome 114+、Edge 114+、Safari 16.4+（需开启实验特性）才支持。未支持时，color-contrast() 会被整个忽略，属性值回退到初始值（通常是 inherit 或浏览器默认），文字可能完全不可读。
- 务必用
@supports (color: color-contrast(#000 vs #fff))包裹主逻辑 - fallback 内容不能只写
color: #000—— 要结合其他策略，比如预设的lightness()SCSS 变量或 JS 注入的--text-color - 别把
@supports写在组件内部反复声明；统一放在基础样式层，避免重复编译和维护碎片
候选色顺序决定结果，不是“最佳”而是“首个达标”
color-contrast() 不排序对比度高低再选，而是从左到右扫描，遇到第一个满足 to wcag21/aa 的就停。这意味着顺序直接影响输出。
-
color-contrast(#f0f0f0 vs #333, #000, #fff)→ 返回#333（即使#000对比度更高） - 若想优先保可访问性而非品牌色，把 WCAG 达标率高的放前面，比如
#1a1a1a和#f0f0f0比纯黑/白更稳妥 - 传入无效颜色（如
transparent、未定义变量、字符串）会导致整条声明被丢弃，CSS 解析器不报错但也不生效
真正难的不是调用 color-contrast()，而是确保 --bg 始终是已解析的合法颜色值——JS 动态注入时若传入 rgb(255, 255, 255, 0.5)，部分浏览器仍会拒绝计算；渐变、图片背景则完全不在它处理范围内。这些边界情况，得靠结构设计提前规避，而不是指望函数兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
