web-dev-qa-db-ja.com

背景色がわかっている場合に見栄えの良いフォントの色を見つける方法

そこには非常に多くのカラーホイール、カラーピッカー、およびカラーマッチャーのWebアプリがあり、1つの色を指定すると、組み合わせて使用​​すると調和のとれたレイアウトを作成する他の色がいくつか見つかります。ただし、それらのほとんどは背景色のみに焦点を当てており、各背景色で印刷されるテキスト（プレビューでテキストがまったく印刷される場合）は黒または白です。

私の問題は異なります。テキスト領域に使用する背景色がわかっています。私が助けが必要なのは、この背景でフォントの色として使用できるいくつかの色（より多く、陽気）を選択することです。最も重要なのは、色がフォントを読みやすくすることです（コントラストが低すぎず、目がストレスにならないように高すぎないこともあります）。そしてもちろん、前景と背景の組み合わせがちょうどよく見えることです。

そのようなアプリケーションを知っている人はいますか？私はダウンロードしなければならないものよりもウェブアプリケーションを好むでしょう。ありがとう。

colorsaccessibilityreadability
86
Mecki

アルゴリズムが必要な場合は、これを試してください。色をRGB空間からHSV空間に変換します（色相、彩度、値）。 UIフレームワークでできない場合は、この記事を確認してください： http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

色相は[0,360）です。 「反対の」色を見つけるには（カラーホイールを考えてください）、180度追加するだけです：

h = (h + 180) % 360;

彩度と値については、それらを反転します。

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

RGBに戻します。ほとんどの組み合わせは見苦しくなりますが、これにより常に高いコントラストが得られます。

「ugい」部分を避けたい場合は、いくつかの「良い」組み合わせでテーブルを作成し、最も差の少ないものを見つけます

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))

そしてそれを使用します。

39
Aaron Digulla

さて、これはまだ最善の解決策ではありませんが、開始するのに良い点です。私は少しのJava 2色のコントラスト比を計算し、5：1以上の比で色のみを処理するアプリを書いた-この比と私が使用する式はW3Cによってリリースされたおそらく現在の推奨事項（これは非常に限られていると思われます）に置き換わるものです。選択した背景色とすべての色のテキスト行を含む "chosen-font-colors.html"という名前の現在の作業ディレクトリにファイルを作成します。このW3Cテストに合格し、背景色である単一の引数が必要です。

例えば。このように呼ぶことができます

Java FontColorChooser 33FFB4

次に、選択したブラウザで生成されたHTMLファイルを開き、リストから色を選択します。指定されたすべての色は、この背景色のW3Cテストに合格しました。 5を任意の数に置き換えることでカットオフを変更できます（数字が小さいほどコントラストが弱くなります。たとえば、3ではコントラストが3：1になり、10ではコントラストが少なくとも10：1になります）。高すぎるコントラストを避けるためにカットオフします（特定の数よりも小さいことを確認することにより）。例えば追加

|| cDiff > 18.0

if句を使用すると、極端なコントラストが目を圧迫する可能性があるため、コントラストが極端になりすぎないようにします。コードは次のとおりです。少し遊んでみてください:-)

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);
    }
}
4
Mecki

別の理由で似たようなものを実装しました-それは、選択した前景色と背景色が読めないテキストになるかどうかをエンドユーザーに伝えるコードでした。これを行うには、RGB値を調べるのではなく、色の値をHSL/HSVに変換し、実験によってfgとbgの値を比較する際の読みやすさのカットオフポイントを決定しました。これはあなたが考慮したい/必要なものです。

2
RedFilter

これは興味深い質問ですが、これが実際に可能だとは思いません。 2色が背景色と前景色として「適合する」かどうかは、ディスプレイ技術と人間の視覚の生理学的特性に依存しますが、最も重要なのは、経験によって形作られた個人の好みに依存します。 MySpaceをざっと見てみると、すべての人間が同じように色を認識しているわけではないことがはっきりとわかります。これはアルゴリズム的に解決できる問題ではないと思いますが、許容できる一致する色の巨大なデータベースがあるかもしれません。

2
MusiGenesis

私が最近作成したアプリケーションでは、反転色を使用しました。 r、g、bの値を手にして、計算するだけです（この例では、色の範囲は0から255まで変化します）。

r = 127-(r-127) and so on.
2
Flávio Batista

私自身の質問に答えるのは奇妙かもしれませんが、これまで見たことのない別の非常にクールなカラーピッカーを紹介します。それは私の問題も解決しません： （（（しかし、私はすでに知っているこれらにはるかにクールだと思います。

---（http://www.colorjack.com/

右側の[ツール]で、[色の球体]、非常に強力でカスタマイズ可能な球体（上のポップアップでできることを参照）、[色の銀河]を選択します。クールで「Color Studio」もいいです。さらに、すべての種類の形式（IllustratorやPhotoshopなど）にエクスポートできます。

これについては、背景色を選択して、（最初のポップアップから）補色を作成します-これは最高のコントラストを持っているため、最も読みやすく、補色をメインカラーとして選択し、ニュートラルを選択しますか？うーん...あまり大きくないですが、良くなっています;-)

1
Mecki

個人的には、背景色を指定して、最も一致するテキストの色を計算するアルゴリズムを見つけることはできないと思います。

私は現在、アーティストは読み品質の良い色のペアのリストを持っているべきだと思います。それらをテーブルに追加し、これらのペアの1つをreading theme ...

これは非常に合理的であり、weい色のペアは取得しません。

0
flypig

アプリケーションのユーザーに独自の配色を選択させることを検討しましたか？間違いなく、選択したすべてのユーザーを満足させることはできませんが、ユーザーに満足させるものを見つけることができます。

0
billcoke

@Aaron Digullaの提案に似ていますが、グラフィックデザインツールを提案し、ベースカラー、場合によっては背景色を選択してから、色相、彩度、値を調整します。これを使用すると、非常に簡単に色見本を作成できます。 Paint.Netは無料であり、私はこれを常に使用しています。また、有料ツールもこれを行います。

0
MotoWilliams