相信前端工程师都知道颜色的重要性，不但能够美观页面，还能够增强用户体验和转化率。在许多场景下，我们需要比较两个颜色的亮度差异，这时候就需要使用相对亮度的概念。本文将介绍如何使用 npm 包 relative-luminance 来计算两个颜色的相对亮度。
相对亮度
相对亮度是一种反映颜色亮度的度量标准，其范围从 0（纯黑色）到 1（纯白色）。对于任意一个颜色，我们都可以使用下列公式计算其相对亮度：
---------------------- - ------ - - - ------ - - - ------ - -
其中 RGB 分别为颜色的红、绿、蓝三原色分量，其值范围为 0-255。因为人眼对于不同颜色的敏感程度不同，所以这三个分量的系数也不同。上述系数是根据国际标准 WCAG 2.0 计算得出的。
安装和使用
relative-luminance 是一个让你计算任意类型颜色的相对亮度的 小型、无依赖 的 npm 模块。可以使用 npm 命令安装：
--- ------- ------------------
使用该包需要调用其getLuminance()方法并将颜色转换为 RGB 格式。下面是一个使用 relative-luminance 包计算相对亮度的示例代码：
----- ----------------- - ------------------------------ -- - --- ------- --- --------- - ----- ---- --- --- --------- - ----- ---- ----- --- --------------- - ------------------------------------------ --- --------------- - ------------------------------------------ ---------------- -------- --------- -- ------ ----- ---------------------------- ---------------- -------- --------- -- ------ ----- ----------------------------
示例中使用getLuminance()方法计算了两个颜色的相对亮度，并且使用了toFixed()方法将结果保留两位小数。值得注意的是，颜色的 RGB 分量的值必须在 0-255 的范围之内，否则会报错。
代码解析
relative-luminance 包提供的getLuminance()方法非常简单，可读性也很好。为了更好地理解其操作逻辑，下面我们对其进行解析。
-------- ----------------- - --- ------------- - ------------------ --- --------- - ------------------------------------------ ------ ---------- -
getLuminance()方法接收一个 RGB 格式的颜色，并且调用了两个辅助方法，分别是normalizeRGB()和calculateRelativeLuminance()。
-------- ------------------------------- - --- --- -- -- - ------------- -- ----------------------- - ------ --- ----------------- - ------ - - - ------ - - - ------ - -- ------ ------------------ -
calculateRelativeLuminance()方法接收一个归一化的 RGB 数组，并且按照 WCAG 2.0 中的公式计算相对亮度。这里需要注意的是，在 WCAG 2.0 中对于 sRGB 格式颜色的处理方法是将其先转换为线性格式，再使用线性格式的 R、G、B 值计算相对亮度。 该方法中只涉及了一些简单的数学计算，可读性较高。
-------- ----------------- -
-- ----------- --- -- ----- --- ---------- ------ ---- - -------------
------ ------------- -- -
--- - ------------
-- ----------- -- ---------------------- ----- --- ---------- --------- ------ -- - ------ ---------
----- ------------- - ---------------------- --- -----
------ --------------
---
-normalizeRGB()方法接收一个 RGB 数组，并且检查其长度是否为 3，而且检查每个分量是否为有效数字。在检查后，该方法会执行一个简单的归一化操作，将每个 RGB 分量值域固定在 [0, 255] 之间。 需要注意的是，如果输入的分量数值已经在 0-255 的范围内，则不会对其进行调整。
进一步思考
本文主要介绍了如何使用 relative-luminance 包计算两个颜色的相对亮度。相对亮度的概念在前端开发中非常重要，它与无障碍设计息息相关。如果我们想要提高用户体验，不仅需要关心页面上颜色的搭配和舒适性，还需要关心这些颜色是否易于阅读和区分。另外，为了方便使用，我们通常会封装一些帮助实现无障碍功能的组件，这些组件将利用 relative-luminance 等包来实现亮度对比、焦点控制等功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/103344