需用工具验证对比度是否达标，WCAG 2.1 要求普通文字≥4.5:1、大号文字≥3:1；可借助 WebAIM 工具、VS Code 插件或 Chrome DevTools，并注意色值陷阱与设备实际显示效果。
怎么判断当前 CSS 颜色组合是否可读
浏览器
不会报错，但 WCAG 2.1 要求文本与背景的对比度至少为 4.5:1（普通文字）或 3:1（大号文字）。直接看
和
并不能直观判断——得算。可用在线工具如 WebAIM Contrast Checker，或在 VS Code 安装 “Color Highlight” 插件实时显示对比度数值。
常见陷阱：
和
看似灰度分明，实际对比度仅约 3.7:1，不满足 AA 标准；而
与
才真正达标（≈ 14:1）。
用 CSS
快速调高对比度（现代浏览器）
可以在声明时动态增强对比：比如把浅灰文字“拉向黑色”，同时保持语义不变。
把
混入 20% 黑色：
背景太亮？用
微调灰度，避免纯白刺眼
注意：Safari 16.4+、Chrome 111+、Firefox 119+ 支持；旧版需 fallback 到预计算好的高对比值
手动换算 RGB 时避开“等灰度陷阱”
人眼对绿色通道最敏感，所以同等数值的
和
，后者其实更易读——绿通道没被削弱。别只调 R/G/B 三个数一致。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
深色背景配字：优先降低 G 值（如
→
不如 →
醒目）
浅色背景配字：提高 G 值比提 R/B 更有效（
比
更清晰）
验证工具推荐：用 Chrome DevTools 的无障碍检查（Elements → Accessibility pane），它会直接标出对比度是否达标
要不要用 HSL 替代 RGB 来调色
可以，但要注意：HSL 的
是感知亮度近似值，不是物理亮度。比如
（浅灰）和
（纯绿）对比度可能只有 2.1:1——因为绿色在低光下视觉亮度更高。
实操建议：
先用 HSL 快速调整色相/饱和度，再切回 RGB 模式查真实对比度
对关键文案（按钮文字、表单标签），始终以 RGB 或十六进制值 + 对比度工具验证为准
避免用
这类极浅色配
极深色——看似反差大，但实际在 OLED 屏上灰阶压缩会导致细节丢失
对比度不是调得越高越好；超过 21:1 可能引发光晕效应，尤其对视疲劳用户。真正要盯住的是「在目标设备上、真实光照条件下是否可辨」——这比任何理论值都重要。
rgb(240, 240, 240)rgb(50, 50, 50)#eee#333rgb(255, 255, 255)rgb(33, 33, 33)color-mix()color-mix()color: rgb(180, 180, 180)color: color-mix(in srgb, rgb(180 180 180) 80%, black 20%)background-color: color-mix(in srgb, white 70%, #222 30%)rgb(100, 100, 100)rgb(80, 100, 80)rgb(255, 240, 240)rgb(255, 230, 230)rgb(255, 220, 240)rgb(40, 60, 40)rgb(60, 60, 60)lightnesshsl(0, 0%, 80%)hsl(120, 100%, 50%)hsl(0, 0%, 95%)hsl(0, 0%, 5%)