Gute Textvordergrundfarbe für eine gegebene Hintergrundfarbe

75

Ich zeichne eine Farbauswahlschaltfläche und suche nach einer schönen und einfachen Formel, um eine gute Textfarbe (Vordergrund) für eine bestimmte Hintergrundfarbe in RGB zu erhalten.

Ein einfacher Versuch wäre, nur die Komplementärfarbe zu verwenden, aber dies erzeugt einen seltsam aussehenden Knopf für Farben wie reines Blau oder reines Rot.
Gibt es etwas Bekanntes, das dies tut?

Wenn es überhaupt darauf ankommt, verwende ich QT.

shoosh
quelle
4
Komplementärfarben haben auch das Problem, dass Grau Grau zugeordnet wird.
Shoosh
Dieses barrierefreie
Farbwerkzeug

Antworten:

126

Für maximale Lesbarkeit möchten Sie einen maximalen Helligkeitskontrast, ohne in Farbtöne zu geraten, die nicht zusammenarbeiten. Der konsequenteste Weg, dies zu tun, besteht darin, für die Textfarbe bei Schwarz oder Weiß zu bleiben . Möglicherweise können Sie ästhetisch ansprechendere Schemata entwickeln, aber keines davon ist besser lesbar.

Um zwischen Schwarz und Weiß zu wählen, müssen Sie die Helligkeit des Hintergrunds kennen. Dies wird aus zwei Gründen etwas komplizierter:

  • Die wahrgenommene Helligkeit der einzelnen Primärfarben Rot, Grün und Blau ist nicht identisch. Der schnellste Rat, den ich geben kann, ist die Verwendung der traditionellen Formel, um RGB in Grau umzuwandeln - R * 0,299 + G * 0,587 + B * 0,114. Es gibt viele andere Formeln.

  • Durch die auf Anzeigen angewendete Gammakurve ist der mittlere Grauwert höher als erwartet. Dies lässt sich leicht lösen, indem 186 anstelle von 128 als Mittelwert verwendet wird. Bei weniger als 186 sollte weißer Text verwendet werden, bei mehr als 186 sollte schwarzer Text verwendet werden.

Mark Ransom
quelle
1
Nehmen wir an, wir haben eine Hintergrundfarbe, die genau in der Mitte des Graustufenspektrums liegt. Wird diese Farbe nicht vom System gamma-codiert, bevor sie vom Monitor gamma-decodiert wird? Wenn ja, warum sollten wir eine zweite Schicht der Gamma-Decodierung anwenden, indem wir den Mittelpunkt auf 186 setzen? Oder fehlt mir hier etwas?
Levi Botelho
1
@LeviBotelho, nein, das System führt keine Gamma-Codierung durch. Es wird davon ausgegangen, dass alle RGB-Werte, mit denen es arbeitet, bereits Gamma-codiert sind. Auf einem richtig kalibrierten Monitor werden Sie feststellen, dass abwechselnde Linien von 0/255 die gleiche Helligkeit haben wie ein grauer Block von 186. Da die meisten Monitore nicht kalibriert sind, variiert dies etwas, zum Beispiel ist mein eigener näher an 167.
Mark Lösegeld
Danke für die Erklärung. Gutes Beispiel mit den Wechsellinien!
Levi Botelho
Hinweis für alle: Wenn Sie W3C-Konformität benötigen, lesen Sie bitte stackoverflow.com/a/3943023/5987 .
Mark Ransom
11

Ich bin kein Experte für das Programmieren von Dingen im Zusammenhang mit RGB, aber aus der Sicht eines Designers ist die am besten lesbare Farbe oft nur eine viel hellere (wenn die Hintergrundfarbe dunkel ist) oder dunklere (wenn die Hintergrundfarbe hell ist) Version der gleicher Farbton.

Grundsätzlich würden Sie Ihre RGB-Werte nehmen und wenn sie näher an 0 (dunkel) liegen, würden Sie sie jeweils um den gleichen Betrag für Ihre Vordergrundfarbe nach oben drücken oder umgekehrt, wenn es sich um einen hellen Hintergrundwert handelt.

Komplementärfarben können für die Lesbarkeit sehr schmerzhaft für die Augen sein.

Gabriel Hurley
quelle
Ich bin damit einverstanden, wählen Sie einen dunkleren oder helleren Farbton der gleichen Farbe. Dies wäre auch einfach programmatisch zu tun
Gonzohunter
1
Kümmere dich um die daltonischen Leute . Einer meiner Universitätslehrer hatte zum Beispiel große Schwierigkeiten, Blautöne zu unterscheiden.
ANeves hält SE für böse
Der effektivste Weg, dies zu tun, besteht darin, die Deckkraft zu verwenden, anstatt die RGB-Werte tatsächlich zu ändern. Wenn Sie also möchten, dass der Text heller wird, verwenden Sie ein transparentes Weiß und für dunkler ein transparentes Schwarz. google.com/design/spec/style/…
Jesse Elliott
9

Nutzen Sie einen Umriss für die Lesbarkeit

