プログラムでハイコントラストの色を選択する

StackOverflow https://stackoverflow.com/questions/407793

  •  03-07-2019
  •  | 
  •  

質問

これは単純な質問のはずですが、それを機能させる方法が見つかりませんでした。

基本的に、私は Web 開発で使用する愚かな localhost ページを持っています。開発サーバーと C# コードのローカル バージョン (ホスト ファイルを介して開発 URL からリダイレクト) の間をサーフィンしているとき、「dev.foo.com」がローカルまたはサーバーを指すものを時々忘れてしまうことが知られています。

そこで、サーバーからローカルホストを簡単に識別できるように、デフォルト Web ページのデフォルト ページとしてローカルで実行されるページを作成しました。

このページでは、ランダムな背景色の設定など、さまざまな処理がランダムに行われます (D&D のキャラクターの開始ステータスの生成など)。これを行うには、0 ～ 255 の範囲の 3 つの乱数を生成し、CSS で本文の背景色の RGB 値として設定します。

3 つの整数 R、G、B がある場合、2 番目の色が最初の色と高いコントラストを持つように R2、G2、B2 を決定するにはどうすればよいでしょうか?ページの背景色がランダムであるのが好きですが (ランディング ページの見た目に慣れることができません)、テキストが読めるのも好きです。

役に立ちましたか？

解決

色覚自体の解像度が低すぎるため、テキストを読みやすくするには明るさの違いが必要です。

アルゴリズムとして、次のことをお勧めします：

  • ランダムな背景色を選択します。

  • 次に、明るい色か暗い色かを決定します。たとえば、3つの原色の平均が128以上であるかどうかを確認できます。

  • 明るい色には黒のテキスト、暗い色には白いテキストを使用します。

他のヒント

＆quot;コントラスト＆quot;ロードされた単語です。テキストを読みたいだけの場合、簡単な方法の1つは、HSLのような輝度ベースのカラースペースで作業し、輝度が大きく異なる前景色と背景色を選択することです。

HSLとRGB間の変換はよく知られています。詳細については、Wikipediaを参照してください。

実際の色のコントラストについて話している場合、それはほとんどカットアンドドライではありません（私が知る限り、単一の色空間に縮小されていない多くの知覚要因があります）。しかし、あなたはそのレベルの洗練を必要としないと思います。

この PHP ソリューションを確認してください。 PHP を使用した色のコントラストの計算 アンドレアス・ゴール著。もちろんどの言語にも移植できます。

また、彼はコントラスト アナライザの非常に優れたデモンストレーションを行っており、そこで作業するための最小限のコントラスト レベルを見つけることができます。

Color クラスで GetBrightness（）メソッドを使用できます。 0.0（黒の明るさ）から1.0（白）の浮動小数点値を返します。 簡単な解決策は次のとおりです。

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

Palm OSアプリケーションでこのようなことをしました。これが私が思いついたものです。 「ハイコントラスト」が得られるわけではありません。色ですが、非常に読みやすいテキスト色とは十分に異なる背景色を提供します：

  // Black background is a special case.  It's fairly likely to occur and 
  // the default color shift we do isn't very noticeable with very dark colors.
  if (backColor.r < 0x20 && backColor.g < 0x20 && backColor.b < 0x20)
  {
      textColor.r = backColor.r + 0x20;
      textColor.g = backColor.g + 0x20;
      textColor.b = backColor.b + 0x20;
  }
  else
  {
      textColor.r = backColor.r + ((backColor.r < 128) ? 0x10 : -0x10);
      textColor.g = backColor.g + ((backColor.g < 128) ? 0x10 : -0x10);
      textColor.b = backColor.b + ((backColor.b < 128) ? 0x10 : -0x10);
  }

目的のために特殊なケースとして黒をする必要はないかもしれません-Palmのカラー処理は少しファンキーです（16ビットカラー）。

これらの答えは、色が明るいか暗いかに基づいて、2つまたは3つの色の選択肢のいずれかを使用することをおおよそ示唆しています。

私は少し異なるアプローチを使用しており、私の場合はうまく機能しました。実装は次のとおりです。

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

シンプルで素晴らしい。

すべてのビットを反転すると、「反対」が得られます。かなり良いコントラストになる色。

C＃の〜演算子だと思います：

R2 = ~R1;
G2 = ~G1;
B2 = ~B1;

最高のコントラストを得るには、このコードを使用してください

function lumdiff($R1,$G1,$B1,$R2,$G2,$B2){

    $L1 = 0.2126 * pow($R1/255, 2.2) +
          0.7152 * pow($G1/255, 2.2) +
          0.0722 * pow($B1/255, 2.2);

    $L2 = 0.2126 * pow($R2/255, 2.2) +
          0.7152 * pow($G2/255, 2.2) +
          0.0722 * pow($B2/255, 2.2);

    if($L1 > $L2){
        return ($L1+0.05) / ($L2+0.05);
    }else{
        return ($L2+0.05) / ($L1+0.05);
    }
}

function get_the_contrast($c1, $c2) {
    return (lumdiff(hexdec(substr($c1,0,2)),
        hexdec(substr($c1,2,2)),hexdec(substr($c1,4,2)),
        hexdec(substr($c2,0,2)),hexdec(substr($c2,2,2)),
        hexdec(substr($c2,4,2))));
}

上記のメソッド（AVG（red、green、blue）＆gt; 128）は、あまり良い方法ではありません。

private Color GetContrastingColor(Color color)
{
    int r = color.R > 0 ? 256 - color.R : 255;
    int g = color.G > 0 ? 256 - color.G : 255;
    int b = color.B > 0 ? 256 - color.B : 255;
    return System.Drawing.Color.FromArgb(r, g, b);
}

@starblue に感謝！

これは、私が使用する C＃コードです

 public static string GetContrastBlackOrWhiteColorAsHtmlColorCode(Color c)
        {
            System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("transparent");

            try
            {
                if (c.R >= 128 && c.G >= 128 && c.B >= 128)
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.Black);
                }
                else
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.White);
                }
            }
            catch (Exception)
            {
            }

            return System.Drawing.ColorTranslator.ToHtml(color);
        }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top