webentwicklung-frage-antwort-db.com.de

Gute Textvordergrundfarbe für eine bestimmte Hintergrundfarbe

Ich zeichne eine Farbauswahlschaltfläche und suche eine nette und einfache Formel, um eine gute Textfarbe (Vordergrund) für eine bestimmte Hintergrundfarbe in RGB zu erhalten.

Ein einfacher Versuch wäre, nur die Komplementfarbe zu nehmen, 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.

72
shoosh

Für maximale Lesbarkeit möchten Sie einen maximalen Helligkeitskontrast ohne Farbtöne, die nicht zusammenarbeiten. Der konsequenteste Weg, dies zu tun, ist dabei zu bleiben schwarz oder weiß für die Textfarbe. 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 zur Konvertierung von RGB in Grau - R * 0,299 + G * 0,587 + B * 0,114. Es gibt viele andere Formeln.

  • Durch die Gammakurve, die auf die Anzeigen angewendet wird, 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.

121
Mark Ransom

Ich bin kein Experte für die Programmierung von RGB-bezogenen Dingen, 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 Schatten.

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

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

11
Gabriel Hurley

Nutzen Sie eine Übersicht für die Lesbarkeit

Wenn durch "gute Textfarbe (Vordergrund)" beabsichtigen Sie es für Lesbarkeit Zwecke, wenn der Benutzer wählt any background colour können Sie immer weißen Text mit einem schwarzen Umriss erzeugen. Es ist auf jedem festen, gemusterten oder verlaufenden Hintergrund lesbar, von Schwarz über Weiß bis zu allem dazwischen.

enter image description here

Auch wenn dies nicht Ihren Vorstellungen entspricht, finde ich, dass es sich lohnt, es hier zu veröffentlichen, da ich nach ähnlichen Lösungen gesucht habe.

9
John K

Aufbauend auf Marks Antwort ist hier ein 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"
4
Darren Hicks

Mit einem hohen Helligkeitsunterschied sind Sie besser dran. Im Allgemeinen saugen farbige Hintergründe mit farbigem Text an der Lesbarkeit und verletzen die Augen mit der Zeit. Leicht getönte Farben (z. B. in HSB, S ~ 10%, B> 90%) mit schwarzem Text funktionieren einwandfrei oder leicht getönter Text auf schwarzem Hintergrund. Ich würde mich davon fernhalten, beide zu färben. Dunkler Text (b ~ 30%, s> 50%) mit einer subtilen Färbung auf 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 Hanteln (vt100, vt52 usw.) für diese Farben entschieden.

Wenn Sie wirklich Farbe für Farbe für den "Look" 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 eine letzte Anmerkung: Wenn Sie einen 50% igen grauen Hintergrund haben, überdenken Sie Ihre Benutzeroberfläche. Sie rauben sich die Hälfte Ihres Dynamikumfangs! Sie entfremden Benutzer mit geringer Sichtbarkeit, einschließlich aller über 35-Jährigen ...

3
Alex Feinman

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

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.

2
Larry K

Ich habe nach einer ähnlichen Antwort gesucht und bin auf diesen und einige andere Beiträge gestoßen, die ich gerne geteilt hätte. 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 einem Kontrastverhältnis von at mindestens 4,5: 1 "mit einigen Ausnahmen. Auf dieser Site können Sie Vorder- und Hintergrundfarben eingeben, um deren Kontrast zu berechnen. Es wäre jedoch hilfreich, wenn Sie Alternativen oder Bereiche vorschlagen würden.

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

1
elg

Normalerweise schaue ich mir Farbkomplemente an, sie haben auch Farbkomplementrä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

0
Bob