Material Design & iOS 13黑暗模式总结探索

2.对比度

对比度表示一种颜色与另一种颜色的差异，通常写为1：1或21：1。比率中两个数字之间的差异越大，颜色之间的相对亮度差异越大。

根据万维网联盟（W3C），颜色与其背景之间的对比度基于其亮度（发出的光的强度）在1-21的范围内。

要创建带有品牌色的深色表面，应在推荐的背景色上覆盖不同透明度的品牌色

当文本在最高层24dp也就是16%白色覆盖到黑暗模式主色上，对比度应满足小文本与背景对比度4.5：1（AA级），大文本与背景对比度3：1 最低标准。

图中第一张是符合标准的，第二张是满足部分标准。

它们的区别是在标准背景色（#121212）上叠加的颜色亮度不同

3.主题色

黑暗模式应避免使用过高饱和度的颜色，当应用于所有高度表面时，应至少满足WCAG的AA标准4.5：1。高饱和色还会在深色背景下产生光学振动，这会引起眼睛疲劳。

默认模式以及在黑暗模式上的颜色对比

1.默认模式原色

2.黑暗模式浅色

3.不同色调示意

低饱和颜色和正常饱和颜色在黑暗模式界面中的对比

得出不饱和的颜色，方便访问

相同界面在默认模式和黑暗模式下的对比

可以发现主色及辅助色只在内容区保留并明显降低饱和度。

为了在黑暗模式中提供更多灵活性和可用性，建议在黑暗模式中使用较浅色调（200-50）。这个颜色可以使用谷歌的插件得到。但是一切以实际为准，它给出的只做参考。

颜色直观对比

界面中使用颜色以及不同区域文字颜色的使用对比，文字颜色只是表明使用颜色，透明度情况还要更具实际属性调整。

4.辅助色

在黑暗模式使用的辅助颜色是根据默认模式颜色覆盖不同透明度白色降低其整体饱和度，以保证达到WCAG的AA级最低标准。

例如错误标签的颜色是通过覆盖40%白色在原默认模式下错误色上，覆盖这层白色的目的是保证当前色值与背景色值满足4.5：1的最低标准。