色彩学：高可读性配色对比度检查，杜绝门牌颜色之乱

前阵子新北市的门牌之乱相信大家仍记忆犹新，因为政治思考而自我受限的配色引来民众一阵挞伐，那还不如恢复早年使用的正蓝白配色呢。不过我得说，前十几年使用的绿白色并没有比较好，阳光下的绿色字体搭配白色背景其实一样很难辨识。

这些都是后话了，反正新北市政府已经从善如流暂停新门牌的更换，就看之后是否能记取教训让我们耳目一新。其实新北市政府大可趁这次机会，将总共 29 个辖区都以不同颜色表示，除了话题有趣外，也能加强区域民众的情感（如果嫌配色难，还可以搞组合式门牌让大家自己挑，毕竟就算不是每张门牌都显示地区跟路名也影响不大）。

哪种配色的门牌最显眼？

既然配色对比很重要，而现在又是屏幕世代，那是否有什么办法方便我们找出最显眼的适当配色呢？

答案是有的，除了对比度最高的单调黑白配以外，由美国麻省理工学院（Massachusetts Institute of Technology，MIT）发起的国际组织「全球信息网协会（World Wide Web Consortium，简称W3C） 」为了倡导无障碍网页设计，针对网页内容亲和力（又称网络无障碍，Web accessibility）发布了一份「网页内容无障碍设计指引（Web Content Accessibility Guidelines，简称 WCAG）」，当中已经规范色彩配色可读性的架构。

不过要读懂那些规范是网页设计高手们去做的事，我们只要有概念就好。现在网络工具发展非常发达，例如今天要跟大家介绍「WebAIM」提供的「Contrast Checker（对比检查器）」。用户只要在网站上填入背景色彩（Background Color）以及文字色彩（Foreground Color），系统就能快速计算出「Contrast Ratio（对比度分数）」，分数越高就代表越容易阅读！

官方网站：「WebAIM: Contrast Checker」。

请参考下图，我们以白色字体跟黑色背景进行测试，获得21分的高分（反过来测试也是一样）。21分同时也代表这套系统最高的评定分数，之后我们在做喜爱色彩的搭配组合测试时，就可以用这个分数当作最高标准。

网站还会针对「普通大小字体（Normal Text）」、「大字体（Large Text）」以及「图像式用户界面（Graphical Objects and User Interface Components）」进行分析，订定出「失败（Fail）」、「AA」到「AAA」级不等的评定。

只要能拿到全部 AAA 级的分数（对比度 7 分以上）就代表你的配色基本上具有相当高的网页亲和力。

接著我们用鹰眼观察网站的 Logo 颜色来做测试，背景为深蓝色的「005080」，文字色彩用鹰眼的鹅黄色「ffd51c」，得到对比度分数为 6.01 分（远目）。虽然离黑白配的21分相差快要四倍，不过其实还算是对比度不错的分数，从下图可以看到可读性评比达到四个 WCAG AAA 级。

嘛，悄悄声说，Logo 的对比度在普通字体的 WCAG AAA 级竟然被判定为失败 FAIL（泪）！后来稍微调整，发现只要把蓝色背景加深到「004570」，就能获得全部 WCAG AAA 级的 7.09 高分。回头立马改！