#为什么要做浅色模式?

1. 客户反馈

用户经常在户外使用我们的软件进行显示屏配置工作,普遍反馈深色界面在日照强光下不易辨认,影响工作效率,使用体验
较差。希望软件提供浅色模式,优化户外工作人员的用户体验。

2. 官方指南中的依据

首先要讨论的问题是:客户反馈具有普遍性吗?

我们手头缺乏有效的调研数据来验证户外日照强光下,浅色模式是否能改善软件界面的可辨认程度。因此,我们查阅了
Windows UWP官方设计指南(业务使用的高频场景为Windows PC客户端),发现了一些有用的提示。在UWP设计指南
Design and UI/Style/Color-Usability 章节中提到色彩可用性的三个设计要点:对比度(Contrast)、光照(Lighting)、
色盲患者(Colorblindness)。

其中,「Lighting」的原文如下:

Be aware that variation in ambient lighting can affect the usability of your app. For example, a page with a black background might unreadable outside due to screen glare, while a page with a white background might be painful to look at in a dark room.

「译」请注意,环境光线的变化会影响应用的可用性。例如,由于屏幕眩光,具有黑色背景的页面可能在户外是不易辨认的,而具有白色背景的页面在黑暗的房间中看起来可能非常刺眼。

Windows官方指南中明确提出浅色模式在提高「可用性」方面更适合户外强光照使用场景,同时我们意识到用户的真实需求
是希望软件界面具有更好的「可用性」Accessibility,单纯的「浅色模式」不能解决用户的深层需求。

3. 关于色彩可用性-颜色对比度(Color Accessibility-Color Contrast)

为什么是色彩可用性?

我们的设计在高分辨率的屏幕上表现完美,但是用户中的一部分人,使用的是过时即将被淘汰的显示器,在强光下、在昏暗
中、在恶劣的自然条件下使用我们的产品。引入色彩可用性(Color Accessibility)的概念,让不同使用条件的用户可
以正常使用我们的产品,是当前需要解决的重要问题。

可用性与无障碍设计

无障碍设计通产被认为是服务于少数身体存在残疾或疾病的用户,然而微软的包容性设计存在多重语境,例如,广义的「视
觉障碍」包括:永久障碍(盲人)、暂时障碍(眼疾)、情境障碍(特定环境、恶劣自然环境、易受干扰场景),因此,无
障碍设计并非为少数人设计,它解决了更广泛用户的痛点,让更多的用户群体能够更好的使用我们的产品,他与可用性密切
相关,设计过程中将无障碍设计考虑其中会更好的提高产品的可用性。

为什么是色彩对比度?

Salesforce 的无障碍设计顾问 Cathy O’ Connor 在文章 《Color Contrast And Why You Should Rethink It 》提出“设计
师的无障碍设计检查清单”,其中最有影响力的指导原则之一:确保所有内容都有足够的颜色对比度。

今年6月发布的新版W3C指南-网页内容无障碍指南(WCAG)2.1中详细规定了最小对比度的官方建议
「浅色模式」引发的色彩可用性设计 - 图3

对比度:文字和基于图片的文字应该有高对比度,至少是4.5:1,除了以下的情况:

  • 大字体:对于字号大的文本来说,对比度应为3:1

  • 次要/附带内容:如果文本是界面上不活跃的内容的一部分,或仅仅作为装饰,或不是对所有人可见,或只是是包含其他的

重要视觉信息的图,则不必有对比度的要求

  • Logo: 如果文本是logo或者商标的名字,则没有最小对比读的要求

#如何进行满足可用性要求的配色?

我们认识到色彩可用性中颜色对比度的重要,那么主流平台的应用是否遵循了W3C标准网页内容无障碍指南(WCAG)2.1呢?我收集了一些官方规范中的相应说明,希望可以更好的指导我们的设计实践。

1.官方指南中的阐述

iOS&macOS

Visual Design/Color中的规定:

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

使用足够的颜色对比度。您的应用中对比度不足会让每个人都难以阅读内容。例如,图标和文本可能与背景混合在一起。在线颜色对比度计算器可帮助您准确分析应用中的颜色对比度,以确保其符合最佳标准。力争最小对比度为4.5:1,尽管7:1是首选,因为它符合更严格的可访问性标准。

Material Design

Usability/Accessibility/Color and contrast直接借鉴了W3C标准:「浅色模式」引发的色彩可用性设计 - 图4

2.检测工具

很多在线工具都可以测试对比度是否满足 WCAG 2.1 标准,例如:
https://webaim.org/resources/contrastchecker/

3.优化流程

确定主色调、通用色「浅色模式」引发的色彩可用性设计 - 图5

确定中性色、文字颜色,根据主色调获取系列衍生色

注:衍生色的生成借鉴了Ant Design的色彩生成算法

「浅色模式」引发的色彩可用性设计 - 图6

测试文字在不同颜色背景的对比度,来回测试、反复优化

「浅色模式」引发的色彩可用性设计 - 图7

反复调整优化,达到美感与可用性的平衡

「浅色模式」引发的色彩可用性设计 - 图8

参考资料:

  1. Color Contrast And Why You Should Rethink It,Cathy O’ Connor

  2. W3C 网页内容无障碍指南(WCAG)2.1

  3. IBM Accessibility Handbook

  4. Light & Dark Color Systems,Nathan Curtis

  5. 如何提高网站的可访问性(Accessibility)?——来自W3C的指南,贺易之