如何判断文本在随机背景色上的可见性？（C#/JavaScript实现）

这个问题太常见了——随机生成的颜色经常会碰到过深（或者过亮）的情况，导致文本完全看不清。核心解决思路是基于颜色的相对亮度（遵循WCAG无障碍标准）来判断文本应该用黑色还是白色，或者直接生成符合对比度要求的颜色。下面分别给出JavaScript和C#的实现方案：

JavaScript 实现方案 #

我们可以先写一个工具函数计算颜色的相对亮度，然后在生成随机背景色后，根据亮度自动匹配可读性强的文本颜色：

// 把十六进制颜色转成RGB格式
function hexToRgb(hex) {
  // 处理短格式颜色，比如 #fff 转为 #ffffff
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
  
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// 按照WCAG标准计算颜色的相对亮度
function getRelativeLuminance(rgb) {
  const normalize = (val) => {
    val = val / 255;
    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
  };
  
  const r = normalize(rgb.r);
  const g = normalize(rgb.g);
  const b = normalize(rgb.b);
  
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// 生成随机背景色，并返回对应的可读文本色
function generateReadableColorPair() {
  const letters = '0123456789ABCDEF';
  let bgColor = '#';
  for (let i = 0; i < 6; i++) {
    bgColor += letters[Math.floor(Math.random() * 16)];
  }
  
  const rgb = hexToRgb(bgColor);
  const luminance = getRelativeLuminance(rgb);
  
  // 亮度大于0.5（背景偏亮）用黑色文本；反之用白色
  const textColor = luminance > 0.5 ? '#000000' : '#FFFFFF';
  
  return { backgroundColor: bgColor, textColor: textColor };
}

用法示例 #

给动态生成的<li>元素设置样式时，直接调用这个函数即可：

// 假设你有一个生成li的逻辑
function createListItem(text) {
  const li = document.createElement('li');
  const colors = generateReadableColorPair();
  li.style.backgroundColor = colors.backgroundColor;
  li.style.color = colors.textColor;
  li.textContent = text;
  return li;
}

C# 实现方案 #

如果是在服务端生成颜色对（比如ASP.NET项目中提前渲染列表），可以用同样的逻辑实现：

using System;
using System.Drawing;
using System.Linq;

public static class ColorUtility
{
    // 生成随机十六进制颜色字符串
    public static string GenerateRandomHexColor()
    {
        var random = new Random();
        return $"#{random.Next(0x1000000):X6}";
    }

    // 将十六进制颜色转为Color对象
    public static Color HexToColor(string hex)
    {
        if (hex.StartsWith("#"))
            hex = hex.Substring(1);
        
        // 处理短格式颜色（#fff → #ffffff）
        if (hex.Length == 3)
            hex = string.Concat(hex.Select(c => c.ToString() + c.ToString()));
        
        int argbValue = int.Parse(hex, System.Globalization.NumberStyles.HexNumber);
        return Color.FromArgb(argbValue);
    }

    // 计算颜色的相对亮度（WCAG标准）
    public static double CalculateRelativeLuminance(Color color)
    {
        double NormalizeComponent(int componentValue)
        {
            double normalized = componentValue / 255.0;
            return normalized <= 0.03928 ? normalized / 12.92 : Math.Pow((normalized + 0.055) / 1.055, 2.4);
        }

        double r = NormalizeComponent(color.R);
        double g = NormalizeComponent(color.G);
        double b = NormalizeComponent(color.B);

        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }

    // 生成可读的背景色+文本色组合
    public static (string BackgroundColor, string TextColor) GetReadableColorPair()
    {
        string bgHex = GenerateRandomHexColor();
        Color bgColor = HexToColor(bgHex);
        double luminance = CalculateRelativeLuminance(bgColor);
        
        string textHex = luminance > 0.5 ? "#000000" : "#FFFFFF";
        return (bgHex, textHex);
    }
}

用法示例 #

在服务端渲染列表时，调用GetReadableColorPair()获取颜色，然后传递给视图：

// 假设你有一个列表数据
var items = new List<string> { "Item 1", "Item 2", "Item 3" };
var colorPairs = items.Select(_ => ColorUtility.GetReadableColorPair()).ToList();

// 后续可以把colorPairs和items一起传递给前端视图渲染

两种方案都遵循了WCAG的无障碍标准，能确保文本和背景的对比度足够，彻底解决文本不可读的问题。

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