如何快速找到一个配色方案
世界上总有一些事情是需要一些视觉设计的。拿我最近要做的一些事情来举例子,做幻灯片、绘制论文中的图表、制作海报以及装修自己的主页的时候,有一些设计总是比没有好。设计的过程中,字体的选择相对简单,多做几次这种事情,慢慢地就能攒下一套组合起来可以用在各种场合的字体。排版一事尽管深究起来也有很多细节,但是只要遵循一些基本的原则,比如对齐、留白、对比、统一等,效果无论如何也不会差。唯有配色方案的选择往往是最让我头疼的部分。
选择配色方案的标准
所谓配色方案并不是在搜索引擎上随便搜出一套或者一个生成器就可以了。这种搜出来的配色方案大部分都只是一组色块和 RGB 值, 可能乍看起来还不错,但是对于我这种非专业人士来说很难直接应用到实际的设计中去。这只是单纯的颜色的集合,而不是真正可以直接使用的配色方案。对我来说,所谓配色方案应该符合这些标准:
- 明确地定义了颜色的用途,比如背景色、文字色、强调色等;
-
在定义了颜色用途的基础上,达到一定的无障碍标准,这包括:
- 文字和背景之间有足够的对比度;
- 色盲友好;
配色方案从哪里来
经过数次无果的尝试以后我决定不在搜索引擎上浪费时间了。我的灵感出现在一天我盯着自己的 Emacs 看的时候。那时我突然意识到,代码编辑器的配色方案可以说是完美的解决方案,这是因为它们:
- 颜色的用途非常明确;
- 主要颜色的数量通常不会太多;
- 每个代码编辑器都有巨量的配色方案可供选择;
- 这些配色方案通常是经过精心设计的而非随机生成的;
- 许多配色方案满足一定的无障碍要求;
- 在代码编辑器里就可以体验到这些配色方案的效果;
- 和自己的日常工作流有一种视觉上的统一感。
唯一需要顾虑的就是版权问题;尽管颜色本身不受版权保护(至少就我所知),但是为了避免不必要的麻烦,还是应该尽量使用那些明确标注了允许使用的配色方案。
如何测试
Palette Tester 是一个用来测试配色方案对比度的工具,可以在 WCAG 2.1 (AA) 或者 APCA Contrast 标准下测试配色方案的对比度。Coloring for Colorblindness 和 Who Can Use 是两个用来测试颜色的色盲友好度的工具,可以展示同一组颜色在不同色盲类型人群眼中的效果。
我的选择
我在 Emacs 中一直使用的是 Modus Themes 配色方案。巧的是,这个配色方案在设计的时候就考虑到了无障碍问题,达到了 WCAG AAA 标准,提供了对两种色盲类型(绿色色盲和黄色色盲)友好的变种。你现在正在看的这个网页的配色方案就来自于 Modus Themes 的 tinted 变种。