mikeo_410

背景色と文字の色

  GUIを作るのに、枠取りのために背景色を使います。たいていは、薄い背景色に黒文字を使います。
  Visual Web Developer Express の「Silverlightアプリケーション」プロジェクトを選んだ場合、XAMLを編集するときの色設定はカラー名の一覧からの選択になります。カラーサンプルが表示されません。
  そこで、一覧にある色名のカラーサンプルを表示してみました。

http://s1.dynamitelife.net/~mikeo410/samples/sla1/sla_color1.html

  このとき、各色の矩形の中に色名を書きましたが、文字色をどうするかと考えました。
  24bitのRGBで考えます。

１．実際に採用した方法

  基本的には、ビット反転です。背景色のR,G,Bをビット反転すれば概ねOKです。白は黒に、黒は白になります。上手くいかないのは、R,G,Bの値が128近傍の箇所です。ビット反転してもあまり値の大きさが変わらないためです。127(0x7f)は、ビット反転しても128(0x80)になるだけです。
  そこで、R,G,Bの2つ以上が128近傍なら、文字色を黒にするようにしました。

２．色の分類

  前述のように一律の方法が採れないなら、色を正しく分類してから対応を考える必要があります。

  左図は、グレースケール、R、G、B に、0から255の値をセットした時の見え方を示します。
  赤の柱は、Rに0から255の値を入れ、G,B は常にゼロです。
  緑、青の柱も同様です。
  グレースケールは、R、G、B に同じ値を設定しました。

  この図から、以下の4つの領域があることが分かります。

１）黒
２）白
３）グレー
４）色付き

  背景と文字の色を考えるとき、反対色とか補色と言った言葉を思い出しますが、これが有効なのは「４）色付き」の部分です。
  RGBを表す数字の組のうち、大きな部分が色のない（黒、白、グレー）になります。
  R、G、B の和が小さいほうは黒になります。
  R、G、Bの値が一様だとグレーになり、和が大きいと白になります。

３．R、G、B の値と見え方

  下の図も、R、G、B の値を0から255まで変化させた図ですが、各図のR、G、B の各柱は、その名前の色以外をタイトルバーの数値に固定しています。
  最初の図(Color 224)のRの柱は、Rは0から255と変化させ、G、B は224に固定です。 

  この図から以下のことがわかります。

1. はっきりグレーと分かる範囲は狭い。
2. R、G、B によってグレーに見える位置にずれはない。(B、R、Gが同じ値ならグレーと言うことが全域で成り立っている。)
3. R、G、B には、同じ値なら、明るさに差がある。暗いほうからB、R、G。
4. このことから、グレーに近い区間の広さが、B、R、Gの順になる。
5. 値が32は、ほぼ黒。（モニタの輝度調整によるとは思うが）
6. Color 255の図を見ると、Bの柱の白が一番広い。（青は暗いので影響が小さい。）

４．白黒を判断する

  R、G、B の和が、ゼロなら黒で、255x3 なら白です。
  液晶モニタを考えると、R、G、B の各値は、背面の蛍光灯の光を絞る絞りの開口率です。ピクセルを構成する各色のフィルタを通過する光の量を調整しています。
  このことから、明るさで白黒を判断するのが良さそうです。光度(Luminous Intensity)、照度(illuminance)、輝度(luminance) 、明度(Brightness)と言った明るさを表す用語があります。このうち、明度と輝度を調べてみます。（光度は発行するもの、照度は物に当たる光を指すようです。）
  System.Drawing.Color.GetBritness() があり、HSBの明度を返します。
  ある色の明度は、その色を表すRGBの3要素の値の最大値と最小値を使い、
  (最大値 + 最小値) / 510
  で、計算されています。この計算では、R、G、B が等価に扱われています。

  L*a*b*での輝度は、R、G、B に異なる係数を掛けて和を求めています。「用語」に計算式を書きました。

５．グレーを判断する

  System.Drawing.Color.GetSaturation()があり彩度を求めることができます。
  しかし、グレースケールは、RGBの3要素のレンジがゼロのことなので、レンジで判断します。

６．色相

  白、黒、グレーを除外できれば、反対色や補色が考えられます。