CSS如何处理颜色过暗导致的阅读困难

暗色背景下文字发灰应先查背景LCH亮度值，按“背景L+55”确定文字最低L值（如背景L≈20→文字L≥75），再转为去色灰白如rgb(220,220,220)；hsl()调色需同步微调S至12%–18%避免发闷，H±5°避开补色颤动；::selection须显式声明color与background-color并配合color-scheme确保系统级适配。

暗色背景下文字发灰，先查LCH亮度值再调色

直接改rgb()或hsl()数值容易反复试错，因为人眼对明暗的感知不线性。正确做法是用LCH色空间定位背景真实亮度（L值），再按“背景L + 55”原则推算文字最低L值。比如背景是#2d2d2d，实测L≈20，那文字L至少得75——对应rgb(220, 220, 220)这类去色灰白，比硬写rgb(255, 255, 255)更耐看、OLED屏上边缘更干净。

只调hsl()的L值不够，S和H必须同步微调

把深灰文字从hsl(0, 0%, 30%)提亮到hsl(0, 0%, 42%)后，常出现“发闷”或“泛黄”感。这是因为L单独提升会放大原有饱和度缺陷：

• 深色文字L升到40%以上后，若S仍为0%，视觉重量不足，建议略提S至12%–18%，增强辨识力
• 浅色文字配偏蓝/紫背景时，H值接近补色区间（如背景H=240，文字H=60），易产生颤动感，微调文字H±5°可避开冲突
• 所有调整后必须开DevTools灰度模式验证：如果文字在灰度下仍清晰，说明亮度差真够了

::selection在暗色模式下失效，是因为没显式声明color和background-color

系统切暗色后，::selection不会继承父元素color，浏览器默认用黑字叠深蓝背景，结果就是看不见。必须同时写：

button::selection {  color: #e2e8f0; /* 至少L=90，不是#94a3b8 */  background-color: #4a5568; /* 避免rgba()，Safari渲染不稳定 */}::-moz-selection {  color: #e2e8f0;  background-color: #4a5568;}

注意：button和input默认user-select: none，写了也无效；局部覆盖时作用域要精确，比如pre code::selection才影响代码块内文字，pre::selection会连行号一起高亮。

立即学习“前端免费学习笔记（深入）”；

背景色太暗不是颜色问题，是饱和度和对比关系崩了

深色按钮看不清，往往不是背景不够黑，而是饱和度太高或周围视觉分量没重估：

• 深色背景饱和度超过15%，尤其带红/橙倾向时，会抢文本注意力，降到5%–10%更稳
• 暗色模式下gap、border-color、box-shadow的明度权重全变了，不能沿用亮色模式的值——比如亮色时border-color: #e2e8f0，暗色下得换成hsl(210, 8%, 30%)，否则边框会“消失”
• 必须在:root加color-scheme: light dark，否则@media (prefers-color-scheme: dark)只盖表层，原生控件（滚动条、input光标）仍按系统默认逻辑渲染

真正卡住人的地方，从来不是“怎么调颜色”，而是忘了暗色模式下整个视觉系统的权重都重分配了——文字、边框、阴影、甚至透明度叠加，全都得按新上下文重新校准。