有个快速计算对比度的网页很好用,输入色值就可以得出结果。
contrast ratio:
https://contrast-ratio.com/##FF784A-on-white
还有个网站会更直观,输入色值后下面还有网页例子预览效果。
color review:
https://color.review
我选择的蓝色对比值在白色背景是3.9,黑色背景是5.2,在正常范围内。其实小易APP大概率不会有暗夜模式,因为需要投入更多的开发资源,浅色模式也不是不能用。在这个考量下,可以抛开黑色背景不考虑,但是话又说回来,做好准备总是没错的。
色系拓展
色系拓展需要拓展两类:中性色和辅助色。
中性色
中性色相对来说比较简单,所以放在前面先讲。前面我已经选定主色是#1b7aff,打开拾色器,将明度调为10%,就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色,叠加白色(白色的透明度以10%作为基础依次递减),得出中性色的色阶。
辅助色
我看过很多写得不错的文章,文末会放相关参考的链接。下面的四种选色思路,是根据他们的归纳为基础,加入一点其它的角度来进行辅助色系的选定。