浅色模式背景色:为什么 #FFFFFF 不够用,以及该用的 8 种颜色
全白的屏幕没有地方表现层次。改用这个浅色模式背景色(白色卡片后面放 #F2F2F7),搭配更柔和的文字色、更深的强调色,以及可以直接交给开发的 8 个色值。
最好的浅色模式背景色不是 #FFFFFF。把页面放在 #F2F2F7 这样的柔和灰色上,把白色留给上面的卡片,这样各个表面才有可以“浮起来”的底。下面讲讲全白屏幕为什么会失败、三个修正办法,以及可以直接交给开发的八种颜色。
为什么全白的屏幕会显得扁平
大多数设计师做浅色模式时,第一步就是把所有东西刷成白色。这是每个设计工具的默认填充色,也是每个浏览器的默认背景,所以感觉很“中性”。其实不是。这恰恰是唯一一个让你无法表现深度的选择。
卡片必须和它所在的页面看起来不一样。当两者都是 #FFFFFF 时,能用来区分它们的只剩边框或阴影,于是这两个细节被迫承担全部工作。再多加几张卡片,屏幕就变成一堆轮廓线的网格。
深色模式早就解决了这个问题。在那里,越亮的表面代表越高的层级,每一层都比下面一层亮一档。我们的文章 深色模式色彩系统 讲了这条色阶,深色模式设计 讲了调色板的其余部分。浅色模式在白色之上没有更亮的一档,所以需要换一招:把地板降低。
修正 1:页面从 #F2F2F7 开始
页面和卡片都是 #FFFFFF
页面 #F2F2F7,卡片 #FFFFFF
#F2F2F7 是 iOS 放在分组列表后面的那种灰。它是浅色模式下 Apple 的 system gray 6,Apple 自己的指南也建议分组表视图使用分组背景色。设置 App 就是经典例子:淡灰色页面,白色行。
这一个改动就给了你地板和天花板。页面是地板,卡片和面板是天花板,两者之间的落差不用画一条线就能看见。
适用位置:
- 页面背景,所有包含卡片、列表或分区的屏幕。
- 分组列表和设置页,行是白色,间隙是灰色。
- 白色卡片内部的输入框,可以用页面灰,让它们看起来是凹进去的。
如果你的屏幕只是一整篇白色长文,没有任何卡片,白色就没问题。这条规则是给由多个表面构成的界面用的。
修正 2:让阴影来托起层级
在深色模式里,层级高度靠更亮的颜色表达。在浅色模式里,表面保持白色,阴影变大。静止的卡片用小而柔和的阴影;浮在其上的菜单或对话框用更大、更柔的阴影。
两个习惯能让效果看起来对:
- 用你的墨色给阴影染色,不要用纯黑。 与文字同色的阴影(原帖用的是 #1B1530,一种深紫罗兰色)看起来是界面的一部分。纯黑看起来像一块污渍。
- 越大代表越高。 用一个四档的小色阶,从小到大,把每一档对应一个用途:卡片、抬起的卡片、菜单、对话框。然后永远不要发明第五档。
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
灰色页面让这一切成立。在白色页面上,柔和的阴影几乎看不见,所以人们只好用更深的阴影或边框来补救。在 #F2F2F7 上,浅阴影就够了。
修正 3:柔化你的黑,再加深你的强调色
在白色或接近白色的页面上使用纯 #000000 文字,比必要的更刺眼,还会让旁边其他所有颜色显得无力。Material 3 把它的浅色文字调得更柔和了一档。
文字
次要文字
禁用,38%
- #1D1B20 用于文字。它是 Material 3 的 on-surface 颜色,近乎黑色,带一丝紫罗兰,在白色和灰色上都很协调。
- #49454F 用于次要文字,比如说明、辅助提示和时间戳。依然容易阅读,又明显比正文安静。
- 同一墨色的 38% 用于禁用的标签和图标。在白色上它会变成 #A9A8AA,Material 用的正是这个不透明度。禁用文字是唯一低对比度恰恰是目的的地方,WCAG 也对其豁免。
强调色需要相反的修正。一个在深色屏幕上很好看的明亮浅色品牌色,放到白色上就消失了。
白色上的浅色强调色
白色上的深色强调色
#BB86FC 是 Material 深色主题的基准紫。放在白色上它几乎消失,而对于必须被识别为按钮或链接的元素,这是个问题。
#6200EE 是 Material 浅色主题的基准紫,同一家族,足够深,撑得住场面。构建浅色主题时,不要沿用深色主题的强调色。从同一色相里选更深的那一档。
8 种浅色模式颜色
点击任意色块即可复制色值。
| 角色 | 值 | 用途 |
|---|---|---|
| 底色 | #F2F2F7 | 页面,位于卡片和分组列表后面 |
| 卡片 | #FFFFFF | 卡片、面板、菜单、行 |
| 分隔线 | #E5E5EA | 行与行之间的线。不用于输入框边框 |
| 文字 | #1D1B20 | 标题和正文 |
| 次要文字 | #49454F | 说明、辅助文字、时间戳 |
| 禁用 | #A9A8AA | 禁用的标签和图标(38% 不透明度的文字) |
| 主色 | #6200EE | 按钮、链接、选中状态 |
| 错误 | #B00020 | 错误文字、边框和图标 |
#E5E5EA 是 iOS system gray 5,适合做分隔线,因为分隔线只需要被注意到,不需要被阅读。输入框边框需要的更多。我们的文章 占位符与标签 给出了应该改用的边框颜色。
把这些交给你的开发
同样的八种颜色,写成 CSS 自定义属性:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
如果你同时提供深色主题,请在 @media (prefers-color-scheme: dark) 下给这每个名称再设一个值,就像 深色模式 token 映射 里那样。名称不变,只换值,这样浅色模式才不会沦为“反色的深色模式”。
“容易看见”背后的数字
原帖说了“容易看见”和“很难看见”。为了让在评审中为这个选择辩护的人有据可依,这里是数字(WCAG 2 对比度,基于白色计算):
| 配对 | 对比度 | 结论 |
|---|---|---|
| #FFFFFF 上的 #1D1B20 文字 | 17.1 比 1 | 远高于 4.5 比 1 的最低要求 |
| #FFFFFF 上的 #49454F 文字 | 9.3 比 1 | 用作次要文字很舒适 |
| #FFFFFF 上的 #A9A8AA 禁用 | 2.4 比 1 | 豁免,禁用本来就该安静 |
| #FFFFFF 上的 #BB86FC | 2.65 比 1 | 低于按钮形状所需的 3 比 1 |
| #FFFFFF 上的 #6200EE | 7.63 比 1 | 容易看见 |
还有一个值得知道的事实:Material 3 自己的浅色 surface 也不是 #FFFFFF,而是 #FEF7FF,一种几乎察觉不到的带色白。就连大多数团队当作默认的设计系统,也没有把屏幕刷成纯白。
FAQ
浅色模式最好的背景色是什么?
页面用 #F2F2F7 这样的柔和浅灰,上面的卡片用 #FFFFFF。灰色给白色表面提供了可以突显的底,所以你需要的边框和阴影更少。
#FFFFFF 是不好的背景色吗?
不一定,但全白的屏幕没有办法表现深度。卡片会融进页面,边框和阴影被迫承担全部工作。白色最适合用作表面的颜色,而不是整个屏幕的颜色。
#F2F2F7 是什么?
它是浅色模式下的 iOS system gray 6,是 Apple 在设置 App 等分组列表后面使用的灰色。Apple 建议分组表视图使用分组背景色。
白色背景上应该用什么文字颜色?
文字用 #1D1B20 这样柔和的近黑色,次要文字用 #49454F。两者都是 Material 3 的颜色,在白色和 #F2F2F7 上都很易读。
浅色模式下如何表现层级高度?
用阴影。在深色模式里,更亮的表面意味着更高,但浅色模式在白色之上没有更亮的一档,所以表面保持白色,阴影随高度变大。
强调色应该在浅色和深色模式之间变化吗?
应该。像 #BB86FC 这样的浅色强调色适合深色屏幕,但在白色上几乎消失。在浅色表面上,请使用同一色相更深的一档,比如 #6200EE。
来源
- Apple Human Interface Guidelines,Color:#F2F2F7 在浅色模式下是 systemGray6(R242 G242 B247),分组背景色用于分组表视图。
- Material 3 颜色角色,取自 androidx Compose 的 ColorLightTokens 和 PaletteTokens:on surface #1D1B20(Neutral10),on surface variant #49454F(NeutralVariant30),浅色 surface #FEF7FF。参见 Material color roles。
- 禁用标签和图标的 0.38 不透明度来自 Material 3 组件 token。#1D1B20 在 #FFFFFF 上 38% 不透明度的结果是 #A9A8AA。
- #BB86FC 和 #6200EE 是 Material 的基准深色和浅色主色。#B00020 是 Material 的基准浅色错误色。#E5E5EA 是浅色模式下的 iOS system gray 5。
- WCAG 2.2, 1.4.3 Contrast (Minimum) 和 1.4.11 Non-text Contrast。比率使用 WCAG 相对亮度公式计算。禁用文字不受最低要求约束。
- 阴影墨色 #1B1530 和四档阴影是我们自己的建议,不是平台数值。
- 最初以轮播图形式发布于 UX Brainy。
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
