Wählen Sie automatisch eine Vordergrundfarbe basierend auf einer Hintergrundfarbe aus

Was ist die geeignete "Formel" für eine Vordergrundfarbe basierend auf einer Hintergrundfarbe (wobei die Hintergrundfarbe eine beliebige Farbe sein kann)?

Mehr Info:

Ich möchte, dass meine Anwendung eine Vordergrundfarbe basierend auf einer (durchgehend geraden) Hintergrundfarbe auswählt. Ich dachte nach dem Motto : Schwarz, wenn die Gesamtzahl der RGB-Komponenten über (255 x 3) / 2 liegt, und Weiß, wenn dies nicht der Fall ist . Möchte aber lieber die Meinung der Experten einholen. Gibt es einen akzeptierten Weg, dies zu tun? Oder was würden Sie vorschlagen?

_{Es gibt eine ähnliche Frage, aber die Antworten bieten grundsätzlich die Möglichkeit, die verfügbaren Hintergrundfarben zu begrenzen. Dies ist in diesem Fall keine Option.}

Ich habe vor einiger Zeit eine ähnliche Frage zu Game Development Stack Exchange beantwortet. Lassen Sie mich die Antworten dort zusammenfassen.

Ihre Idee, entweder Schwarz oder Weiß zu wählen, je nachdem, welche sich besser von der Hintergrundfarbe abhebt, ist Klang. Eine einfache Mittelung der RGB-Komponenten gibt jedoch aus (meistens) zwei Gründen keinen guten Hinweis darauf, wie hell eine bestimmte Farbe für das menschliche Auge erscheint:

Erstens haben die roten, grünen und blauen Kanäle aus Gründen der menschlichen Farbwahrnehmung nicht die gleiche relative Luminanz . Tatsächlich ist reines Blau ( #0000ff) nur etwa 10% so hell (und reines Rot nur etwa 30% so hell) wie reines Grün ( #00ff00). So hat beispielsweise schwarzer Text auf reinem Blau niemals einen besonders guten Kontrast.

Die folgenden Bilder zeigen beispielsweise Beispiele für Schwarzweißtext auf rein rotem, grünem und blauem Hintergrund ( #ff0000, #00ff00und #0000ff):

Sie können die Unterschiede im Kontrast deutlich erkennen, obwohl alle diese Farben den gleichen durchschnittlichen RGB-Wert haben.

Die andere Komplikation besteht darin, dass die normalerweise auf Computerbildschirmen (wie sRGB ) verwendeten RGB-Farbräume nicht linear sind, sondern ein Anzeige-Gamma von etwa 2 aufweisen. Dies bedeutet, dass z. B. die RGB-Farbe #7f7f7f= "50% Grau" nicht halb so hell wie reines Weiß ( #ffffff) erscheint, sondern nur etwa 25% so hell wie die Farbe, die tatsächlich eine relative Leuchtkraft auf halbem Weg zwischen Schwarz und Weiß aufweist tatsächlich näher an "75% grau" ( #bfbfbf).

Praktischerweise ist das menschliche Auge jedoch auch nicht linear und reagiert empfindlicher auf Unterschiede in dunkleren Farbtönen. In der Tat, für Grauton heben sie die Nichtlinearitäten in etwa aus, so dass das RGB 50% Grau ( #7f7f7f) immer noch ist wahrnehmungs weit von Schwarz und Weiß in etwa gleich. Zur Demonstration hier ein Schwarzweißtext auf 25%, 50% und 75% grauem Hintergrund ( #3f3f3f, #7f7f7fund #bfbfbf):

Um die Leuchtkraft einer beliebigen RGB-Farbe genau zu berechnen, müssen wir jedoch das Anzeige-Gamma berücksichtigen, da die linearen Leuchtkraftwerte gemittelt werden müssen.

Um alles zusammenzufassen und festzustellen, ob schwarzer oder weißer Text auf einem Hintergrund einen besseren Kontrast aufweist, müssen Sie:

1. Konvertieren Sie die gammakomprimierten RGB-Farbwerte in lineares RGB.
2. Nehmen Sie einen gewichteten Durchschnitt der linearen R-, G- und B-Komponenten und
3. Vergleichen Sie den resultierenden Durchschnitt mit einem geeigneten Schwellenwert.

Der Schwellenwert, der die besten Ergebnisse liefert, kann experimentell bestimmt werden, aber man würde allgemein erwarten, dass er nahe an der Luminanz von 50% RGB-Grau liegt. In jedem Fall ist anzumerken, dass der wahrgenommene Kontrast abhängig von den Anzeigeeinstellungen und den Betrachtungsbedingungen des Betrachters variiert. Es gibt also keinen einzigen optimalen Wert für alle, sondern eine ziemlich breite Palette von mehr oder weniger gleich guten Auswahlmöglichkeiten.

Wenn Sie nur eine einfache Formel zum Einstecken von Zahlen benötigen, versuchen Sie Folgendes:

• wenn 0,2126 × R ^γ + 0,7152 × G ^γ + 0,0722 × B ^γ > 0,5 ^γ , wählen schwarz; sonst wähle weiß,

Dabei ist γ der ungefähre Anzeigegammawert ( γ = 2,2 ist typisch).

Für eine noch einfachere Annäherung können Sie die Gammakorrektur ignorieren (dh effektiv annehmen, dass γ = 1 ist) und einfach die Bedingung 0,2126 × R + 0,7152 × G + 0,0722 × B > 0,5 verwenden. Bei Graustufen macht dies keinen Unterschied (da wir auf beiden Seiten der Ungleichung dasselbe Gamma anwenden), überschätzt jedoch die Luminanz gesättigter Farben etwas. Glücklicherweise haben bei solchen Farben sowohl Schwarz als auch Weiß ohnehin einen anständigen Kontrast, so dass der Fehler in der Praxis möglicherweise keine große Rolle spielt.

Beachten Sie schließlich, dass, wenn die Hintergrundfarbe nicht einheitlich ist, möglicherweise keine einzelne Textfarbe gut aussieht. In solchen Fällen können Sie beispielsweise schwarzen Text mit einem weißen Umriss verwenden oder umgekehrt oder Ihren Text mit einem halbtransparenten Feld der entgegengesetzten Farbe umgeben.

Jede Farbe hat drei Variablen; Farbton, Sättigung und Helligkeit.

Der Schlüssel zur Lesbarkeit ist der Kontrast, der für jede der drei Variablen unabhängig voneinander optimiert werden kann.

Zum Beispiel; Der Farbtonkontrast kann optimiert werden, indem sein Komplement gefunden wird. Der Sättigungskontrast kann optimiert werden, indem für jeden Grund Gegensätze ausgewählt werden. Ebenso kann hell durch dunkel kontrastiert werden.

Dies (über den Kriterien) bezieht sich nur auf eine Auswahlformel - Optimale Lesbarkeit.

Es kann andere Überlegungen geben; ästhetisch, wahrnehmungsbezogen, technisch usw.

Ein praktisches Mittel zur Bereitstellung dieser Funktion bestand darin, ein vorbestimmtes, vorhersehbares und akzeptables Ergebnis zu verwenden, indem eine Farbnachschlagetabelle verwendet wurde, die einen Satz für einen der beiden bereitstellt. Zum Beispiel; Bei gegebenem Vordergrund von X wird ein Hintergrund von Y bereitgestellt. Bei einem Vordergrund von Y wird ein Hintergrund von X bereitgestellt. Die CLUT kann für die jeweilige Anwendung so komplex oder umfassend sein, wie es gewünscht wird.

Sobald die Werte bekannt sind, kann ihre Auswahl automatisiert werden.