文字发灰主因是屏幕色域、亮度、对比度及环境光差异，非颜色值问题；应优先保障明度对比、采用LCH/OKLCH色彩空间、用@media适配屏幕特性，并确保WCAG对比度达标。
文字颜色在不同屏幕发灰，通常不是颜色值本身有问题，而是屏幕色域、亮度、对比度及环境光差异导致的视觉感知变化。单纯用 rgba() 调整透明度并不能“修复”发灰——反而可能让文字更模糊、对比度更低。真正有效的做法是：优先保证足够高的明度对比（尤其对可访问性），再结合色彩空间与设备特性做适配。
别滥用 rgba() 模拟“加深”效果
很多人发现纯黑文字（#000）在 OLED 屏上太刺眼，就改成 rgba(0,0,0,0.9) 以为能柔化，结果在 LCD 屏上反而显得发灰、发虚——因为半透明黑色会和背景色混合，降低实际对比度。
- 文字不是图片，不建议靠透明度“调色”
-
rgba(r,g,b,a)中的 a 值越低，文字越依赖背景色，越容易在浅色/复杂背景下失效 - 若背景非纯白（比如带纹理、微渐变），透明文字极易出现边缘发毛、辨识度下降
用相对明度（LCH / LAB）替代 RGB 直接调色
RGB 是设备相关色彩模型，同一组数值在不同屏幕渲染差异大。改用基于人眼感知的 LCH（或 OKLCH）定义文字色，能更稳定地控制“看起来多深”：
- 例如：
oklch(25% 0.01 240)表示“较暗但不纯黑”的蓝灰，比rgba(30,30,30,1)在多屏下更一致 - 现代浏览器已支持 OKLCH（Chrome 112+、Safari 16.4+、Firefox 121+）
- 可用在线工具如 OKLCH Color Picker 可视化调整明度（L）和彩度（C）
为不同屏幕类型提供条件式颜色方案
利用 CSS @media 查询识别常见显示特性，针对性优化：
Web Accessibility (WCAG 2 AA))
下载
将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。
立即学习“前端免费学习笔记（深入）”；
-
@media (dynamic-range: high)→ 针对 HDR 屏，可用稍高明度文字避免过曝 -
@media (color-gamut: p3)→ P3 色域屏，可放心使用更饱和的深灰（如color(display-p3 0.1 0.1 0.1)） -
@media (prefers-contrast: high)→ 尊重系统高对比设置，强制用纯黑/纯白文字
基础保障：始终满足 WCAG 最小对比度
发灰感常源于对比不足。AA 级要求文本与背景对比度 ≥ 4.5:1（小字）或 ≥ 3:1（大字）。别只看设计师给的 HEX 值——用工具实测：
- 浏览器 DevTools 的无障碍检查（Accessibility Panel）可实时验算对比度
- 推荐插件：axe DevTools 或 Color Contrast Analyzer
- 背景是图片或渐变时，取最差区域采样，而非平均色
基本上就这些。发灰不是玄学，是明度、色域、对比度和渲染逻辑共同作用的结果。少动透明度，多控明度与对比，再辅以渐进式色彩适配，文字就能在各种屏幕上稳得住、看得清。
