css无法实现真正的相对对比度算法，因其缺乏计算wcag对比度所需的线性srgb转换和亮度比值运算能力；必须依赖js运行时获取真实背景色并验证后设置合规链接色。
直接用 CSS 实现“相对对比度算法”生成链接颜色不可行——浏览器不提供原生函数计算 WCAG 对比度，color-contrast() 已被移除，relative-color() 和 color-mix() 仅能做亮度插值，不能替代真实对比度判断。
为什么不能靠 CSS 函数自动算出合规链接色
CSS 没有内置对比度计算能力。所谓“相对对比度算法”依赖 WCAG 公式 (L1 + 0.05) / (L2 + 0.05)，它需要先将颜色转为线性 sRGB、再算相对亮度 L，这一步无法用纯 CSS 表达。
-
color-mix(in lch, ...)只能混合两个已知色，不能根据背景动态“求解”一个满足 ≥4.5:1 的文字色 -
relative-color()能提取当前色的 L 值，但无法比较两个不同元素（如a和其父容器）的 L 差值 - 所有声称“CSS 自动选色”的方案，本质都是预设黑白二选一，或手动调权重（如
75% white, 25% background），不是真算法
真正可用的链接颜色方案：JS 运行时计算 + CSS 变量注入
只有 JS 能读取最终渲染的背景色（含渐变、filter、继承值），并调用合规算法输出文字色。关键不是“生成”，而是“验证后设置”。
- 用
window.getComputedStyle(linkEl).backgroundColor获取真实背景色（注意：若背景是渐变或图片，需 fallback 到父级 solid 色或预设值） - 用
@ctrl/tinycolor或chroma.js计算该背景与候选色（如#000、#fff）的 contrast ratio，选 ≥4.5:1 的那个 - 把结果写入
linkEl.style.color，同时更新 CSS 自定义属性（如--link-color）供伪类复用 - 监听
matchMedia("(prefers-color-scheme: dark)")和resize（防字体缩放影响渲染色），触发重算
降级策略：用 color-mix() + light-dark() 做近似保底
当 JS 不可用或未执行完时，CSS 层需提供可接受的默认表现。这不是“自动”，而是“合理预估”。
- 对固定背景色按钮/链接，用
color: color-mix(in lch, light-dark(white, black) 80%, var(--bg) 20%)—— 靠拉高白/黑权重提升安全边际 - 必须配合
@supports (color: color-mix(in lch, red, blue))包裹，旧版 Safari/Edge 会跳过整条规则 - 禁用状态（
a:disabled）不能只改opacity，要显式设color并重新验算，否则对比度常跌破 3:1 - 深色模式下，
light-dark(white, black)在 OLED 设备上可能不够亮，建议用color(display-p3 0.95 0.95 0.95)替代white
最容易被忽略的链接可访问性陷阱
链接常因交互态变化导致对比度失效，而开发者只测了默认态。
-
a:hover背景变深时，文字若仍用固定#fff，可能从 12:1 掉到 3.2:1（尤其在 #1a1a1a 上） -
a:focusoutline 若用outline: 2px solid #007bff，在深色背景上可能只剩 2.8:1，必须加outline-offset或改用box-shadow - 图标链接（如
@#@#@#@#@#@#@#@#@#@0）若无文字内容，color设置无效，需确保 SVG 的fill同样通过 JS 或 CSS 变量同步更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
