配色的用户体验——颜色对比度

编者按：当我们使用手机和电脑时，长期使用会让我们的眼睛感到疲劳，所以柔软舒适的画面非常重要；例如，手机和电脑的屏幕可以设置夜间模式，晚上看手机可以放松；作者分析了配色中的颜色对比度。让我们看看。 我猜你踏入设计圈的时候一定被推荐过。 Robin Williams 复杂的设计原理被浓缩成四个基本原则：亲密、对齐、重复和比较。 但事实上，我今天要谈论的内容与这本书无关。我只想引出来「对比」这个概念在设计中是多么基本和重要。 前面我在《Google 文本框设计原则中提到了用户研究：Google Design 文本框可用性研究的主要发现之一是：文本框底部线与背景的最小颜色对比度应为3：1；由于有足够的颜色对比度，控制器在场景中具有更高的可见性。 但是你真的理解颜色对比度的概念吗？为什么这个值？「3：1」，该怎么得到呢？「3：1」？色彩对比度对我们的设计过程有什么影响？ 一、为什么会有「对比度标准」 其实这个问题很容易回答。 当硬件设备制造商众多时，产品设计师无法确保每个用户在使用您的产品时看到的界面与显示器上的设计师一样完美。 总会有用户使用显示性能差的设备。甚至你需要考虑的不仅仅是设备因素、产品使用环境(室外或昏暗室内)、主流用户群体的视力等。，这可能需要你实现更无障碍的视觉体验。 否则，你的产品很可能在真实的使用场景中很难使用。 但仅凭设计师的经验来判断当然是不现实的，所以这个行业诞生了WCAG（Web Content Accessibility Guideline，Web内容无障碍指南)标准；虽然这个标准是为了满足视觉障碍用户的视觉体验，但也可以帮助普通用户更方便地使用。 实际上WCAG它还包含了许多无障碍设计标准，指导产品设计师从视力、听力、运动和智力等方面制作更容易使用的产品。 但今天我主要提炼出来「颜色对比度无障碍标准」说说这个。 二、颜色对比度无障碍标准 通过阅读性能评估，色相和饱和度对可读性的影响很小，甚至没有；真正影响阅读性能的是颜色对比度（颜色对比度的概念，我在理性和数学，推导产品颜色系统中提到过，这里不再重复）。 WCAG颜色对比度标准定义的目的是使文本和背景之间有足够的对比度，以确保视力广泛的人容易阅读；也就是说，符合要求WCAG标准的文字或图像，会有足够高的色彩对比度，使其很容易从背景中识别出来。 WCAG制定了两个标准规定，即「1.4.三条例:对比度(最小)标准」（即AA标准）和「1.4.6.对比度(加强)标准」（即AAA标准）；AAA标准比AA标准要更严格，适合视觉要求更严格的产品类型。 两个标准的定义是： 1.4.3 对比度(最小): 普通文本的视觉呈现和背景至少应该有4个.5:1的对比度，大文本¹对比度至少为3:1。 1.4.6 对比度(强化): 普通文本的视觉呈现至少有背景7:1的对比度，大文本¹至少有背景 4.对比度5:1。 备注：¹大文本：WCAG规定 「≥18pt常规字重」的文本或 「≥14pt字重加粗」文本为大文本。 我们在 iOS人机交互规范 和 Material Design 在指导规范中，我们可以看到许多颜色对比度指标都执行WCAG标准的。 例如：我们前面提到的「文本框底线与背景的最小对比度应为3:1」，以及MD黑暗模式下的规范「明度对比至少为4.5：1」；这些数据都来自WCAG标准。 三、如何计算颜色对比度？ (温馨提示:数学不好的朋友…可直接跳到下一节使用方便工具…） 在了解了数据指标后，我们应该探索如何计算颜色的对比度。 该公式可在WCAG可在标准中找到： 对比度 = （L1 0.05）/（L2 0.05）「其中：L指颜色的相对亮度」 相对亮度L = 0.2126 * R 0.7152 * G 0.0722 * B 其中 R, G , B 取值为：若 XsRGB