如何为背景色选择最优叠加文本颜色？

一、纯CSS实现（自动切换黑/白文本） #

CSS原生的light-dark()函数是解决这个问题的最优纯CSS方案，它会根据元素背景的亮度自动在指定颜色间切换，比mix-blend-mode: difference在中性色场景下的对比度稳定得多：

.text-adaptive {
  color: light-dark(#000, #fff);
}

如果要自定义亮度阈值，可以结合CSS颜色函数做更精细的控制（需浏览器支持CSS颜色运算）：

.text-adaptive {
  --bg-lightness: lightness(background-color);
  color: var(--bg-lightness) > 50% ? #000 : #fff;
}

针对红色系背景的特殊适配，也可以用CSS颜色通道判断实现：

.text-adaptive {
  --bg-red: red(background-color);
  --bg-green: green(background-color);
  --bg-blue: blue(background-color);
  /* 当红色通道明显高于绿蓝时，用黄色文本，否则自动黑/白 */
  color: calc(
    (var(--bg-red) > 200 and var(--bg-green) < 100 and var(--bg-blue) < 100) 
    ? #ffd700 
    : light-dark(#000, #fff)
  );
}

二、基础JS实现（自定义规则+红色系适配） #

如果需要更灵活的逻辑（比如自定义对比度阈值、精准识别红色系），可以用JS实现基于WCAG标准的相对亮度计算，再叠加颜色判断：

1. 先实现颜色解析工具函数，把任意CSS颜色转为RGB值：

function getRGB(color) {
  const tempDiv = document.createElement('div');
  tempDiv.style.color = color;
  document.body.appendChild(tempDiv);
  const computedColor = getComputedStyle(tempDiv).color;
  document.body.removeChild(tempDiv);
  const rgbValues = computedColor.match(/\d+/g);
  return rgbValues ? { r: +rgbValues[0], g: +rgbValues[1], b: +rgbValues[2] } : null;
}

2. 用WCAG公式计算背景色的相对亮度：

function getRelativeLuminance(rgb) {
  const sRGB = Object.values(rgb).map(val => {
    val /= 255;
    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * sRGB[0] + 0.7152 * sRGB[1] + 0.0722 * sRGB[2];
}

3. 主函数：根据背景色设置适配文本色

function setAdaptiveText(element) {
  const bgColor = getComputedStyle(element).backgroundColor;
  const rgb = getRGB(bgColor);
  if (!rgb) return;

  // 判断是否为红色系背景（可根据需求调整通道阈值）
  const isRedBackground = rgb.r > 180 && rgb.g < 100 && rgb.b < 100;
  if (isRedBackground) {
    element.style.color = '#ffd700'; // 黄色和红色对比度极强，视觉效果好
    return;
  }

  // 根据相对亮度选择黑/白（阈值0.5是WCAG推荐的分界点）
  const luminance = getRelativeLuminance(rgb);
  element.style.color = luminance > 0.5 ? '#000' : '#fff';
}

// 使用示例：给所有需要适配的元素设置文本色
document.querySelectorAll('.text-adaptive').forEach(setAdaptiveText);

方案总结 #

• 纯CSS方案：无JS依赖，性能优异，适合大多数基础场景，light-dark()已被现代浏览器广泛支持；
• JS方案：逻辑可高度自定义，能精准处理红色系这类特殊背景，适配更复杂的需求。

这两种方案都能解决你遇到的中性色对比度不足问题，红色系的适配也完全符合你的预期，效果会比你之前用的两种方法稳定很多。

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