☰

背景色に基づいてフォントの色を決定する 質問する

tag-icon • tag-icon algorithm language-agnostic colors
背景色に基づいてフォントの色を決定する 質問する

ユーザーが一部のセクションの背景色をカスタマイズできるが、フォント色はカスタマイズできない（オプションの数を最小限に抑えるため）システム（たとえば、Web サイト）の場合、「明るい」フォント色と「暗い」フォント色のどちらが必要かをプログラムで判断する方法はありますか?

何らかのアルゴリズムがあるのは確かですが、色や明度などについて自分で理解できるほどの知識はありません。

ベストアンサー1

私も同様の問題に遭遇しました。カラースケール/ヒートマップにテキスト ラベルを表示するために、コントラストの強いフォント色を選択する適切な方法を見つける必要がありました。これは普遍的な方法で、生成された色は「見栄えが良い」ものでなければなりませんでした。つまり、単純に補色を生成するだけでは適切な解決策ではありませんでした。奇妙で非常に強い色が生成されることがあり、見にくく、読みにくいことがありました。

長時間のテストとこの問題の解決を試みた後、最善の解決策は「暗い」色には白いフォントを選択し、「明るい」色には黒いフォントを選択することであることがわかりました。

以下は C# で使用している関数の例です。

Color ContrastColor(Color color)
{
    int d = 0;
    
    // Counting the perceptive luminance - human eye favors green color...      
    double luminance = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;
    
    if (luminance > 0.5)
       d = 0; // bright colors - black font
    else
       d = 255; // dark colors - white font
                
    return  Color.FromArgb(d, d, d);
}

これは、さまざまなカラースケール (レインボー、グレースケール、ヒート、アイスなど) でテストされており、私が見つけた唯一の「ユニバーサル」な方法です。

編集
カウントの式をa「知覚輝度」に変更しました。見た目が本当に良くなりました。すでにソフトウェアに実装済みで、見栄えも素晴らしいです。

編集 2 @WebSeed がこのアルゴリズムの優れた実例を提供しました:http://codepen.io/WebSeed/full/pvgqEq/

おすすめ記事