Chart.js饼图生成相邻高对比度随机背景色方案求助

要解决相邻扇区颜色对比度低的问题，我们需要实现颜色对比度校验逻辑，在生成随机颜色时确保相邻颜色（包括饼图首尾的颜色）的对比度符合视觉舒适标准（这里采用WCAG AA的4.5:1对比度要求）。

核心实现步骤 #

1. 实现颜色格式转换与对比度计算函数，基于WCAG标准计算两个颜色的对比度
2. 修改随机颜色生成逻辑，每次生成新颜色时与前一个颜色校验对比度，达标后才保留
3. 额外校验饼图首尾颜色的对比度，确保环形结构的视觉一致性

完整代码实现 #

JavaScript 部分

// 十六进制转RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

// 计算颜色的相对亮度（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];
}

// 计算两个颜色的对比度
function getContrastRatio(color1, color2) {
  const l1 = getRelativeLuminance(hexToRgb(color1));
  const l2 = getRelativeLuminance(hexToRgb(color2));
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 生成单个随机十六进制颜色
function generateRandomColor() {
  const chars = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += chars[Math.floor(Math.random() * chars.length)];
  }
  return color;
}

// 生成符合对比度要求的颜色数组
function generateContrastColors(count, minContrast = 4.5) {
  const colors = [];
  // 生成第一个颜色
  colors.push(generateRandomColor());
  
  // 生成中间颜色，确保与前一个对比度达标
  for (let i = 1; i < count; i++) {
    let newColor;
    do {
      newColor = generateRandomColor();
    } while (getContrastRatio(newColor, colors[i-1]) < minContrast);
    colors.push(newColor);
  }
  
  // 校验首尾颜色的对比度，不达标则重新生成最后一个颜色
  while (getContrastRatio(colors[0], colors[count-1]) < minContrast) {
    let lastColor;
    do {
      lastColor = generateRandomColor();
    } while (getContrastRatio(lastColor, colors[count-2]) < minContrast);
    colors[count-1] = lastColor;
  }
  
  return colors;
}

const round = (num) => Math.round(num * 100) / 100;

let chart = null;
$('#generate').click(() => {
  const pieces = parseInt($('#pieces').val());
  const colors = generateContrastColors(pieces);
  const data = Array(pieces).fill(round(1/pieces));
  
  if (chart) chart.destroy();
  chart = new Chart($('#chart'), {
    type: 'pie',
    data: {
      labels: colors,
      datasets: [{
        data: data,
        backgroundColor: colors,
        borderWidth: 0
      }]
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (context) => context.parsed
          }
        }
      }
    }
  });
});

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <input id="pieces" type="number" value="20" />
  <button id="generate">Generate Chart</button>
</div>
<canvas id="chart"></canvas>

关键说明 #

• 对比度阈值：代码中默认使用4.5:1，这是WCAG AA级别的最低要求，可根据需求调整minContrast参数（比如7:1对应WCAG AAA级别）
• 首尾校验：因为饼图是环形结构，首尾扇区也是相邻的，所以额外添加了首尾颜色的对比度检查
• 性能优化：生成颜色时的循环检查不会无限执行，因为随机颜色空间足够大，很快就能找到符合要求的颜色

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