UI界面设计中，关于色彩对比度测试的五大误区

随着用户体验设计行业的越发成熟，很多设计也越来越需要确保用户UI界面对所有用户都做到易于访问。特别是在照顾残障人士的需求上至关重要，但是仍有许多设计师却对色彩对比的测试和可访问性持有很深的误解。甚至常常重复这些谬论来贬低设计，却不了解色彩对比标准在哪些场景下适用。下面随着我们维好维可设计一起看一下关于色彩对比度测试的五大误区。

误区一：教条性遵守WCAG标准
WCAG 要求是最佳的 Web 内容无障碍指南 ( WCAG ) 是一套用于确定无障碍色彩对比度的原则。然而，这些指南在实际应用中并不总是100%适用。我们认为与其教条地遵循这些规则，倒不如用利用规则来指导你的设计决策，而不是强加于人。 首先，WCAG 标准中不适用的一个情况就是：白色文本的亮度对比度。下面两个按钮都是橙色背景，但一个按钮是白色文本，另一个是黑色文本。当你调查用户哪个按钮更易于阅读时，大多数人会告诉你白色文本的按钮更易读。但可访问性色彩对比度测试结果却相反。



黑色文本的对比度为4.92，符合要求。然而，白色文本的对比度为 2.57，不符合要求。根据对比度要求，白色文本的按钮应该可读性较差，但实际上它的可读性更强。 在另外一项类似的研究比较了白色和黑色按钮文本，证实了这一发现。不仅视力正常的用户发现白色文本更容易阅读，色盲用户也同样如此。

白色文本对比度不达标的原因是，白色文本本身亮度高，并且背景亮度也高。浅色背景上的浅色文本在计算上会呈现低对比度。你的设计应该满足人们所看到的，而不是计算算法。


误区二：UI界面组件的对比度标准与文本必须一致？
许多设计师会错误地将UI界面组件的对比度标准与文本保持一致，但实际上它们之间存在很大差异。UI界面组件的对比度为 3:1，而文本的对比度为 4.5:1。所以文本需要更高的对比度，因为用户需要花更多时间进行文本阅读。而UI界面组件则不需要阅读，所以标准也更低。

再比如，有许多细微的差别也会影响文本对比度，例如：字体大小和粗细。较大的文本大小（18 pt）和较粗字体（14 pt 加粗）需要的对比度也相对较低。不仅如此，某些UI界面组件甚至不受此要求的限制。在将UI界面组件或文本设定为对比度标准之前，请确保在正确的场景下能正确的应用该标准。


误区三：文本必须满足 AAA 要求，否则无法访问？
WCAG 的无障碍合规性级别各不相同，很多设计师自认为所有文本都必须符合最高级别要求 (AAA)，否则很大一部分用户将无法访问。这种观点是可笑的，记住你是设计师，不是程序员，如果你还是认识不到自己的错误，请你转行做程序员。

只要了解 AAA 要求的制定过程，就会明白这一点。 AAA 要求对比度达到 7:1，以补偿视力损失为 20/80 或以上的低视力用户的对比敏感度损失。这些用户中的许多人使用具有对比度增强功能的辅助技术。他们需要这项技术，因为他们在使用网络时，不仅仅是在单个界面上浏览内容，而是在多个界面上浏览内容。AAA 要求仅适用于不使用辅助技术的 20/80 视力损失用户，他们是一个较小的群体。

在普通人群中，视力下降至20/80的情况并不常见，主要影响患有与年龄相关的眼部疾病的老年人。一项研究发现，大多数低视力与衰老有关。大多数拥有健康眼睛的用户在70岁时视力开始下降。如果您的用户群中大多数年龄在70岁或以上，那么满足部分AAA要求可能会对他们有益。WCAG不建议满足所有AAA要求，因为对于某些内容来说这是不可能的。 满足AA要求对大多数用户来说已经足够了。AA要求的对比度为4.5:1，以补偿视力丧失（20/40）的用户的对比敏感度损失。一项研究发现，“大多数人到八十多岁仍然至少保持良好的视力（20/40或更高） 。” 这项发现表明，满足AA要求将使您的文本能够被大多数用户轻松理解。

误区四：灰色文本和按钮难以访问
许多人认为用户无法阅读灰色文本，因为它看起来对比度低，但是事实上并不一定如此，例如：灰色按钮上的文本，有些人会认为它难以阅读。然而，用对比度检查器检查后发现，它不仅符合AA标准，而且对比度远高于标准。特别是对于禁用按钮，因为禁用按钮本身就是灰色的，很多设计师不理解非活动性UI组件的正确含义，禁用按钮是通过与文本标签缺乏对比度来表示的。当按钮难以阅读时，用户就不会费心去操作它，这正是禁用按钮的目的所在，所以对比度要求并不适用于非活动性UI组件。

误区五：色盲用户无法区分对比色
如果设计使用颜色对比来传达信息，色盲用户将不会注意到其中的差异。色调和颜色对比度是两个不同的维度。色盲用户难以区分特定的色调，但他们却能感知颜色对比的差异，色盲用户可以相当清楚地区分对比色。

最后，很多时候即使你遵循了所有 WCAG 要求，也难以做出舒适的用户界面，因为无障碍设计无法满足所有用户的需求，真正理解无障碍设计的设计师会去努力平衡，结合不同设计场景下进行灵活设计，而不是教条式遵守，因为设计过程中要考虑的因素太多，比如品牌营销，有时候品牌色就是高亮的，从品牌学的角度看，品牌大于一切。记住你是设计师，你不是程序员，如果你还是傻傻的搞不清楚，请转行。