Wie finde ich eine gut aussehende Schriftfarbe, wenn die Hintergrundfarbe bekannt ist? [geschlossen]


86

Es scheint so viele Web-Apps für Farbkreise, Farbwähler und Farbabstimmungen zu geben, bei denen Sie eine Farbe angeben und sie einige andere Farben finden, die bei kombinierter Verwendung ein harmonisches Layout erzeugen. Die meisten von ihnen konzentrieren sich jedoch nur auf Hintergrundfarben, und jeder Text, der auf jeder Hintergrundfarbe gedruckt wird (wenn in der Vorschau überhaupt Text gedruckt wird), ist entweder schwarz oder weiß.

Mein Problem ist anders. Ich kenne die Hintergrundfarbe, die ich für einen Textbereich verwenden möchte. Ich brauche Hilfe bei der Auswahl einiger Farben (je mehr, desto besser), die ich als Schriftfarben auf diesem Hintergrund verwenden kann. Am wichtigsten ist, dass die Farbe sicherstellt, dass die Schrift lesbar ist (der Kontrast ist nicht zu niedrig, möglicherweise auch nicht zu hoch, um zu vermeiden, dass die Augen gestresst werden) und dass die Kombination aus Vordergrund und Hintergrund einfach gut aussieht.

Kennt jemand eine solche Anwendung? Ich würde eine Webanwendung allem vorziehen, was ich herunterladen muss. Vielen Dank.

Antworten:


39

Wenn Sie einen Algorithmus benötigen, versuchen Sie Folgendes: Konvertieren Sie die Farbe vom RGB-Raum in den HSV-Raum (Farbton, Sättigung, Wert). Wenn Ihr UI-Framework dies nicht kann, lesen Sie diesen Artikel: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Der Farbton ist in [0,360]. Um die "entgegengesetzte" Farbe zu finden (denken Sie an das Farbrad), fügen Sie einfach 180 Grad hinzu:

h = (h + 180) % 360;

Invertieren Sie sie für Sättigung und Wert:

l = 1.0 - l;
v = 1.0 - v;

Zurück in RGB konvertieren. Dies sollte immer einen hohen Kontrast bieten, auch wenn die meisten Kombinationen hässlich aussehen.

Wenn Sie den "hässlichen" Teil vermeiden möchten, erstellen Sie eine Tabelle mit mehreren "guten" Kombinationen und finden Sie die mit dem geringsten Unterschied

def q(x):
    return x*x
def diff(col1, col2):
    return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

und benutze das.


4

Okay, dies ist immer noch nicht die bestmögliche Lösung, aber ein guter Anfang. Ich habe eine kleine Java-App geschrieben, die das Kontrastverhältnis von zwei Farben berechnet und nur Farben mit einem Verhältnis von 5: 1 oder besser verarbeitet - dieses Verhältnis und die von mir verwendete Formel wurden vom W3C veröffentlicht und werden wahrscheinlich die aktuelle Empfehlung ersetzen (welche Ich halte das für sehr begrenzt). Es erstellt eine Datei im aktuellen Arbeitsverzeichnis mit dem Namen "selected-font-colours.html" mit der Hintergrundfarbe Ihrer Wahl und einer Textzeile in jeder Farbe, die diesen W3C-Test bestanden hat. Es wird ein einziges Argument erwartet, nämlich die Hintergrundfarbe.

ZB kann man es so nennen

java FontColorChooser 33FFB4

Öffnen Sie dann einfach die generierte HTML-Datei in einem Browser Ihrer Wahl und wählen Sie eine Farbe aus der Liste. Alle angegebenen Farben haben den W3C-Test für diese Hintergrundfarbe bestanden. Sie können den Grenzwert ändern, indem Sie 5 durch eine Zahl Ihrer Wahl ersetzen (niedrigere Zahlen ermöglichen schwächere Kontraste, z. B. 3 stellt nur sicher, dass der Kontrast 3: 1 beträgt, 10 stellt sicher, dass er mindestens 10: 1 beträgt), und Sie können dies auch abschneiden, um zu hohe Kontraste zu vermeiden (indem sichergestellt wird, dass sie kleiner als eine bestimmte Zahl sind), z. B. Hinzufügen

|| cDiff > 18.0

Durch die if-Klausel wird sichergestellt, dass der Kontrast nicht zu extrem ist, da zu extreme Kontraste Ihre Augen belasten können. Hier ist der Code und viel Spaß beim Herumspielen :-)

import java.io.*;

