页面「看起来挺高级」，打印出来或投到亮屏上，链接却找不到。常见原因是强调色选了浅金、浅粉、浅灰，再铺在浅背景上。这不是品味问题，是对比度不够。
两条线
- 正文和小字（低于约 18px 粗体 / 24px 常规）：对比度 ≥ 4.5:1
- 大标题、图标：≥ 3:1
公式用相对亮度，不是「差了多少 RGB」。#C5A880 铺在 #F3F5FB 上大约只有 2.1:1，当链接用等于没画。
在浏览器里验
Chrome DevTools → 选中文字 → Styles 面板色块旁会标对比度。也可以自己算：
js
function luminance(hex) {
const n = hex.replace("#", "");
const rgb = [0, 2, 4].map((i) => {
const c = parseInt(n.slice(i, i + 2), 16) / 255;
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
});
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}
function contrast(a, b) {
const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
return (l1 + 0.05) / (l2 + 0.05);
}
contrast("#3557C8", "#F3F5FB"); // ≈ 5.75，正文能过换色时的经验
浅色背景：强调色往「更深、更饱和」走，不要往浅香槟走。 深色背景：强调色往「更亮」走，石板灰 #64748B 当链接大约 3.4:1，图标勉强，正文不够。
同一套品牌色要准备 一对：浅色模式一个，深色模式一个。只维护一个 hex，总有一边会挂。
不只是链接
placeholder、禁用按钮、opacity: 0.4 的辅助说明，经常在换肤之后掉到 3 以下。输入框边框也要能看出来，WCAG 对非文字控件是 3:1。
测对比度的时机是选色当时，不是上线以后用用户当检测器。