深色模式下的对比度需要重新计算而非沿用浅色模式数值
别名: 深色对比 · inverted palette contrast · color-scheme contrast
概念解释
浅色模式里过关的一对颜色,把背景换成深色之后,相对关系会翻转或塌掉。深色不是把浅色色板整体变暗,也不是把每对颜色对调一下就算完。深色模式的对比度要重算:每一对前景与紧邻背景都要在深色外观下重新取样,不能沿用浅色模式已经写进表格里的比值。
浅灰字在白底上失败,在近黑底上可能刚好过;品牌蓝按钮上的白字在浅色里过,放到深色里若按钮被改成更暗的蓝,白字比值会掉。沿用旧表会把这两种方向都判错。
机制
对比度是一对颜色的相对亮度差,不是颜色的绝对明度。换底等于换掉这一对里的一个成员,差必须重算。常见的「自动深色」是给浅色值乘一个系数或取反:乘系数之后,原来差得不够的一对可能更差,原来差得刚好的一对可能被压到阈值以下。人眼在深色背景上对小字的敏感也与浅色不同,同一比值在观感上并不对称——这是重算的第二层理由,不只是算术。
半透明叠层在深色里更危险。浅色里一层 8% 的黑蒙版叠在白底上几乎看不见;同样的黑蒙版叠在近黑底上等于没有。反过来,白蒙版在深色底上会洗掉对比。浅色验收过的透明度,到深色里是另一对像素。
怎么研究
同一套界面在 color-scheme 浅 / 深两套外观下取样每一对前景-邻色,做两列比值,标出「浅过深不过」和「浅不过深过」。不要把浅色列复制到深色列。
自变量:外观(浅 / 深)、是否用自动取反生成深色、半透明叠层是否保留原 alpha。 因变量:跨阈值的对数、两种方向的失败各有多少、自动取反相对手工重算的误差。
APCA 可以作为研究侧对照,观察深色背景上小字的不对称;符合性声明仍多按 WCAG 2.x 比值,两套都要在深色像素上重跑,而不是只跑浅色。把系统级「深色外观」和产品内主题开关分成两种条件,生成的像素不一定相同。
边界
用户把系统外观设成浅色、产品内强制深色(或反过来)时,要以实际生效的那套像素为准,不要假设两套开关方向一致。纯图、视频、嵌入的第三方浅色块不会跟着你的色板重算,它们在深色页上是一块浅色岛,对比要按岛的内部和岛与深色页的边界分别看。OLED 近黑与灰黑的绝对亮度不同,实验室显示器上的比值不能直接代表手机上的观感,但比值仍然是跨产品的可判定量。印刷品没有深色模式。
怎么落地
- 深色外观单独做一份对比验收,每对颜色重新取样;禁止把浅色比值表复制过来打勾。
- 不要用「全部取反」或统一乘系数生成深色文本与按钮;需要手工调对,尤其是品牌色按钮上的字、半透明叠层、禁用态。
- 产品内主题与系统外观不一致时,测实际生效的那一套,而不是测你以为用户会开的那一套。
- 验证:打开深色外观,对主路径上每对文字、图标、边框、按钮用取色器点渲染像素。浅色表上过、深色像素上不过的,以深色像素为准失败。