如何修改随机颜色生成器以生成适配白色文本的高对比度深色？

要生成能和白色文本满足无障碍对比度要求（WCAG 2.1 标准下普通文本至少4.5:1对比度）的深色背景，核心是确保生成颜色的相对亮度足够低——因为白色(#FFFFFF)的相对亮度为1，根据对比度公式，我们需要背景色的相对亮度≤~0.183，这样两者对比度才能≥4.5:1。

以下是修改后的代码：

// 辅助函数：将十六进制颜色转为RGB对象
const hexToRgb = (hex) => {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  return { r, g, b };
};

// 计算颜色的相对亮度（遵循WCAG公式）
const calculateRelativeLuminance = ({ r, g, b }) => {
  const linearize = (val) => val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
};

// 生成符合对比度要求的深色
const generateDarkColour = () => {
  let colour;
  let luminance;
  // 循环生成直到满足亮度要求
  do {
    colour = '#' + Math.random().toString(16).slice(-6);
    luminance = calculateRelativeLuminance(hexToRgb(colour));
  } while (luminance > 0.183);
  return colour;
};

代码说明 #

• hexToRgb：把十六进制颜色字符串转换为0-1范围的RGB数值，为亮度计算做准备。
• calculateRelativeLuminance：按照WCAG标准的公式计算颜色的相对亮度，这是判断对比度是否达标的核心逻辑。
• generateDarkColour：循环生成随机颜色，只有当颜色的相对亮度≤0.183（保证和白色文本对比度≥4.5:1）时，才返回该颜色。

如果需要满足更高的AAA级无障碍标准（对比度≥7:1），只需将循环条件中的0.183替换为0.09即可。

内容的提问来源于stack exchange，提问作者physicsboy