设计技巧——色彩与无障碍设计

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

对于市场部门和设计师来说，这个话题可能非常棘手。我收到过很多已经获批的设计方案，但最终却发现其新品牌的配色方案不符合无障碍标准。有时，我们的客户或机构会爱上他们的新品牌和设计，要求他们更改品牌或设计，实际上就相当于要求他们放弃刚刚爱上的全新形象。讽刺的是，客户的服务说明书（SOW）中通常都有无障碍要求，但设计师却不知道他们使用的颜色不符合无障碍标准。

经验法则

我们可以更深入地探讨一下细节，而且我们也会这样做。然而，无论从技术角度还是非技术角度来看，谈到颜色时都有一条重要的经验法则：不要依赖颜色来传达含义。

这里有很多技术方面的内容我可以聊，但我们还是来谈谈色彩和它在美国这项全民运动——橄榄球——中的意义吧。2015年，NFL发起了一项名为“色彩冲击”（Color Rush）的活动，旨在庆祝联盟首场彩色比赛播出50周年。听起来是不是很有趣？

接下来是喷气机队对阵比尔队的比赛，这对当时患有红绿色盲的 1300 万美国人来说简直是一场噩梦。

这是红绿色盲人士观看比尔队对阵喷气机队比赛时的画面pic.twitter.com/TAjoQpOfCj

— kurt (@kurtwearshats) 2015年11月13日

最终，你的设计或许在你看来惊艳绝伦，但对用户而言却可能令人无比沮丧。尤其当你使用颜色来传达含义时，这种情况更为严重。

适当的对比度

根据美国国立卫生研究院国家眼科研究所的数据，高达8%的北欧血统男性和0.5%的北欧血统女性患有常见的红绿色盲。然而，色彩对比度并非仅对色盲患者重要。老年人、视力衰退者，甚至在阳光下使用移动设备浏览网页的人，都可能受到色彩对比度的影响。

随着视力下降，我每天都忍不住咒骂那些使用灰色字体的混蛋网页设计师。

——一位寻求庇护者的儿子，一位移民的父亲 (@doctorow) 2017年9月15日

上面的推文让我笑出了声，主要是因为我还算年轻（29岁），视力2.0，戴眼镜只是为了在电脑前缓解眼疲劳。以前我也错过过灰色背景上的灰色链接。

那么，合适的对比度是多少呢？合适的对比度是：大号文本 3:1，小号文本 4.5:1。我第一次看到这些标准时，心想：大号和小号到底是什么意思？这难道不是主观判断吗？！其实，他们确实给出了定义。大号文本是指大于 14 磅（通常为 18.66 像素）且加粗的文本，或者大于 18 磅（通常为 24 像素）的文本。小于 18 磅的文本则称为小号文本。

可使用的工具

1. WebAim 对比度检查器。说实话，我根本不会手动检查色调和对比度。这远远超出了我的分析和艺术能力。但为了评估对比度，我使用这个对比度检查器。我只需输入前景色（文本颜色）和背景色的十六进制值，它就会告诉我对比度是多少。我喜欢它的另一个原因是，如果你正在调整颜色对比度，你可以将其调整得更亮或更暗，从而在保持品牌一致性的同时，确保你的颜色使用是可以接受的。

2. 颜色对比度分析器。我喜欢用这个工具来分析背景图像与文本的对比度。确保图像对比度合适一直是个难题。自动化工具通常无法解决这个问题，因为它们只会查找背景的十六进制值，而不会分析图像本身的色调和对比度。我对它最大的不满是它不会明确告诉你分析是否通过，而且我花了好长时间才弄明白怎么用。不过，总比没有强！

3. NoCoffee 视觉刺激器。这款工具本身并非用于对比，而是帮助您评估您的网站在各种不同视力障碍患者（例如色盲和白内障患者）的浏览效果。至少，它是一款非常实用的工具，有助于培养同理心并确保网站的包容性。

如何开始评估你的品牌

虽然我不是设计师，工作流程也和设计师不太一样，但我曾与设计师Raquel Breternitz合作设计了这套配色方案和我的 logo。效果非常好，我想和大家分享一下我们是如何携手打造一个易于访问的设计的。

当然，因为我的博客是关于无障碍设计的，所以我对这些要求非常坚持且明确，这或许并非所有客户都会如此。不过，Raquel 会问一些我认为很正常的问题，比如我的品牌、我的信息是什么、我想强调哪些品牌元素和个性等等。我们还有一个 Pinterest 画板，用来集思广益地讨论配色方案，然后我会从中挑选我最喜欢的。我对设计师如何与客户合作了解不多，但我猜想这大概就是普遍规律，尽管 Pinterest 画板可能更适合个人而非机构使用。

我选定自己喜欢的配色方案后，她提供的成品更是超出了我的预期。她给了我大约五六种颜色，并将它们与文字和背景进行多种组合。对于每一种组合，她都会告诉我它的对比度是多少。这让我确信我使用的所有颜色都具有合适的对比度，并且运用得当。如果您想查看我们讨论过的一些示例，可以下载这些配色方案。免责声明：配色方案PDF中的图片素材/灵感图片均来自Pinterest。

如何说服客户改变品牌

很多时候，我们开发人员无法直接与项目的设计师合作。我经常遇到这种情况：我被孤立在设计师之外，无法向他们提供反馈或提出我的问题。我只是被告知要按照设计稿去做。

当遇到色彩对比度不佳的问题时，该如何沟通？说实话，这方面我至今仍感到棘手，而且确实不容易。我们不想冒犯设计师，也不想指责他们无视了工作说明书的要求。无论在个人场合还是工作场合，指责他人通常都是不合适的。我倾向于认为无障碍设计中的缺陷通常是无意的。然而，有时设计师明明设计出了无障碍界面，客户却提出了不无障碍的要求，而且当设计师或开发人员指出对比度问题时，客户也置之不理。

当客户降低对比度时，我会采取以下几种措施。首先，如果他们的工作说明书 (SOW) 中有相关要求，我可以先说明这是我们的要求，并且出于法律和商业原因，我们有充分的理由坚持这些要求。无论他们的工作说明书中是否包含无障碍设计，我都会向他们解释这对最终用户意味着什么，而不是使用“WCAG 2.0”或“第 508 条款合规性”之类的专业术语。即使在联邦政府部门，使用专业术语也无助于客户理解这对他们的最终用户意味着什么。

就颜色对比度而言，这取决于受众。如果我面对的是热爱足球的听众，我非常喜欢用上面提到的足球例子。至少，他们能够理解，如果看不清哪支球队达阵、哪支球队掉球、谁拦截了谁的传球，会是多么令人沮丧。如果把这个例子和网络联系起来，我通常会这样解释：我们希望确保无论能力如何，每个人都能区分不同的元素。

我计划多写一些关于色彩的文章，因为我个人觉得视觉感知的科学原理非常有趣。希望这篇文章是个好的开始。如果您有任何问题，欢迎随时在推特上联系我。