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

8

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:

gut 1 gut 2 gut 3

manchmal nicht:

schlecht 1 schlecht 2 schlecht 3

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?

George Profenza
quelle

Antworten:

7

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.

John
quelle
cool, ich werde es
versuchen
Ziemlich einfach und ziemlich effektiv. Ich habe mit einigen Optionen gespielt und die Helligkeitsschwelle funktioniert gut, wie Sie in der aktualisierten Skizze sehen können . Anweisungen finden Sie in den Kommentaren auf der linken Seite. Wenn ich Zeit habe, möchte ich vielleicht versuchen, mit verschiedenen Farbräumen zu spielen (wie in L a b * konvertieren und mit den Komponenten spielen), aber im Moment macht das den Job schön und einfach.
George Profenza
3

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.

Ilmari Karonen
quelle
Ich dachte darüber nach, von RGB nach CIE XYZ oder L a b * zu konvertieren . Ich könnte am Ende beide Optionen anbieten. Schöne Antwort (+1)
George Profenza
2

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:

Geben Sie hier die Bildbeschreibung ein

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

Flavius ​​Frantz
quelle
Beachten Sie, dass in Ihren Beispielen der schwarze Text bei den meisten Farben mit 100% Helligkeit / Sättigung in Ordnung aussieht, bei Blau jedoch sehr schlecht. Das liegt daran, dass 100% Blau nur etwa ein Zehntel der wahrgenommenen Helligkeit von beispielsweise 100% Grün aufweist, was bei der Auswahl der Textfarbe berücksichtigt werden muss. (Einzelheiten finden Sie in meiner Antwort.) Grundsätzlich möchten Sie niemals schwarzen Text auf einem gesättigten blauen Hintergrund verwenden.
Ilmari Karonen