应使用深灰文字（如#212529）搭配微调色浅灰背景（如#f9f9f9），配合无障碍对比度检测与暗色模式适配，确保全场景可读性。
浅色背景上文字发灰看不清，color 值不够深
浅色背景（比如 #f8f9fa 或 white）下，如果文字用默认的 #333 甚至 #666，实际对比度常低于 WCAG 4.5:1 的可读门槛。浏览器里看着“差不多”，但阳光下、小字号或视力稍弱时就吃力。
- 别凭感觉调——用浏览器 DevTools 的无障碍面板（Accessibility tab）实时查
contrast ratio - 优先选语义明确的深灰而非纯黑：
#212529（Bootstrap 默认正文色）比#000更柔和且对比达标 - 避免用
rgba(0,0,0,0.7)这类带透明度的值：它依赖父级背景，换到非白色容器里对比会崩
background-color 太亮导致文字“浮”在上面
像 #ffffff、#fefefe 这类极致浅色会让文字失去“锚定感”，尤其配细字体时显得单薄。不是颜色不够深，而是背景缺乏层次。
- 把纯白换成带极微暖/冷调的浅灰，例如：
#f9f9f9（偏暖）、#f5f7fa（偏冷），视觉上更稳 - 对卡片类容器，加
border: 1px solid #e9ecef或轻微box-shadow: 0 1px 2px rgba(0,0,0,0.05)，靠边界强化文字落点 - 慎用
background-image: linear-gradient(...)叠浅色渐变——容易干扰文字边缘，尤其抗锯齿开启时
响应式场景下对比度突然失效
暗色模式切换、系统级高对比度设置、甚至 Windows 的“放大文本”功能，都可能让预设的 color/background-color 组合失效。
- 用
@media (prefers-color-scheme: dark)主动适配，但别只改背景——同步调整文字色，例如浅背景配#1a1a1a，深背景配#e9ecef - 关键文字（如按钮、链接）加
color-scheme: light dark，让浏览器自动微调表单控件颜色 - 测试时打开系统“高对比度模式”（Windows 设置 > 辅助功能 > 高对比度），观察是否所有文字仍可辨识
:root {
--text-primary: #212529;
--bg-surface: #f8f9fa;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e9ecef;
--bg-surface: #212529;
}
}
body {
color: var(--text-primary);
background-color: var(--bg-surface);
color-scheme: light dark;
}
真正卡住人的往往不是“怎么调颜色”，而是没意识到对比度是动态上下文问题——背景稍亮一点、字体稍细一点、环境光稍强一点，原来能看清的字就糊了。盯着 DevTools 的对比度数值调，比凭经验猜可靠得多。
立即学习“前端免费学习笔记（深入）”；
