WCAG 2.1要求常规文本对比度≥4.5:1，否则影响视障、老年及强光用户；需用DevTools实测，深色模式、半透明、currentColor等场景均须单独验证并手动校准。
颜色对比度低于4.5:1时文字根本看不清
WCAG 2.1规定，常规文本（小于18pt或粗体小于14pt）的前景色与背景色对比度必须≥4.5:1，否则大量用户——尤其视障、老年或强光环境下使用者——会跳过甚至误读内容。浏览器开发者工具里的“Contrast ratio”检测值不是参考值，是硬门槛。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
Chrome DevTools → Elements → Color Picker点击任意文本色块，直接查看实时对比度数值；低于4.5就标红警告 - 别信“灰色看着挺清楚”，
#999在#fff上对比度仅2.06:1，远低于标准 - 深色模式下同样要验算：比如
#333在#121212上只有2.7:1，得换成#e0e0e0或更亮的灰 - 按钮文字、图标辅助文本、表单占位符（
::placeholder）全都要单独测，它们常被忽略
用 color-contrast() 函数自动 fallback 到合规色值
CSS 的 color-contrast()（目前仅 Safari 16.4+ 和 Chrome Canary 支持）能根据背景色动态选最可读的前景色，比手写一堆 @media (prefers-color-scheme) 更可靠。但它不是万能的——不支持渐变背景，也不处理半透明叠加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
color: color-contrast(white vs black, #333, #666, #999);表示在 white/black 背景下，从三个候选色中挑对比度最高的一个 - 必须配合
background-color显式声明，不能依赖继承或父级渐变——color-contrast()不解析background-image - 降级方案要写在前面：
color: #333; color: color-contrast(...);，老浏览器直接忽略函数用回退色 - 别拿它替代语义化颜色命名，比如
--text-primary仍应指向一组经过人工校验的合规色值
半透明遮罩层（rgba()）会让对比度计算失效
很多设计师用 rgba(0,0,0,0.7) 盖在图片上再放白字，以为“够黑就行”。但实际对比度取决于最终渲染出的混合色，而人眼对半透叠加的感知和算法计算结果常有偏差——工具算出来 4.8:1，现场一测可能只剩 3.2:1。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
DevTools → Rendering → Emulate vision deficiencies开启“deuteranopia”或“low contrast”预览，比纯数字更直观 - 避免在图片/视频上直接叠
rgba()文字；改用 solid 色块 +backdrop-filter: blur()或加一层同色系不透明遮罩（background: linear-gradient(to bottom, #0008, #0008)） - 如果必须用透明，用
getComputedStyle(el).color在控制台手动取渲染后色值，再用在线工具如 WebAIM Contrast Checker 重新验算 -
opacity影响整个元素，包括子元素边框和图标，比rgba()更难控对比度，尽量不用
系统级暗色模式切换时，currentColor 可能意外失效
当用 currentColor 作为 SVG 图标或边框色，并依赖 :root { color: #333; } 统一控制时，一旦用户开启系统暗色模式且 CSS 未覆盖 :root 的 color，图标就会跟着变成深色，在深色背景上直接消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远显式设置
:root在两种模式下的color：@media (prefers-color-scheme: dark) { :root { color: #e0e0e0; } } - SVG 内联图标慎用
fill="currentColor"，优先用fill="var(--icon-color)"并配好两套变量 -
border: 1px solid currentColor在按钮上很常见，但暗色模式下若color没同步更新，边框就看不见了——检查所有用了currentColor的地方 - 不要假设“系统暗色 = 黑底白字”，iOS 和某些安卓定制系统会用深灰（
#121212）配浅灰字（#e0e0e0），得按实际值验
对比度不是调个色相饱和度的事，是像素级的数值约束。工具报绿≠真可用，现场多开几个设备、不同光照下扫一眼，比盯着 4.51:1 和 4.49:1 的毫厘之差实在得多。
