当设计网页时，我们必须考虑到可访问性问题，其中包括确保页面上文本和背景颜色具有足够的对比度，以便人们可以轻松地阅读内容。为了实现这一目标，我们需要计算两种颜色之间的对比度比率。
对比度比率是一种度量方式，用于衡量两个颜色之间的亮度差异。它被定义为较亮颜色的相对亮度与较暗颜色的相对亮度之比，其值范围从1:1（完全相同）到21:1（最大可能差异）。Web Content Accessibility Guidelines (WCAG) 2.0建议文本和背景颜色之间的对比度比率不低于4.5:1。
下面我们将介绍如何使用JavaScript编写一个函数来计算两种颜色之间的对比度比率。
计算相对亮度
首先，我们需要计算每种颜色的相对亮度。相对亮度是指颜色的明暗程度，其值范围从0（黑色）到1（白色）。计算公式如下：
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
其中，R、G和B分别代表颜色的红、绿和蓝分量，它们的值的范围是0到255。公式中的系数是根据人眼对不同颜色的感知程度来确定的。
下面是一个JavaScript函数，用于计算给定颜色的相对亮度：
function getRelativeLuminance(color) {
let [r, g, b] = color;
r /= 255;
g /= 255;
b /= 255;
const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
return L;
}计算对比度比率
一旦我们有了两种颜色的相对亮度，就可以使用以下公式来计算它们之间的对比度比率：
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
其中，L1和L2分别是两个颜色的相对亮度。添加0.05的常数是为了避免出现0的情况，因为当相对亮度为0时，上述公式的结果将不再是定义良好的。WCAG要求我们将该常数添加到公式中，以确保我们得到有效的结果。
以下是一个JavaScript函数，用于计算两种颜色之间的对比度比率：
function getContrastRatio(color1, color2) {
const L1 = getRelativeLuminance(color1);
const L2 = getRelativeLuminance(color2);
const contrastRatio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
return contrastRatio;
}示例
下面是一个演示如何使用上述函数计算两种颜色之间的对比度比率的示例：
-- -------------------- ---- ------- -- --------------- ----- ----- - --- -- --- ----- ----- - ----- ---- ----- ----- ------------- - ----------------------- ------- --------------------------- -- ----- -- --------------- ----- ---- - --- -- ----- ----- --- - ----- -- --- ----- ------------- - ---------------------- ----- ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------