必须通过计算相对亮度比值判断颜色对比度是否符合WCAG标准：小字号文本AA级需≥4.5:1、AAA级≥7:1，大字号可放宽至3:1和4.5:1；该比值基于人眼感知公式，非RGB差值。
怎么快速判断一对颜色是否满足WCAG AA/AAA对比度要求
靠肉眼或设计师直觉不行，必须算数值。WCAG 2.1规定：文本与背景的相对亮度比值，AA级至少 4.5:1（小字号常规文本），AAA级要 7:1；大号文本（≥18pt 或 ≥14pt 加粗）可放宽到 3:1（AA）和 4.5:1（AAA）。这个比值不是简单看RGB差值，而是基于人眼感知的相对亮度公式计算出来的。
实操建议：
- 开发阶段用浏览器插件（如 axe DevTools、Color Contrast Analyzer）实时检测，右键检查元素就能看到当前对比度及是否达标
- CI/CD中可集成
contrast-ratio这类npm包，在构建时扫描CSS变量或内联样式，自动报出不合规组合 - 别信“灰色配白色看起来挺清楚”，
#999和#fff实际对比度只有3.6:1，不满足小字AA标准
CSS里用 color-scheme 和 prefers-color-scheme 时对比度容易翻车在哪
系统深色模式切换后，很多开发者只改了背景色，忘了同步调整文字色——比如把 background-color: #1e1e1e 配上没变的 color: #333，结果黑底灰字对比度跌到 2.1:1，直接不可读。
实操建议：
- 永远成对定义：深色模式下，前景色必须更亮（如
#e0e0e0），不能沿用浅色模式的暗色值 - 用
@media (prefers-color-scheme: dark)重置所有文本相关属性，包括color、border-color、placeholder等，别只动background -
color-scheme: light dark声明在根元素上只是告诉浏览器“我支持”，不自动修复对比度，该算还得算
用 CSS 自定义属性（--color-text）管理颜色时，怎么避免对比度失控
把颜色抽成变量本意是方便维护，但一旦多个组件共用同一组变量，又没按场景区分语义，很容易出现按钮文字用 --color-text、而按钮背景也用 --color-text 的“自相残杀”情况。
实操建议：
- 变量命名带对比意图：比如
--text-primary-on-light、--text-primary-on-dark，而不是笼统叫--text-primary - 背景色变量也需配套：有
--bg-surface-light就该有--bg-surface-dark，且两者分别与对应文字色做过对比度验证 - 在CSS预处理器（如Sass）里写个
contrast-check($fg, $bg)函数，编译时报出低于4.5的组合，比上线后才发现强
为什么用 hsl() 或 lch() 调色比 rgb() 更靠谱
rgb() 是设备色域模型，R=100, G=100, B=100 看似中间灰，实际相对亮度约 0.32（非线性sRGB），而人眼对蓝光不敏感，纯靠调RGB数字很难稳控明暗关系。LCH色彩空间把亮度（L）、色度（C）、色调（H）彻底解耦，调L值就等于调明度，对比度控制更直接。
实操建议：
- 设计系统里优先用
lch(30% 20 280)这类写法定义基础色，L值明确标出（0%黑→100%白），方便做等差亮度阶梯 - Chrome 111+ 已原生支持
lch()，Firefox 121+ 也跟进了，不用转成rgb()兜底（除非还要兼容IE或旧安卓WebView） - 如果必须用
hsl()，注意lightness不等于相对亮度——hsl(0, 0%, 50%)是灰，但对比度不保证，得额外验证
真正难的不是算出一个合规值，而是让整套UI在任意主题、任意组件嵌套层级、任意缩放比例下，都持续满足对比度约束。工具能帮一时，机制才能保全程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
