如何设置暗色模式CSS及选择颜色，满足多场景对比度要求

核心基准：以最严苛场景为校验核心 #

安卓手机屏幕调暗时，系统会压低全局亮度并调整色彩曲线，原本达标对比度的配色组合可能在低亮度下失效。所有配色需优先以手机调暗后的低亮度场景为校验标准，同时覆盖桌面、手机正常亮度场景。

具体颜色选择规则 #

1. 文本与背景的对比度底线 #

• 遵循WCAG 2.1 AA级标准：正常文本（≥18pt或粗体≥14pt）对比度≥4.5:1；大文本（≥24pt或粗体≥18pt）≥3:1。
• 针对安卓调暗场景，将底线提升10%-15%：正常文本按≥5:1选取，低亮度下人眼对对比度感知会下降，预留冗余空间能避免失效。
• 拒绝依赖系统自动暗色转换，手动指定暗色模式下的文本、背景色，避免系统生成色在低亮度下翻车。

2. 背景色选择 #

• 弃用纯黑色（#000000）：安卓调暗时，纯黑会与周围元素的对比度被过度压缩，改用深灰系（如#121212、#1A1A1A），这类颜色在低亮度下保留足够层次感，与亮色文本的对比度更稳定。
• 避免带高饱和度色调的背景：深紫、深蓝这类颜色在低亮度下亮度值会被进一步压低，导致对比度波动极大，优先选无彩色深灰。

3. 文本与交互元素颜色选择 #

• 文本优先用纯白色（#FFFFFF）或近纯白浅灰（#F5F5F5）：两种颜色在三类场景下亮度值稳定，与深灰背景的对比度始终达标。
• 交互元素（按钮、链接）：避开淡蓝这类低饱和度亮色，调暗后会近乎不可见。改用高亮度、中低饱和度颜色（如#42A5F5亮蓝、#FFCA28亮黄），这类颜色在三种场景下亮度值变化小，对比度稳定。
• 禁用状态元素：用#666666这类中灰，别用过浅灰色，调暗后会与背景融为一体。

4. 校验方法 #

• 手动模拟安卓调暗场景：在安卓显示设置里把屏幕亮度降到最低，开启暗色模式直接预览页面效果。
• 颜色对比度工具计算：输入选中的背景色和文本色，模拟低亮度下的亮度衰减（如背景色亮度降20%、文本色降10%），确认对比度仍达标。
• 覆盖主流安卓机型：不同品牌屏幕调校差异大（如三星AMOLED、小米LCD），尽量测试多款机型。

避坑提醒 #

• 关闭动态对比度：部分系统或浏览器的动态对比度会自动调整颜色，导致设计失效，在CSS中明确指定color-scheme: dark并锁定颜色值。
• 避开渐变背景：渐变在低亮度下会出现色阶断层，且文本在渐变不同区域的对比度可能不达标，优先用纯色背景。

内容的提问来源于stack exchange，提问作者rwitzel