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.
Antworten:
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.
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.
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.
Auch wenn dies nicht Ihre Absicht trifft, denke ich, dass es sich lohnt, hier zu posten, weil ich nach ähnlichen Lösungen gesucht habe.
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"
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 ...
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.
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.
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