Google Sheets中实现文本颜色随背景色自动适配

这确实是个很常见的可用性问题——深色背景配深色文本的可读性太差了！我之前也帮不少人解决过类似的需求，最靠谱的方案是根据背景色的相对亮度自动切换文本为黑色或白色，完全符合WCAG可访问性标准，保证任何背景下文本都清晰可读。

核心思路 #

我们会通过两个关键步骤实现：

1. 将背景色的十六进制（Hex）值转换为RGB数值，计算它的相对亮度
2. 根据亮度阈值判断：亮背景用黑色文本，暗背景用白色文本

完整代码实现 #

下面是整合后的脚本，你可以直接替换到自己的项目中，根据实际需求调整细节：

function onEdit(e) {
  const range = e.range;
  const sheet = range.getSheet();
  
  // 这里替换成你的工作表名称和下拉菜单所在列（示例是A列，columnStart=1）
  if (sheet.getName() === "Sheet1" && range.columnStart === 1) {
    const selectedOption = e.value;
    let bgHexColor = "";
    
    // 替换成你下拉菜单的选项和对应的背景色
    switch(selectedOption) {
      case "危险红色":
        bgHexColor = "#DC143C";
        break;
      case "深邃蓝":
        bgHexColor = "#191970";
        break;
      case "柔和绿":
        bgHexColor = "#90EE90";
        break;
      case "深灰":
        bgHexColor = "#333333";
        break;
      default:
        bgHexColor = "#FFFFFF"; // 默认白色背景
    }
    
    // 设置单元格背景色
    range.setBackground(bgHexColor);
    
    // 自动计算并设置对比文本色
    const contrastTextColor = getContrastTextColor(bgHexColor);
    range.setFontColor(contrastTextColor);
  }
}

// 辅助函数：根据背景色计算最优对比文本色（黑/白）
function getContrastTextColor(hexColor) {
  // 处理不带#的颜色值
  hexColor = hexColor.replace(/^#/, '');
  
  // 将Hex转换为RGB数值（0-255）
  const r = parseInt(hexColor.substring(0, 2), 16);
  const g = parseInt(hexColor.substring(2, 4), 16);
  const b = parseInt(hexColor.substring(4, 6), 16);
  
  // 按照WCAG标准计算相对亮度
  const calculatePrime = (value) => {
    const normalized = value / 255;
    return normalized <= 0.03928 ? (normalized + 0.055) / 1.055 : Math.pow(normalized, 2.4);
  };
  
  const rPrime = calculatePrime(r);
  const gPrime = calculatePrime(g);
  const bPrime = calculatePrime(b);
  
  const luminance = 0.2126 * rPrime + 0.7152 * gPrime + 0.0722 * bPrime;
  
  // 亮度大于0.5（偏亮背景）用黑色，否则用白色
  return luminance > 0.5 ? "#000000" : "#FFFFFF";
}

代码细节说明 #

1. onEdit触发器：这是Google Sheets的简单触发器，当用户编辑单元格时自动触发。你需要修改sheet.getName()和range.columnStart来匹配你的工作表和下拉菜单位置。
2. 颜色映射switch：这里是示例的下拉选项与背景色对应关系，你完全可以替换成自己的选项和颜色值（支持任何Hex格式的颜色）。
3. getContrastTextColor函数：核心逻辑所在，严格遵循WCAG的相对亮度计算公式，确保文本与背景的对比度符合可访问性要求，不会出现看不清的情况。

额外注意事项 #

• 如果你的背景色是用RGB值直接设置的（不是Hex），可以修改getContrastTextColor函数，直接接收r、g、b参数，跳过Hex转换步骤。
• 如果你想要更丰富的文本色选择（比如深灰/浅灰），可以调整亮度阈值，但黑/白是最稳妥的选择，适配所有背景色场景。
• 这个逻辑不仅限于下拉菜单触发，任何需要设置背景色的场景，都可以调用getContrastTextColor来同步设置文本色。

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