Material Design 是谷歌推出的一种设计语言，主要用于移动应用和网页的设计。其中，颜色的使用是非常重要的一部分。在 Material Design 中，颜色的亮度和对比度的搭配是非常关键的，因为这两个属性可以影响到设计的可读性和可访问性。本文将介绍 Material Design 中的颜色亮度和对比度，以及如何使用它们来设计更好的界面。
颜色亮度
颜色亮度是指颜色的明暗程度，也称为亮度对比。在 Material Design 中，所有颜色都有 10 个不同的亮度等级，从 50 到 900，每相邻两个亮度级别之间相差 100。亮度级别越高，颜色越亮，反之越暗。例如，蓝色的亮度等级为 500，相应的亮蓝色的亮度等级为 700，而深蓝色的亮度等级为 900。
为了在界面中使用这些不同的亮度级别，我们可以使用 CSS 变量或者 Sass 等 CSS 预处理器来定义它们。以下是使用 CSS 变量定义颜色亮度的示例代码：
----- -
------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-------------------- --------
-如上代码所示，我们定义了一个名为 color-primary 的 CSS 变量，它表示主要颜色。接下来，我们为这个变量定义了 10 个不同的亮度级别，从 50 到 900。
颜色对比度
颜色对比度是前景和背景色之间的差异，也称为对比度比例。在 Material Design 中，颜色对比度的最小值应该为 4.5:1 或更高。这可以确保文本和图标在不同背景颜色上的可读性和可识别性。如果颜色对比度太低，可能会使得文本难以阅读，订阅文字上限的人极有可能受到限制。
为了计算颜色对比度，我们可以使用 WCAG 2.0 中定义的公式：(L1 + 0.05) / (L2 + 0.05)，其中 L1 表示前景色的相对亮度，L2 表示背景色的相对亮度。如果这个比例大于等于 4.5，那么这个颜色对的对比度就符合 Material Design 的标准。
以下是一些符合标准的对比度颜色组合：
- 白色和黑色
- 白色和深灰色
- 灰色和白色
- 深灰色和白色
- 深灰色和浅灰色
如何使用颜色亮度和对比度
在 Material Design 中，我们通常会使用 3 种颜色来定义界面的主要颜色、文本颜色和强调颜色。以下是一个定义颜色的示例：
----- -
---------------- --------
------------- --------
--------------- --------
-在定义这些颜色后，我们可以使用它们来构建我们的界面。以下是一个带有主要颜色、文本颜色和强调颜色的界面示例：
---- ------------
------- -------------- ------------------------ -----------------------
--- ------------- ------------- ------------------------- ----------
------- -------------- ------------------------ --------------------------- -----------
---------
----- -------------
-- ------------ ------------- --------------------
---- -- ---- ------ -----
----
-------
------如上所示，我们可以使用 CSS 变量来定义我们的主要颜色、文本颜色和强调颜色。接下来，我们可以将这些颜色应用到不同的元素上。注意，我们在应用背景颜色时使用了 background-color 属性，而在应用文本颜色时使用了 color 属性。这是因为这些属性的语义是不同的，可能会影响到颜色的对比度比例。
总结
使用适当的颜色对比度和亮度可以帮助我们创建更具可读性和可访问性的界面。在 Material Design 中，我们可以使用 CSS 变量来定义不同的颜色亮度和对比度等级，并使用它们来构建我们的界面。需要注意的是，我们在应用背景颜色和文本颜色时要注意语义的区别，以免影响到颜色的对比度比例。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6461f4cf968c7c53b034989d