一、四步骤概括
选颜色 选亮度 选对比度 加遮罩
二、具体步骤
1.选颜色——选择通用性色彩作为主色系
利用软件Sim Daltonsim for Mac可以观察到,无色彩系列对色盲人群来说,和普通人群的识色差异不大。因此,我们选择无彩色系列作为背景和文字的颜色,减轻色盲等特殊人群的负担。
2.选亮度——选择低亮度色彩(避免纯黑)
以QQ为例,依据QQ品牌色推荐的无彩色透明度色阶,我们通过色彩亮度公式进行逐个计算,最终符合底色标准的颜色定在#191919-#333333之间:
3.选对比度——选择并微调颜色使文字与背景对比度满足3:1~4.5:1范围之间
确定底色后,挑选色阶上的其他颜色作为文字的颜色,利用软件Colour Contrast Analyser进行测试,尽量满足文字对比度的比值在3:1~4.5:1的范围。通过微调,文字方案如下:
4.加遮罩——添加遮罩,保证其他元素达到满足在3:1~7:1之内
界面元素具有多样性,例如头像、歌曲、新闻等。其色彩也有多样性,不能满足对比度要求。我们在其上方添加黑色透明遮罩(不透明度50%)之后,对比度全部低于7:1,满足了规则的要求:
5.整体尼特值检测,选择尼特值更接近0.034的方案:
三、其他建议
1.夜间模式与官方界面的设计除颜色之外,不要对图形、结构、交互等有其他改变,减少用户学习成本。
2.自动调节界面的功能,可以通过感受环境光来切换夜间模式,也减少了用户的操作步骤。
3.夜间模式与官方白切换时,可以更平滑的过渡动画呈现,让用户能够适应场景转换。