如何在HTML body背景色与文本色相同时修改文本颜色

你的问题核心是背景色切换后，文本颜色没有同步调整导致看不清，原代码的问题在于只在页面加载时判断了一次，而且仅针对黑色背景，完全没覆盖你设置的那几个绿色、蓝色系背景。

直接给你改好的代码，同时解释关键逻辑：

完整代码 #

HTML

<body id="background__color">
  <div>
    <div class="greeting">
      <p id="ch">Hello world!</p>
    </div>
  </div>
</body>

JavaScript

var i = 0;
const textElement = document.querySelector("#ch");
const bodyElement = document.getElementById("background__color");
const colors = ["#15ec34", "#077981", "#8fe607", "#4a66ea", "#ffffff"]; // 新增白色背景做测试

// 计算背景色亮度，自动匹配可读文本色
function getTextColorForBackground(hexColor) {
  // 将十六进制颜色转为RGB值
  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);
  
  // 使用W3C标准相对亮度公式计算
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  // 亮度高于127.5用黑色文本，否则用白色
  return brightness > 127.5 ? "#000000" : "#ffffff";
}

function change() {
  const currentColor = colors[i];
  bodyElement.style.backgroundColor = currentColor;
  // 同步设置对应文本颜色
  textElement.style.color = getTextColorForBackground(currentColor);
  
  i = (i + 1) % colors.length;
}

// 页面加载时先执行一次，避免初始状态文本看不清
change();
// 定时切换背景色
setInterval(change, 1000);

关键逻辑说明 #

• 同步触发文本色调整：把文本颜色修改逻辑放到背景色切换函数里，每次背景色变化立刻同步更新文本色，而非仅执行一次
• 通用亮度判断：用标准公式计算背景色亮度，不管你新增什么颜色，都能自动匹配最清晰的文本色，比如白色背景对应黑色文本，深色调背景对应白色文本
• 优化DOM查询：提前获取DOM元素，避免每次切换都重复查询，提升性能
• 初始状态适配：页面加载时直接执行一次切换逻辑，不会出现初始状态文本和背景色冲突的情况

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