浏览器不报错但可访问性失效，Chrome DevTools“Accessibility”面板标红提示对比度不足；实际表现为屏幕阅读器忽略文字，文字“看不见但存在”；需用color-mix()、明度控制和微阴影等手段确保稳定可读。
颜色对比度不达标时浏览器会怎么表现
当 color 和 background-color 的对比度低于 WCAG 2.1 规定的 4.5:1（普通文本）或 3:1（大号文本），部分浏览器不会报错，但屏幕阅读器可能忽略文字，Chrome DevTools 的「Accessibility」面板会标红提示 contrast ratio below required value。这不是样式失效，而是可访问性失效。
- 用 Chrome 开发者工具 → 「Elements」→ 右侧「Accessibility」标签页实时查看当前对比度数值
-
background-color: #f8f9fa搭配color: #6c757d的对比度仅约 2.8:1，实际网页中属于“看不见但存在”的灰色文字 - 深色模式下别直接反转色值——
background-color: #1a1a1a配color: #e0e0e0看似合理，实测对比度仅 3.3:1，仍不满足正文要求
用 CSS color-mix() 动态生成高对比背景色
Chrome 111+、Safari 16.4+ 支持 color-mix()，它能按指定比例混合前景色与背景色，反向推导出满足最低对比度的背景色，比手动试错快得多。
- 想让
color: #0066cc在任意背景上都清晰？先固定文字色，再用color-mix(in srgb, #0066cc 20%, black)得到一个压暗版背景基底 - 更稳妥的做法是绑定到系统色：
background-color: color-mix(in srgb, currentColor 15%, white);—— 文字越深，背景越白；文字越浅，背景自动偏灰 - 注意 Safari 对
color-mix()中currentColor的解析有延迟，首次渲染可能闪动，建议配合transition: background-color 0.1s
避免“伪高对比”：饱和度与明度必须同时控制
只调高色相差异（比如红配绿）不等于视觉清晰。人眼对明度差最敏感，饱和度过高反而引发眩光。真正有效的对比来自明度阶梯，不是色环距离。
- 用
hsl(0, 80%, 50%)（鲜红）配hsl(120, 80%, 50%)（鲜绿）——色相差120°，但明度相同，实际阅读困难 - 正确做法：保持一方明度≤30%，另一方≥70%。例如
color: hsl(210, 90%, 15%)（深蓝） +background-color: hsl(0, 0%, 95%)（近白灰） - CSS 中可用
filter: brightness(0.8)临时压低背景明度，但会降低性能；优先用原生hsl()或lab()定义颜色
深色模式下背景色不能只靠 @media (prefers-color-scheme: dark) 切换
单纯切换 background-color 值，容易导致文字在深灰背景（如 #121212）上依然发虚。关键是要重算整个对比链：背景 → 衬底色 → 文字色 → 强调色。
立即学习“前端免费学习笔记（深入）”；
- 不要写：
background-color: #121212; color: #e0e0e0;—— 这组值在 OLED 屏上易出现泛光，且对比度仅 3.7:1 - 推荐组合：
background-color: #1a1a1a; color: #ffffff; text-shadow: 0 0 2px rgba(0,0,0,0.3);—— 微阴影强化边缘，弥补低对比损失 - 若用 CSS 自定义属性，把明度值抽成变量：
--bg-lightness: 95%; --text-lightness: 10%;，深色模式下改为--bg-lightness: 8%; --text-lightness: 92%，再通过hsl(210, 20%, var(--bg-lightness))统一生成
color-mix() 这类新能力，本质是把设计师的直觉判断，转成可复现的计算逻辑。 
