了解色彩与无障碍

📱 一个建议

🔖 留置权

👶 新喀里多尼亚的域名？

在提升应用程序的易用性方面，颜色选择起着至关重要的作用！从对比度到信息传达，再到为用户提供可选主题，让我们一起来看看如何优化颜色选择，使其尽可能地易于访问！

色彩对比

在为各种用户界面元素选择颜色时，务必确保符合无障碍色彩对比度标准。《Web 内容无障碍指南》(WCAG)定义了三个级别的色彩对比度：不合格、AA 级和 AAA级。AA 级表示颜色对比度足以辨识，但可能仍会给部分用户带来阅读困难。AAA 级表示对比度极高，绝大多数用户都能清晰阅读。您应始终以 AAA 级为目标，但确保不不合格也是一个良好的开端。

尤其是在文本与背景颜色对比度不足的情况下，阅读起来会异常困难——对于视力欠佳的用户来说，这个问题会更加严重。更不用说，用户还可以对显示进行各种调整，例如夜间模式、亮度、显示器校准等等——所有这些都会对颜色产生影响，而这些影响完全不受您的控制。为了确保您的应用在所有这些情况下都能保持可访问性，最好的方法之一是关注颜色对比度，并确保其符合 WCAG 标准，这样您就有一定的调整空间来应对这些特殊情况。

幸运的是，这非常容易做到，因为只需在谷歌上搜索“颜色对比度检查器”，就能轻松找到各种颜色对比度分析工具。我个人最喜欢的是Adob​​e Color 辅助功能工具，它能很好地展示不同颜色对比度情况下的示例，还能模拟不同程度的色盲，让你看到你的调色板在不同视力用户眼中的效果。

价值

你可能已经熟悉色彩对比度，甚至明白它们为何如此重要——但你知道它们背后的色彩理论是如何运作的吗？

当我们谈论色彩对比时，我们主要指的是明度值的比较。明度值指的是颜色的明暗程度——它决定了天蓝色和藏青色之间的区别。你可以通过三种方式改变颜色的明度值：添加白色来创建淡色调，添加灰色来创建深色调，或者添加黑色来创建暗色调。当两种不同颜色的明度值过于接近时……就会出现对比度问题。有些颜色（例如亮橙色或亮红色）尤其难以实现高对比度，因为它们的明度值恰好位于光谱的中间位置——很难通过调整明度值来有效地与它们形成对比。

检查对比度（并直观地查看效果）的一个绝佳快捷方法是将显示模式转换为灰度模式。灰度模式会去除色调信息，只显示亮度值。如果灰度模式下文字难以阅读或布局难以理解，则很可能存在需要解决的颜色辅助功能问题。

通过颜色传递信息

无障碍设计和色彩运用的另一个重要方面是确保不要仅仅通过颜色来传达任何信息。不幸的是，这很容易成为一个危险的陷阱——尤其是在表单、数据可视化和确认/取消对话框等领域。

事实上，我们来看一些表单的例子。你见过多少次表单会将输入框的边框颜色变成红色来表示验证失败？这样做本身并没有错……只要你同时添加一些图标、文字或其他元素来提示用户哪里出了问题。如果你仅仅依靠红色边框来提示，那么很大一部分用户将很难弄明白为什么他们的表单无法提交。

反面例子

示例图片来自https://baymard.com/blog/inline-form-validation

优秀的设计会运用多种沟通方式，以便更有效地引导用户。为了提升用户体验和易用性，您可以尝试将颜色指示器与图标（例如，验证成功时显示勾号，验证失败时显示警告图标）和/或文本（例如，错误消息）结合使用，以便准确地告知用户当前情况。

主题

如今，在应用程序中提供多种主题选项，让用户选择自己喜欢的主题，正变得越来越流行。几乎所有应用程序都包含浅色和深色主题，有些甚至更进一步，提供各种各样的配色方案！这不仅能为用户带来愉悦的体验，还能帮助他们更好地使用应用程序。

深色模式

提供深色模式其实是你能为用户做的一件非常棒的事情……即使你之前可能没把它当作一项辅助功能！深色模式对那些受偏头痛、光线敏感、眼睛疲劳等问题困扰的人来说非常重要。大多数人其实都明白这一点，但可能并没有真正把它当作一项辅助功能来考虑——但我敢打赌，大多数开发者都会把代码编辑器设置为深色主题，以减少长时间盯着电脑屏幕造成的眼部疲劳。

然而，在进行辅助功能检查时，深色模式（以及其他备选颜色主题）常常被忽略——您真的能保证深色模式下的颜色对比度仍然足够好，或者焦点高亮仍然清晰可见吗？仅仅在默认主题下实现辅助功能是不够的！如果您提供了多种颜色主题，但只有一种是辅助功能的……那么您实际上并没有为所有人提供多种颜色主题。

高对比度主题

另一个值得考虑的方面是高对比度主题。您可能以前见过这类主题；它们通常使用纯黑色背景，其余部分则使用霓虹色。您可能会觉得这种风格在视觉上令人不适或不舒服，但舒适度并非其目的——它纯粹是为了提高可读性。这里展示的例子是 Windows 操作系统的高对比度主题之一，您可以看到，他们选择的颜色在黑色背景下显得格外醒目。如果您正在为应用程序的用户界面创建颜色主题，那么除了您计划包含的标准主题之外，不妨考虑添加一个类似的主题。

颜色是无障碍设计的关键组成部分！

一旦我们认识到无障碍设计是产品完整功能不可或缺的一部分，这一理念就能指导我们围绕规划、设计、开发和测试所做的每一个决策。作为一名开发人员，工作本身就意味着不断学习新知识，并调整我们对软件和网络的思考方式。你对无障碍设计了解得越多，并将这些知识运用到工作中，你的用户就越能从中受益！