/* For text being readable, it must have a good contrast difference. Why?
 * Your eye has receptors for brightness and receptors for each of the colors
 * red, green and blue. However, it has much more receptors for brightness
 * than for color. If you only change the color, but both colors have the
 * same contrast, your eye must distinguish fore- and background by the
 * color only and this stresses the brain a lot over the time, because it
 * can only use the very small amount of signals it gets from the color
 * receptors, since the breightness receptors won't note a difference.
 * Actually contrast is so much more important than color that you don't
 * have to change the color at all. E.g. light red on dark red reads nicely
 * even though both are the same color, red.
 */


public class FontColorChooser {
    int bred;
    int bgreen;
    int bblue;

    public FontColorChooser(String hexColor) throws NumberFormatException {
        int i;

        i = Integer.parseInt(hexColor, 16);
        bred = (i >> 16);
        bgreen = (i >> 8) & 0xFF;
        bblue = i & 0xFF;
    }

    public static void main(String[] args) {
        FontColorChooser fcc;

        if (args.length == 0) {
            System.out.println("Missing argument!");
            System.out.println(
                "The first argument must be the background" +
                "color in hex notation."
            );
            System.out.println(
                "E.g. \"FFFFFF\" for white or \"000000\" for black."
            );
            return;
        }
        try {
            fcc = new FontColorChooser(args[0]);
        } catch (Exception e) {
            System.out.println(
                args[0] + " is no valid hex color!"
            );
            return;
        }
        try {
            fcc.start();
        } catch (IOException e) {
            System.out.println("Failed to write output file!");
        }
    }

    public void start() throws IOException {
        int r;
        int b;
        int g;
        OutputStreamWriter out;

        out = new OutputStreamWriter(
            new FileOutputStream("chosen-font-colors.html"),
            "UTF-8"
        );

        // simple, not W3C comform (most browsers won't care), HTML header
        out.write("<html><head><title>\n");
        out.write("</title><style type=\"text/css\">\n");
        out.write("body { background-color:#");
        out.write(rgb2hex(bred, bgreen, bblue));
        out.write("; }\n</style></head>\n<body>\n");

        // try 4096 colors
        for (r = 0; r <= 15; r++) {
            for (g = 0; g <= 15; g++) {
                for (b = 0; b <= 15; b++) {
                    int red;
                    int blue;
                    int green;
                    double cDiff;

                    // brightness increasse like this: 00, 11,22, ..., ff
                    red = (r << 4) | r;
                    blue = (b << 4) | b;
                    green = (g << 4) | g;

                    cDiff = contrastDiff(
                        red, green, blue,
                        bred, bgreen, bblue
                    );
                    if (cDiff < 5.0) continue;
                    writeDiv(red, green, blue, out);
                }
            }
        }

        // finalize HTML document
        out.write("</body></html>");

        out.close();
    }

    private void writeDiv(int r, int g, int b, OutputStreamWriter out)
        throws IOException
    {
        String hex;

        hex = rgb2hex(r, g, b);
        out.write("<div style=\"color:#" + hex + "\">");
        out.write("This is a sample text for color " + hex + "</div>\n");
    }

    private double contrastDiff(
        int r1, int g1, int b1, int r2, int g2, int b2
    ) {
        double l1;
        double l2;

        l1 = ( 
            0.2126 * Math.pow((double)r1/255.0, 2.2) +
            0.7152 * Math.pow((double)g1/255.0, 2.2) +
            0.0722 * Math.pow((double)b1/255.0, 2.2) +
            0.05
        );
        l2 = ( 
            0.2126 * Math.pow((double)r2/255.0, 2.2) +
            0.7152 * Math.pow((double)g2/255.0, 2.2) +
            0.0722 * Math.pow((double)b2/255.0, 2.2) +
            0.05
        );

        return (l1 > l2) ? (l1 / l2) : (l2 / l1);
    }

    private String rgb2hex(int r, int g, int b) {
        String rs = Integer.toHexString(r);
        String gs = Integer.toHexString(g);
        String bs = Integer.toHexString(b);
        if (rs.length() == 1) rs = "0" + rs;
        if (gs.length() == 1) gs = "0" + gs;
        if (bs.length() == 1) bs = "0" + bs;
        return (rs + gs + bs);
    }
}

Plus eins, Kontrastberechnung, genau das, wonach ich gesucht habe.
Max Kielland

2

