WCAG 2.1要求普通文本对比度≥4.5:1，需用工具验证而非目测；避免opacity降背景色，深色模式与prefers-contrast需同步调整背景与文字色，hsl()变量可联动控对比度。
用 color 和 background-color 控制可读性底线
文字看不清，往往不是设计师没选好颜色，而是没验证对比度是否达标。WCAG 2.1 要求普通文本至少达到 4.5:1 的对比度比值，否则在弱光、小字号或视力受限场景下极易失效。
实操时别只靠眼睛判断——background-color: #f0f0f0 搭配 color: #333 看着“差不多”，但实际对比度只有约 3.8:1，不达标。
- 用浏览器插件（如 axe DevTools 或 Color Contrast Analyzer）实时检测 DOM 元素的对比度
- 在线工具推荐：WebAIM Contrast Checker，粘贴两个十六进制色值即可出结果
- 深色模式下尤其要注意：同一组
color/background-color在浅/深背景中可能一方合格、另一方不合格
避免用 opacity 降背景色来凑对比度
给半透明背景（如 background-color: rgba(0, 0, 0, 0.1)）加文字，看似柔和，实则危险：透明度会稀释背景色纯度，导致对比度骤降，且无法被自动化工具准确识别。
更稳妥的做法是直接换算等效不透明色值：
立即学习“前端免费学习笔记（深入）”；
-
rgba(0, 0, 0, 0.1)叠在白色背景上 ≈#e6e6e6（可用在线 RGBA 转 HEX 工具验证） - 再查
#e6e6e6与目标文字色（如#333）的真实对比度，通常不足 4.5:1 - 若必须用半透效果，优先降低文字透明度（
opacity: 0.9）而非背景，因文字色本身仍保持高饱和度
用 prefers-contrast 媒体查询适配高对比模式
部分系统（macOS、Windows）提供“增加对比度”开关，启用后会触发 @media (prefers-contrast: high)。这不是可选优化，而是辅助功能刚需。
典型误操作是只改文字粗细，忽略背景色重置：
/* ❌ 错误：只加粗，背景仍是浅灰 */
@media (prefers-contrast: high) {
p { font-weight: bold; }
}
/ ✅ 正确：强制提升背景与文字的分离度 /
@media (prefers-contrast: high) {
p {
background-color: black;
color: white;
font-weight: bold;
}
}
注意：prefers-contrast 目前仅支持 high 和 no-preference，不支持 low；且 Safari 对该特性支持较晚（≥ v14），需加 @supports 降级。
CSS 自定义属性 + hsl() 实现安全的色阶推导
手动维护多套明暗配色易出错。用 hsl() 配合 CSS 变量可让前景/背景色联动变化，确保对比度始终在线：
:root {
--base-hue: 210;
--base-sat: 80%;
--text-lightness: 20%;
--bg-lightness: 95%;
}
.text-primary {
color: hsl(var(--base-hue), var(--base-sat), var(--text-lightness));
background-color: hsl(var(--base-hue), var(--base-sat), var(--bg-lightness));
}
这样调整 --text-lightness 到 15% 或 --bg-lightness 到 98%，对比度自动变化，无需反复测值。但注意：HSL 的 lightness 并不线性对应感知亮度，深色系（lightness ）需额外验证。
真正难的是深色主题下的按钮悬停态——background-color: #1a1a1a 上叠加 color: #fff 是够的，但 hover 时若只调亮背景到 #252525，对比度反而从 15.6:1 掉到 13.2:1，人眼几乎看不出区别，却悄悄跌破了易读阈值。
