如何使用 JavaScript 根据背景颜色更改文本颜色？

在 Web 开发中，经常需要使用 JavaScript 实现根据背景颜色自动调整文本颜色，以保证文本与背景颜色之间的对比度，提高网页的可读性和用户体验。本文就为大家介绍如何使用 JavaScript 根据背景颜色更改文本颜色。

基本概念

首先，我们需要了解对比度的概念。对比度是用来衡量文本颜色和背景颜色之间的明度差异程度的值。对比度通常用数字表示，取值范围为 1 到 21。对比度值越高，代表文本颜色和背景颜色之间越容易区分，也就越容易阅读。

在这里，我们采用 WCAG（Web Content Accessibility Guidelines）的标准，对比度值应不低于 4.5:1，这样才能保证网站的可访问性和用户体验。所以，当文本颜色和背景颜色之间的对比度低于 4.5：1 时，我们需要根据背景颜色自动调整文本颜色，以提高对比度值。

实现方法

根据背景颜色自动调整文本颜色，可以采用如下两种方法：

1. 预设颜色表

我们可以事先预设一组文本颜色和背景颜色的组合，然后使用 JavaScript 将每个文本元素的背景颜色与预设表的颜色进行比较，如果背景颜色与预设表中的某个颜色相近，则将该文本元素的文本颜色进行调整。

下面是示例代码：

// 预设颜色表
const colorTable = [
  { background: '#F0F8FF', foreground: '#000' },
  { background: '#FAEBD7', foreground: '#000' },
  { background: '#00FFFF', foreground: '#000' },
  { background: '#7FFFD4', foreground: '#000' },
  { background: '#F0FFFF', foreground: '#000' },
  { background: '#F5F5DC', foreground: '#000' },
  { background: '#FFE4C4', foreground: '#000' },
  { background: '#FFEBCD', foreground: '#000' },
  { background: '#8A2BE2', foreground: '#fff' },
  { background: '#A52A2A', foreground: '#fff' },
  { background: '#DEB887', foreground: '#000' },
  { background: '#5F9EA0', foreground: '#fff' },
  { background: '#7FFF00', foreground: '#000' },
  { background: '#D2691E', foreground: '#fff' },
  { background: '#FF7F50', foreground: '#000' },
  { background: '#6495ED', foreground: '#fff' },
  { background: '#DC143C', foreground: '#fff' },
  { background: '#BDB76B', foreground: '#000' },
  { background: '#FF8C00', foreground: '#000' },
  { background: '#9932CC', foreground: '#fff' },
];

// 获取元素的背景色
function getBackgroundColor(el) {
  const bgColor = window.getComputedStyle(el).getPropertyValue('background-color');
  return hexToRgb(bgColor);
}

// 将16进制颜色转换为RGB颜色
function hexToRgb(hex) {
  const r = parseInt(hex.substring(1, 3), 16);
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

// 比较两个颜色的对比度
function contrastRatio(color1, color2) {
  const lum1 = luminance(color1) + 0.05;
  const lum2 = luminance(color2) + 0.05;
  return lum1 > lum2 ? lum1 / lum2 : lum2 / lum1;
}

// 计算颜色的相对亮度
function luminance(rgbColor) {
  const rgb = rgbColor.replace(/[^\d,]/g, '').split(',');
  const r = rgb[0];
  const g = rgb[1];
  const b = rgb[2];
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum;
}

// 根据背景颜色调整文本颜色
function adjustTextColor(el) {
  const backgroundColor = getBackgroundColor(el);
  for (let i = 0; i < colorTable.length; i++) {
    const { background, foreground } = colorTable[i];
    const contrast = contrastRatio(backgroundColor, background);
    if (contrast >= 4.5) {
      el.style.color = foreground;
      break;
    }
  }
}

// 遍历页面中所有的文本元素
const textEls = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, li, td');
for (let i = 0; i < textEls.length; i++) {
  adjustTextColor(textEls[i]);
}

2. 动态计算颜色

另外一种方法是动态计算颜色，根据背景颜色计算出最优的文本颜色。该方法的实现过程如下：

首先，我们需要获取到元素的背景颜色，然后计算出该背景颜色的相对亮度。根据相对亮度的不同，我们可以将文本颜色分为白色和黑色两种。如果该背景颜色的相对亮度大于等于 0.5，则文本颜色应为黑色，否则应为白色。

下面是示例代码：

// 获取元素的背景色
function getBackgroundColor(el) {
  const bgColor = window.getComputedStyle(el).getPropertyValue('background-color');
  return hexToRgb(bgColor);
}

// 将16进制颜色转换为RGB颜色
function hexToRgb(hex) {
  const r = parseInt(hex.substring(1, 3), 16);
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

// 计算颜色的相对亮度
function luminance(rgbColor) {
  const rgb = rgbColor.replace(/[^\d,]/g, '').split(',');
  const r = rgb[0];
  const g = rgb[1];
  const b = rgb[2];
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum;
}

// 根据背景颜色调整文本颜色
function adjustTextColor(el) {
  const backgroundColor = getBackgroundColor(el);
  const lum = luminance(backgroundColor);
  
  if (lum >= 0.5) {
    el.style.color = '#000';
  } else {
    el.style.color = '#fff';
  }
}

// 遍历页面中所有的文本元素
const textEls = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, li, td');
for (let i = 0; i < textEls.length; i++) {
  adjustTextColor(textEls[i]);
}

总结

以上就是根据背景颜色自动调整文本颜色的实现方法，可以根据实际情况选择使用预设颜色表或者动态计算颜色的方法。在设计网站时，保证文本颜色与背景颜色之间的对比度，是优化用户体验的一个重要步骤。