C#中双色对比度计算器计算值错误问题排查

核心问题 #

你遇到的偏差来自两个关键错误：

1. 对比度计算公式不符合W3C标准：你使用的(l1 + 0.0005) / (l2 + 0.0005)是错误的，W3C规范要求的是(max(L1, L2) + 0.05) / (min(L1, L2) + 0.05)，0.0005的数值会导致对比度计算完全偏离真实值。
2. 亮度计算缺少伽马校正：W3C的相对亮度计算要求先对RGB通道做伽马转换，直接用原始RGB值（0-255）或未校正的0-1值代入加权公式，会导致蓝色通道这类颜色的亮度计算严重失真。

正确实现步骤 #

1. 修正对比度计算公式

替换为W3C标准的计算逻辑：

public double CalculateContrast(double luminance1, double luminance2)
{
    var maxL = Math.Max(luminance1, luminance2);
    var minL = Math.Min(luminance1, luminance2);
    return (maxL + 0.05) / (minL + 0.05);
}

2. 实现符合规范的相对亮度计算

按照W3C要求，相对亮度的计算必须包含伽马校正，完整步骤如下：

public double GetRelativeLuminance(int r, int g, int b)
{
    // 第一步：将0-255的RGB值转换为0-1的浮点数
    double rSrgb = r / 255.0;
    double gSrgb = g / 255.0;
    double bSrgb = b / 255.0;

    // 第二步：对每个通道做伽马校正
    double rLinear = rSrgb <= 0.03928 ? rSrgb / 12.92 : Math.Pow((rSrgb + 0.055) / 1.055, 2.4);
    double gLinear = gSrgb <= 0.03928 ? gSrgb / 12.92 : Math.Pow((gSrgb + 0.055) / 1.055, 2.4);
    double bLinear = bSrgb <= 0.03928 ? bSrgb / 12.92 : Math.Pow((bSrgb + 0.055) / 1.055, 2.4);

    // 第三步：用加权公式计算相对亮度
    return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
}

3. 修正FindTextColor逻辑

基于正确的亮度和对比度计算，重新验证文本颜色的对比度是否满足4.5:1的要求：

public string FindTextColor(string backgroundColorHex)
{
    // 先将背景色转换为RGB值（此处省略Hex转RGB的实现，需自行补充）
    var bgR = ...;
    var bgG = ...;
    var bgB = ...;
    var bgLuminance = GetRelativeLuminance(bgR, bgG, bgB);

    // 定义候选文本颜色对
    var colorPairs = new List<(string Hex, int R, int G, int B)>
    {
        ("#121212", 18, 18, 18),
        ("#EAEAEA", 234, 234, 234),
        ("#000000", 0, 0, 0),
        ("#FFFFFF", 255, 255, 255)
    };

    // 依次检查对比度是否达标
    foreach (var color in colorPairs)
    {
        var textLuminance = GetRelativeLuminance(color.R, color.G, color.B);
        var contrast = CalculateContrast(bgLuminance, textLuminance);
        if (contrast >= 4.5)
        {
            return color.Hex;
        }
    }

    // 所有候选都不满足时返回黑色
    return "#000000";
}

验证示例 #

以#3041FF和#EAEAEA为例：

• #3041FF的相对亮度计算结果约为0.116
• #EAEAEA的相对亮度计算结果约为0.823
• 对比度为(0.823 + 0.05) / (0.116 + 0.05) ≈ 5.26，符合4.5:1的要求，此时会正确返回#EAEAEA作为文本颜色。

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