Wenn Sie mit "gute Textfarbe (Vordergrund)" dies aus Gründen der Lesbarkeit beabsichtigen, wenn der Benutzer dies wünscht any background colour, können Sie immer weißen Text mit einem schwarzen Umriss erstellen. Es ist auf jedem festen, gemusterten oder verlaufenden Hintergrund lesbar, von Schwarz über Weiß bis hin zu allem dazwischen.

Geben Sie hier die Bildbeschreibung ein

Auch wenn dies nicht Ihre Absicht trifft, denke ich, dass es sich lohnt, hier zu posten, weil ich nach ähnlichen Lösungen gesucht habe.

John K.
quelle
4

Aufbauend auf Marks Antwort finden Sie hier einen Ruby-Code, der die Arbeit erledigt

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"
Darren Hicks
quelle
2
Qt / c ++ - Äquivalent: automatische Helligkeit = pinsel.redF () * 0,299 + pinsel.greenF () * 0,587 + pinsel.blauF () * 0,114; painter.setPen ((Helligkeit> 0,6)? Qt :: schwarz: Qt :: weiß); // Text
Roberto
3

Mit einem hohen Helligkeitsunterschied sind Sie besser dran. Im Allgemeinen saugen farbige Hintergründe mit farbigem Text die Lesbarkeit und verletzen die Augen im Laufe der Zeit. Leicht getönte Farben (z. B. in HSB, S ~ 10%, B> 90%) mit schwarzem Text funktionieren gut oder leicht getönter Text über einem schwarzen Hintergrund. Ich würde mich davon fernhalten, beide zu färben. Dunkler Text (b ~ 30%, s> 50%) mit einer subtilen Färbung über einem weißen Hintergrund kann ebenfalls in Ordnung sein. Gelber (bernsteinfarbener) Text auf einem tiefblauen Hintergrund ist ebenso gut lesbar wie Bernstein oder Grün auf Schwarz. Aus diesem Grund haben sich alte Dummköpfe (vt100, vt52 usw.) für diese Farben entschieden.

Wenn Sie für den 'Look' wirklich Farbe auf Farbe machen müssen, können Sie sowohl H als auch B umkehren, während Sie die Sättigung auf einem moderaten bis niedrigen Niveau fixieren.

Und noch ein letzter Hinweis: Wenn Sie einen grauen Hintergrund von 50% haben, überdenken Sie Ihre Benutzeroberfläche. Sie rauben sich die Hälfte Ihres Dynamikbereichs! Sie entfremden Benutzer mit geringer Sichtbarkeit, einschließlich Personen über 35 ...

Alex Feinman
quelle
2

Farbkombinationen sehen oft schrecklich aus, wenn sie nicht sorgfältig ausgewählt werden. Verwenden Sie für den Text je nach Helligkeit der Farbe entweder Weiß oder Schwarz. (Muss zuerst auf HSB konvertiert werden.)

Oder lassen Sie den Benutzer entweder schwarzen oder weißen Text auswählen.

Oder verwenden Sie vordefinierte Kombinationen. Dies ist, was Google in seinem Kalenderprodukt tut.

Larry K.
quelle
1

Ich habe nach einer ähnlichen Antwort gesucht und bin auf diesen und einige andere Beiträge gestoßen, von denen ich dachte, ich würde sie teilen. Laut http://juicystudio.com/services/luminositycontrastratio.php#specify erfordert das "Erfolgskriterium 1.4.3 der WCAG 2.0 die visuelle Darstellung von Text und Textbildern mit einigen ein Kontrastverhältnis von mindestens 4,5: 1" Ausnahmen. Auf dieser Site können Sie Vordergrund- und Hintergrundfarben eingeben, um deren Kontrast zu berechnen. Dies wäre jedoch hilfreich, wenn Sie Alternativen oder Bereiche vorschlagen würden.

Eine der besten Websites, die ich zur Visualisierung des Farbkontrasts gefunden habe, ist http://colorizer.org/. Hier können Sie fast alle Arten von Farbskalen (RGB, CMYK usw.) gleichzeitig anpassen und dann das Ergebnis anzeigen auf dem Bildschirm, z. B. weißer Text auf gelbem Hintergrund.

elg
quelle
Ich fand, dass dies eher zum Testen als zur Entwurfsphase geeignet ist
Edward Chan JW
0

Normalerweise schaue ich mir Farbkomplemente an, sie haben auch Farbkomplementierungsräder, um zu helfen

http://www.makart.com/resources/artclass/cwheel.html

Wenn Ihre Farbe HSL ist, drehen Sie den Farbton für eine anständige Berechnung um 180 Grad

Bob
quelle
13
Geben Sie mir eine Bewerbung mit grünem Text auf rotem Hintergrund (oder umgekehrt) und Sie werden herausfinden, wo ich die anderen Leichen begraben habe.
Adam Robinson
-1

Ich denke, dass die Umstellung auf HSV der Weg sein könnte, aber der IMO-Farbton würde seltsam aussehen. Ich würde versuchen, den Farbton beizubehalten und mit dem Wert und vielleicht der Sättigung herumzuspielen (hellrote Knöpfe mit dunkelrotem Text ... hm klingt beängstigend :-)).

Würfel
quelle