根據對比度調整顏色

對于我正在開發的一個模組，我想結合玩家的主題顏色并使用它們來生成 UI 元素。但是，我遇到了一個問題，即并非所有顏色主題的顏色都能提供

In terms of HTML codes, that's:

I want to incorporate 2 of those colors from their theme when creating a UI for them. However, not all of them are easily distinguishable, you can see the various contrasts in this case here:

Now each theme contains a darker and lighter color just like the center 2 rows in this example, but also like this example, their contrast may not always be accessible for the end user to read. Moving along with the example, in this case, we're going to be using #32263d and #7347b6 to build our UI.

While I could try to randomly create a shade of purple similar, I want to keep it as close to the original as possible and just brighten it. We can see how it'd look in the various levels of light, here:

If we set #7347b6 to the maximum brightness at #a163ff, we get the following pair now:

While better than before, this is only a contrast of 3.88 : 1 still. So now I want to scale down the brightness of #32263d. If we reduce it to #251B2D, we then end up with this:

The two new colors then have a color contrast of 4.51 : 1.

Now, I could go through each theme manually, but given the number of them, I'd prefer to write an algorithm that generates the updated colors on the fly.

uj5u.com熱心網友回復：

查看我對調整給定顏色對以遵守 ePub 的 W3C 可訪問性標準的回答

你可以跳過我談論對比度公式的部分，因為你已經有了它，但我談論的是如何調整顏色以獲得更好的對比度。

如果我要根據之前的答案實際撰寫我的建議，我會更有效率，而不是從每個 RGB 分量中添加或減去 1 并重新計算亮度，我可能會添加/減去 10 并重新計算。如果對比度不夠，再做 10 次。一旦我獲得足夠的對比度，我就可以重新調整這些值，也許每次調整 2，在相反的方向，直到我接近 4.5 而不會下降。

uj5u.com熱心網友回復：

畢竟，我最終為我的代碼使用了一個回圈。雖然slugolicious的答案接近我想要的，但我發現將所有 RGB 分量調整相同的數量并不是我想要的，因為實際上影響了色調，所以我最終使用了 HSV。

public Color[] GetContrastingColors(Color backgroundColor, Color textColor, float ratio)
{
    Color[] colors = new Color[2];

    var backL = RelativeLuminance(backgroundColor);
    var textL = RelativeLuminance(textColor);

    if (textL > backL)
    {
        colors[0] = textColor;
        colors[1] = backgroundColor;
    }
    else
    {
        colors[1] = textColor;
        colors[0] = backgroundColor;
    }

    // See if we have good enough contrast already
    if (!(ColorContrast(backgroundColor, textColor) < ratio))
    {
        return colors;
    }

    Color.RGBToHSV(colors[0], out var lightH, out var lightS, out var lightV);
    Color.RGBToHSV(colors[1], out var darkH, out var darkS, out var darkV);

    // If the darkest color can be darkened enough to have enough contrast after brightening the color.
    if (ColorContrast(Color.HSVToRGB(darkH, darkS, 0f), Color.HSVToRGB(lightH, lightS, 1f)) >= ratio)
    {
        var lightDiff = 1f - lightV;
        var darkDiff = darkV;

        var steps = new float[] { 0.12f, 0.1f, 0.08f, 0.05f, 0.04f, 0.03f, 0.02f, 0.01f, 0.005f };
        var step = 0;

        var lightRatio = (lightDiff / (lightDiff   darkDiff));
        var darkRatio = (darkDiff / (lightDiff   darkDiff));

        while (ColorContrast(Color.HSVToRGB(lightH, lightS, lightV), Color.HSVToRGB(darkH, darkS, darkV)) < ratio)
        {
            while (ColorContrast(Color.HSVToRGB(lightH, lightS, lightV   lightRatio * steps[step]), Color.HSVToRGB(darkH, darkS, darkV - darkRatio * steps[step])) > ratio && step < steps.Length - 1)
            {
                step  ;
            }
            lightV  = lightRatio * steps[step];
            darkV -= darkRatio * steps[step];
        }

        colors[0] = Color.HSVToRGB(lightH, lightS, lightV);
        colors[1] = Color.HSVToRGB(darkH, darkS, darkV);
    }
    // Fall back to using white.
    else
    {
        colors[0] = Color.white;

        while (ColorContrast(Color.white, Color.HSVToRGB(darkH, darkS, darkV)) < ratio)
        {
            darkV -= 0.01f;
        }

        colors[1] = Color.HSVToRGB(darkH, darkS, darkV);
    }

    return colors;
}

標籤：

上一篇：網格布局添加游戲物件，而不是從上面實體化上一個物件

下一篇：Ubuntu18.04 + Windows10 雙系統安裝