Wie berechnet man die beste Schriftfarbe für eine zufällige Hintergrundfarbe?

Je nach Entfernung des Betrachters zu einer Anzeige muss ich möglicherweise Inhalte auf mehreren Ebenen präsentieren. Nehmen wir an, der Benutzer nimmt von weitem eine flache Farbe wahr, aber aus nächster Nähe muss der Benutzer in der Lage sein, Text zu lesen. Der schwierige Teil ist, dass die flache Hintergrundfarbe gegeben ist / sich ändern kann / ich keine Kontrolle darüber habe.

Bisher habe ich einen wirklich einfachen Prototyp entwickelt , um die Textfarbe aus der Hintergrundfarbe zu ermitteln (klicken Sie, um einen zufälligen Hintergrund auszuwählen). Dies ist ein sehr trivialer Ansatz: Ich nehme den Farbton und versetze ihn um 90 Grad (also ist er unterschiedlich genug) und invertiere die Helligkeit im HSB-Farbraum, damit ich eine Farbe erhalte, die unterschiedlich genug ist, um lesbar zu sein / einen anständigen Kontrast zum Hintergrund zu haben .

Das funktioniert manchmal:

manchmal nicht:

Ist dieser Ansatz gut / in die gute Richtung? Wenn ja, wie kann ich das verbessern? Wenn nicht, welcher Richtung soll ich folgen?

Leider weiß ich nicht viel über Typ- und Farbtheorie, daher sind Hinweise von erfahrenen Personen sehr hilfreich. Dies wird auf einem nicht gedruckten Bildschirm angezeigt.

Welche Beziehungen zwischen Hintergrund- und Vordergrundfarben suche ich?

Bei der Lesbarkeit dreht sich alles um Kontrast. Ich würde versuchen festzustellen, wie dunkel jede Hintergrundfarbe in Graustufen ist, und wenn sie über 50% Grau (dunkler als hell) liegt, verwenden Sie weißen Text, unter 50% schwarzen Text. Dadurch wird sichergestellt, dass Sie einen Kontrast von mindestens 50% (Tonunterschied) haben, damit Ihr Text lesbar wird.

Diese Methode ist viel einfacher als das Spielen mit Komplementärfarben oder das Invertieren und garantiert maximalen Tonkontrast für jede Farbe.

Hier meine frühere Antwort auf im Wesentlichen dieselbe Frage bei Game Development Stack Exchange.

Zusammenfassend lässt sich sagen, dass Sie, wie die anderen Antworten hier vorschlagen, im Allgemeinen entweder Schwarz oder Weiß verwenden sollten , je nachdem, welcher Kontrast besser zum Hintergrund passt. (Wenn Sie möchten, wirkt sich eine leichte Färbung der Farben natürlich nicht wesentlich auf den Kontrast aus.)

Beachten Sie, dass es nicht ausreicht, nur die RGB-Farbwerte zu mitteln (oder die Helligkeit / den Wert einer HSL / HSV-Farbe zu verwenden) , um richtig zu bestimmen, wie dunkel oder hell eine Farbe für den Benutzer erscheint . Vielmehr müssen Sie (mindestens) zwei Effekte berücksichtigen:

1. Nichtlinearität des Geräts, auf dem die Farbe angezeigt wird , was (zumindest für RGB-Farben auf Computerbildschirmen) dazu neigt, Mitteltöne abzudunkeln, und

2. Die spektrale Empfindlichkeit des menschlichen Auges führt grob gesagt dazu, dass die Farbe in der Mitte des sichtbaren Spektrums (grün, gelb, cyan) heller erscheint als in der Nähe der Ränder (blau, rot, lila).

Das erste Problem kann durch Gamma-Expansion erklärt werden , während das zweite lediglich eine ungleichmäßige Gewichtung der R / G / B-Farbkanäle erfordert. Zusammengenommen können Sie die wahrgenommene Helligkeit einer RGB-Farbe näherungsweise berechnen und entscheiden, ob Schwarz oder Weiß einen besseren Kontrast dazu bilden:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Das ist unter der Annahme , dass R, Gund Bsind Gleitkommazahlen zwischen 0,0 bis 1,0. Wenn Sie z. B. Ganzzahlen von 0 bis 255 haben, konvertieren Sie diese in Gleitkommazahlen und teilen Sie sie durch 255.

Die Konstanten im obigen Code sind (ungefähr) korrekt für die sRGB- Eingabe; Sie können sie anpassen, wenn Sie in einem anderen Farbraum arbeiten, obwohl die genauen Werte nicht wirklich wichtig sind: Bei ausreichend dunklen oder hellen Farben ist die Antwort ohnehin dieselbe, während Farben, die in die Nähe der Grenzlinie fallen, kontrastieren mit schwarz oder weiß sowieso genauso gut.

Ich stimme John zu, halte den Text so weit wie möglich schwarz / weiß, nur um sicherzugehen, dass du dem Text auch ein wenig Sättigung hinzufügen kannst und du bist sicher. Hier ist ein kleiner Test:

Hier zu 100% anzeigen : http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Laden Sie hier die .ai-Datei (Quelldatei) herunter, um herumzuspielen: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai