WCAG 2.1要求普通文本对比度≥4.5:1（大号文本≥3:1），需用Chrome DevTools或contrast-ratio.com验证；常见错误如#333/#f8f8f8（仅3.7:1）、纯黑#000配纯白#fff易致疲劳，hsl/rgb忽略alpha、暗色模式未适配、!important覆盖系统设置等均会破坏可访问性。
如何判断一对 color 和 background-color 是否满足可读性标准
WCAG 2.1 要求普通文本的对比度至少为 4.5:1，大号文本（≥18pt 或 ≥14pt 加粗）可放宽至 3:1。浏览器不自动校验这个值，得靠工具或计算。手动算太麻烦，推荐用 Chrome DevTools 的无障碍检查（Elements → Accessibility 面板），或在线工具如 contrast-ratio.com 输入十六进制色值实时验证。注意：不要只看“看着舒服”，深灰字配浅灰背景（比如 #555 on #eee）常低于 4.5，实际已违规。
color 与 background-color 在 CSS 中的常见错误组合
这些组合在真实项目里高频出问题：
-
#333文字配#f8f8f8背景 —— 对比度仅约 3.7:1，小字号下吃力 - 纯黑
#000字配纯白#fff背景 —— 看似最安全，但高亮度差易致视觉疲劳，尤其长文阅读 - 使用
hsl()或rgb()时忽略 alpha 通道影响 —— 比如rgba(0, 0, 0, 0.7)叠在半透背景上，实际对比度会动态变化，难预估 - 响应式中未适配暗色模式 —— 白底黑字切到暗色模式后变成黑底黑字，直接不可读
实用配色策略：从系统级到自定义
优先复用经过验证的组合，而非凭感觉调色：
- 系统默认文本/背景：用
color: CanvasText+background-color: Canvas（CSS 原生系统色），自动适配亮/暗模式 - 深色主题稳妥方案：文字用
#e2e8f0（接近 SlateGray），背景用#1e293b（SlateBlue-900），对比度稳定在 7.2:1 - 需要品牌色时，用工具反推——输入主色（如品牌蓝
#2563eb），用getContrastColor()类函数生成可配对的文字色（通常为白或浅灰） - 禁用
!important强行覆盖用户系统设置（如 Windows 高对比度模式），这会直接破坏可访问性
暗色模式下 color 与 background-color 的声明顺序关键点
很多人以为写个 @media (prefers-color-scheme: dark) 就完事，但顺序和 specificity 决定是否生效：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：在常规样式后声明，且选择器权重一致 */
.text {
color: #1e293b;
background-color: #f1f5f9;
}
@media (prefers-color-scheme: dark) {
.text {
color: #e2e8f0;
background-color: #1e293b;
}
}
/ ❌ 错误：权重更低，或被前面规则覆盖 /
.text.dark {
color: #e2e8f0;
}
.text {
color: #1e293b; / 这条会压倒上面那条 /
}
更稳妥的做法是用 prefers-color-scheme 配合 CSS custom properties 统一管理，避免重复声明。另外，background-color 别设为 transparent 后依赖父级背景——父级可能没设色，导致不可控的叠加效果。
