低饱和阅读色组方案(色导网方案库)
阅读页的配色目标和界面相反:它要让人忘记配色存在。所以这一套只有七个值,而且彼此的彩度都压得很低。
色卡
#F6F3EC
#FDFCF8
#2B2A28
#5F5C56
#39617E
#EDE8DC
#DCD6C8
三个刻意的选择
第一,底色不用纯白。纯白在亮环境下反射最强,长文阅读时眼睛更容易累;偏暖一点点的白还能让黑色文字的边缘看起来柔和。
第二,正文不用纯黑。纯黑配纯白的比值是 21:1,远超需要,代价是笔画边缘过锐、页面发硬。降到 #2B2A28 仍然远高于正文 AAA。
第三,链接色压低彩度。段落里的链接只需要「看得出来」,不需要「跳出来」——高彩度的蓝会把阅读节奏切碎。
实测对比度
| 文字/底色 | 用途 | 对比度 | 判定 |
|---|---|---|---|
| 正文墨/纸底 | 正文 | 12.94:1 | 正文 AAA |
| 正文墨/卡面 | 卡片里的正文 | 13.97:1 | 正文 AAA |
| 次级/纸底 | 图注与出处 | 6.01:1 | 正文 AA |
| 链接蓝/纸底 | 正文中的链接 | 5.95:1 | 正文 AA |
| 正文墨/引文底 | 引用块里的文字 | 11.73:1 | 正文 AAA |
排版上的配套
- 引文块靠底色区分,不要靠左侧粗竖线加大段缩进——竖线在手机上会挤掉行宽。
- 细线只用一级。页面上同时出现两种深浅的线,会看起来像没对齐。
- 代码块用卡面做底加细线描边,不要反白成深色——浅色长文里插一块深色会打断节奏。
CSS 自定义属性
:root {
--rd-paper: #F6F3EC;
--rd-card: #FDFCF8;
--rd-ink: #2B2A28;
--rd-sub: #5F5C56;
--rd-link: #39617E;
--rd-quote: #EDE8DC;
--rd-rule: #DCD6C8;
}