色导网中文配色工作台与色彩资料馆

低饱和阅读色组方案(色导网方案库)

阅读页的配色目标和界面相反:它要让人忘记配色存在。所以这一套只有七个值,而且彼此的彩度都压得很低。

本方案的全部颜色

色卡

#F6F3EC

纸底

页面底色。暖白,长时间阅读比纯白舒服。

白底 1.11:1墨底 15.68:1

在对比度工具中检查

#FDFCF8

卡面

正文容器,比纸底亮一点,形成极弱的层次。

白底 1.03:1墨底 16.93:1

在对比度工具中检查

#2B2A28

正文墨

正文色。不用纯黑,减少边缘锐利感。

白底 14.34:1墨底 1.21:1

在对比度工具中检查

#5F5C56

次级

图注、日期、引文出处。

白底 6.66:1墨底 2.61:1

在对比度工具中检查

#39617E

链接蓝

链接色。彩度低,不会在段落里跳出来。

白底 6.59:1墨底 2.64:1

在对比度工具中检查

#EDE8DC

引文底

引用块背景,比纸底深一档。

白底 1.22:1墨底 14.21:1

在对比度工具中检查

#DCD6C8

细线

分隔线与表格线。

白底 1.45:1墨底 12.00:1

在对比度工具中检查

三个刻意的选择

第一,底色不用纯白。纯白在亮环境下反射最强,长文阅读时眼睛更容易累;偏暖一点点的白还能让黑色文字的边缘看起来柔和。

第二,正文不用纯黑。纯黑配纯白的比值是 21:1,远超需要,代价是笔画边缘过锐、页面发硬。降到 #2B2A28 仍然远高于正文 AAA。

第三,链接色压低彩度。段落里的链接只需要「看得出来」,不需要「跳出来」——高彩度的蓝会把阅读节奏切碎。

实测对比度

比值按 WCAG 2.1 相对亮度算出,门槛为正文 4.5:1、大字 3:1、正文 AAA 7:1。
文字/底色用途对比度判定
正文墨/纸底正文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;
}