Dies ist eine interessante Frage, aber ich denke nicht, dass dies tatsächlich möglich ist. Ob zwei Farben als Hintergrund- und Vordergrundfarben "passen" oder nicht, hängt von der Anzeigetechnologie und den physiologischen Eigenschaften des menschlichen Sehens ab, vor allem aber vom persönlichen Geschmack, der durch Erfahrung geprägt ist. Ein kurzer Blick durch MySpace zeigt ziemlich deutlich, dass nicht alle Menschen Farben gleich wahrnehmen. Ich denke nicht, dass dies ein Problem ist, das algorithmisch gelöst werden kann, obwohl es möglicherweise irgendwo eine riesige Datenbank mit akzeptablen passenden Farben gibt.


2

Ich habe etwas Ähnliches aus einem anderen Grund implementiert - das war Code, der dem Endbenutzer mitteilte, ob die von ihm ausgewählten Vordergrund- und Hintergrundfarben zu unlesbarem Text führen würden. Um dies zu tun, anstatt die RGB-Werte zu untersuchen, konvertierte ich den Farbwert in HSL / HSV und bestimmte dann durch Experimente, welcher Grenzwert für die Lesbarkeit beim Vergleich der fg- und bg-Werte lag. Dies ist etwas, das Sie möglicherweise berücksichtigen möchten / müssen.


2

In einer kürzlich von mir erstellten Anwendung habe ich die invertierten Farben verwendet. Berechnen Sie mit den vorliegenden Werten für r, g und b einfach (in diesem Beispiel variiert der Farbbereich von 0 bis 255):

r = 127-(r-127) and so on.

1

Es mag seltsam sein, meine eigene Frage zu beantworten, aber hier ist ein weiterer wirklich cooler Farbwähler, den ich noch nie gesehen habe. Es löst auch nicht mein Problem: - ((((aber ich denke, es ist viel cooler für diese, die ich bereits kenne).

http://www.colorjack.com/

Rechts unter Extras "Farbkugel" auswählen, eine sehr leistungsstarke und anpassbare Kugel (siehe, was Sie mit den Popups oben tun können), "Farbgalaxie". Ich bin mir immer noch nicht sicher, wie das funktioniert, aber es sieht aus cool und "Color Studio" ist auch schön. Außerdem kann es in alle Arten von Formaten exportiert werden (z. B. Illustrator oder Photoshop usw.).

Wie wäre es damit, ich wähle dort meine Hintergrundfarbe aus, lasse sie eine Komplementärfarbe erstellen (vom ersten Popup) - diese sollte den höchsten Kontrast haben und daher am besten lesbar sein. Wählen Sie nun die Komplementärfarbe als Hauptfarbe und wählen Sie Neutral? Hmmm ... auch nicht zu toll, aber wir werden besser ;-)


Nein, es ist überhaupt nicht seltsam, deine eigene Frage zu beantworten. Ich habe es ein paar Mal selbst gemacht und die Antworten da draußen zu bekommen, verbessert nur die Community.
Dillie-O

0

Haben Sie darüber nachgedacht, den Benutzer Ihrer Anwendung sein eigenes Farbschema auswählen zu lassen? Ohne Fehler können Sie nicht alle Ihre Benutzer mit Ihrer Auswahl zufrieden stellen, aber Sie können ihnen erlauben, zu finden, was ihnen gefällt.


1
Es ist nichts Falsches daran, den Benutzer entscheiden zu lassen, aber ich sollte trotzdem ein nützliches Standardfarbthema einfügen, oder? Es kann nicht sein, dass es standardmäßig unlesbar und hässlich ist, bis jeder Benutzer es repariert ;-)
Mecki

0

Ähnlich wie bei @Aaron Digulla, außer dass ich ein Grafikdesign-Tool vorschlagen würde, wählen Sie die Grundfarbe, in Ihrem Fall die Hintergrundfarbe, und passen Sie dann den Farbton, die Sättigung und den Wert an. Auf diese Weise können Sie sehr einfach Farbfelder erstellen. Paint.Net ist kostenlos und ich benutze es die ganze Zeit dafür und auch die Pay-for-Tools werden dies tun.


0

Persönlich glaube ich nicht, dass wir einen Algorithmus finden können, um die am besten übereinstimmende Textfarbe durch Angabe der Hintergrundfarbe zu berechnen.

Ich glaube , zur Zeit der Künstler sollte eine Liste von Farbpaare haben , die eine gute Lesequalität hat, können wir sie auf einen Tisch, und Satz eines dieser Paare zufällig als unsere hinzufügen Lese Thema ...

Das ist sehr vernünftig und wir werden keine hässlichen Farbpaare bekommen ...

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.