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

ジョセフ・デイグル

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

アルゴリズムはあると思いますが、色や明るさなどを自分で理解するのに十分な知識がありません。

ガセク

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

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

これが私が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を「知覚輝度」に変更しました-本当に良く見えます!すでに私のソフトウェアに実装されており、見栄えがします。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

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

分類Dev

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

分類Dev

reactJsを使用して背景色に基づいてフォントの色を変更する方法

分類Dev

背景色に応じて白または黒のフォントの色を決定するにはどうすればよいですか?

分類Dev

背景色に基づいて色を変更する

分類Dev

YAMLフロントマターに基づいて背景色を設定する方法(Jekyll)

分類Dev

YAMLフロントマターに基づいて背景色を設定する方法(Jekyll)

分類Dev

別のセルの背景色に基づいてセルの背景色を設定する

分類Dev

動的に変化する背景色に基づいてテキストの色を動的に変更する方法

分類Dev

背景画像に基づいてフォントの色を変更する

分類Dev

無効になっているラベルの色は、背景色に基づいてどのように決定されますか?

分類Dev

背景色の入力に基づいて、テキストの前景色の色を変更します

分類Dev

テキストの変更に基づいて背景色を変更する

分類Dev

背景色に基づいてPS1の色を変更しますか?

分類Dev

クリックボタンの色に基づいて入力の背景色を変更します。

分類Dev

日付に基づいて背景色を設定するプラス

分類Dev

他のdivの背景色に基づいてdivの背景色を変更する

分類Dev

変数に基づいてAndroidの背景色を設定できますか?

分類Dev

背景に基づいてナビゲーションフォントの色を変更する

分類Dev

Angularjsの背景色に基づいてテキストの色を自動的に変更するにはどうすればよいですか?

分類Dev

grid.table plots:行の値に基づいてセルの背景色を設定する

分類Dev

入力値に基づいて背景色を変更する

分類Dev

値に基づいて背景色を変更する方法

分類Dev

入力に基づいて背景色を更新する

分類Dev

SCSS:アラートコンポーネント-背景色に基づいてSVGの色を変更しますか?

分類Dev

編集可能なプロパティに基づいてDataGridview列の背景色を設定する

分類Dev

セルの値に基づいて行の背景色を変更する

分類Dev

ListBoxItem値に基づいてListBoxItemの背景色を変更する方法

分類Dev

セル値に基づいて行の背景色を変更する方法

Related 関連記事

  1. 1

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

  2. 2

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

  3. 3

    reactJsを使用して背景色に基づいてフォントの色を変更する方法

  4. 4

    背景色に応じて白または黒のフォントの色を決定するにはどうすればよいですか?

  5. 5

    背景色に基づいて色を変更する

  6. 6

    YAMLフロントマターに基づいて背景色を設定する方法(Jekyll)

  7. 7

    YAMLフロントマターに基づいて背景色を設定する方法(Jekyll)

  8. 8

    別のセルの背景色に基づいてセルの背景色を設定する

  9. 9

    動的に変化する背景色に基づいてテキストの色を動的に変更する方法

  10. 10

    背景画像に基づいてフォントの色を変更する

  11. 11

    無効になっているラベルの色は、背景色に基づいてどのように決定されますか?

  12. 12

    背景色の入力に基づいて、テキストの前景色の色を変更します

  13. 13

    テキストの変更に基づいて背景色を変更する

  14. 14

    背景色に基づいてPS1の色を変更しますか?

  15. 15

    クリックボタンの色に基づいて入力の背景色を変更します。

  16. 16

    日付に基づいて背景色を設定するプラス

  17. 17

    他のdivの背景色に基づいてdivの背景色を変更する

  18. 18

    変数に基づいてAndroidの背景色を設定できますか?

  19. 19

    背景に基づいてナビゲーションフォントの色を変更する

  20. 20

    Angularjsの背景色に基づいてテキストの色を自動的に変更するにはどうすればよいですか?

  21. 21

    grid.table plots:行の値に基づいてセルの背景色を設定する

  22. 22

    入力値に基づいて背景色を変更する

  23. 23

    値に基づいて背景色を変更する方法

  24. 24

    入力に基づいて背景色を更新する

  25. 25

    SCSS:アラートコンポーネント-背景色に基づいてSVGの色を変更しますか?

  26. 26

    編集可能なプロパティに基づいてDataGridview列の背景色を設定する

  27. 27

    セルの値に基づいて行の背景色を変更する

  28. 28

    ListBoxItem値に基づいてListBoxItemの背景色を変更する方法

  29. 29

    セル値に基づいて行の背景色を変更する方法

ホットタグ

アーカイブ