Passen Sie die Farbe basierend auf dem Kontrast an ⇐ C#

[Anonymous]

Für einen Mod, an dem ich arbeite, möchte ich die Themenfarben des Players integrieren und sie zum Generieren von UI-Elementen verwenden. Allerdings stoße ich auf ein Problem, bei dem nicht alle Farbthemen Farben haben, die ein gutes Kontrastverhältnis bieten, wie in 1.4.3 Kontrast (Minimum) der Web Content Accessibility Guidelines (WCAG) 2.1 beschrieben.
Ich kann den Kontrast derzeit mit Folgendem überprüfen:

Code: Select all

float RelativeLuminance(Color color)
{
float ColorPartValue(float part)
{
return part  backL)
{
targetL = ((backL + 0.05f) * ratio) - 0.05f;
brighter = true;

if (targetL > 1f)
{
targetL = ((backL + 0.05f) / ratio) - 0.05f;
brighter = false;
}
}
else
{
targetL = ((backL + 0.05f) / ratio) - 0.05f;
if (targetL > 0f)
{
targetL = ((backL + 0.05f) * ratio) - 0.05f;
brighter = true;
}
}

Color adjustedColor = textColor;

while ((!brighter && textL > targetL) || (brighter && textL < targetL))
{
Color.RGBToHSV(adjustedColor, out var textH, out var textS, out var textV);

textV += brighter ? 0.01f : -0.01f;

adjustedColor = Color.HSVToRGB(textH, textS, textV);
textL = RelativeLuminance(adjustedColor);
}

contrastColor = adjustedColor;

Aber das ist nicht wirklich effizient. Wie kann ich also die Textfarbe so manipulieren, dass sie „gleich bleibt“, aber genügend Kontrast bietet?
Bearbeiten:
Um mehr Kontext zu geben, was ich versuche, stellen Sie sich vor, ich hätte den folgenden Satz von 4 Farben als Thema des Players.


In Bezug auf HTML-Codes ist das:





#7347b6
#320d68




Ich möchte zwei dieser Farben aus ihrem Theme integrieren, wenn ich eine Benutzeroberfläche für sie erstelle. Allerdings sind nicht alle leicht zu unterscheiden. Die verschiedenen Kontraste in diesem Fall können Sie hier sehen:


Jetzt enthält jedes Thema eine dunklere und eine hellere Farbe, genau wie die beiden mittleren Zeilen in diesem Beispiel, aber auch wie in diesem Beispiel ist der Kontrast möglicherweise nicht immer für den Endbenutzer lesbar. Wenn wir dem Beispiel folgen, werden wir in diesem Fall #32263d und #7347b6 verwenden, um unsere Benutzeroberfläche zu erstellen.


Ich könnte zwar versuchen, zufällig einen ähnlichen Lilaton zu erzeugen, ich möchte ihn jedoch so nah wie möglich am Original halten und ihn einfach aufhellen. Wir können hier sehen, wie es bei den verschiedenen Lichtstärken aussehen würde:


Wenn wir #7347b6 auf die maximale Helligkeit bei #a163ff setzen, erhalten wir jetzt das folgende Paar:


Das ist zwar besser als zuvor, aber immer noch nur ein Kontrast von 3,88 : 1. Jetzt möchte ich die Helligkeit von #32263d herunterskalieren. Wenn wir es auf #251B2D reduzieren, erhalten wir Folgendes:


Die beiden neuen Farben haben dann einen Farbkontrast von 4,51 : 1.
Jetzt könnte ich jedes Thema manuell durchgehen, aber angesichts der Anzahl würde ich lieber einen Algorithmus schreiben, der die aktualisierten Farben im Handumdrehen generiert.