ランダムな背景色に最適なタイプの色を計算する方法は？

観察者からディスプレイまでの距離に応じて、コンテンツを複数のレベルで提示する必要がある場合があります。遠くからユーザーがフラットな色を知覚するとしますが、近い距離からユーザーはテキストを読むことができる必要があります。トリッキーな部分は、フラットな背景色が指定されている/変更できる/制御できないことです。

これまでのところ、本当に基本的なプロトタイプを作成して、背景色からテキストの色を計算しました（ランダムな背景をクリックして選択します）。これは非常に簡単なアプローチです。色相を取り、90度オフセットし（十分に異なるため）、HSB色空間の明るさを反転させて、背景とのコントラストがはっきりと判読できるほど異なる色を取得します。 。

これは時々動作します：

時々しない：

このアプローチは良い/良い方向ですか？もしそうなら、どうすればこれをより良くすることができますか？そうでない場合、どの方向に進むべきですか？

残念ながら、タイプや色の理論についてはあまり知りませんので、経験のある人からのヒントやヒントは非常に役に立ちます。これは画面に表示され、印刷されません。

背景色と前景色のどのような関係を探していますか？

読みやすさはすべてコントラストです。私は、各背景色がグレースケールでどのくらい暗いかを試してみて、50％グレーを超える（光よりも暗い）場合は白いテキストを使用し、50％未満は黒いテキストを使用します。これにより、テキストを読みやすくするために少なくとも50％のコントラスト（色調の違い）が確保されます。

この方法は、補色を使用したり反転したりするよりもはるかに簡単で、あらゆる色で最大の色調コントラストを保証します。

ここで、ゲーム開発スタック交換での本質的に同じ質問に対する私の以前の回答。

要約すると、ここで提案されている他の回答と同様に、背景とのコントラストが良い方に応じて、通常は黒または白のいずれかを使用する必要があります。（もちろん、どちらか一方の色にわずかな色合いを付けても、コントラストにはあまり影響しません。）

ユーザーに表示される色の濃淡を正しく判断するには、RGBカラー値を平均するだけでは十分ではないことに注意してください（またはHSL / HSVカラーの明度/値を取得する）。むしろ、（少なくとも）2つの影響を考慮する必要があります。

1. 色が表示されるデバイスの非線形性（少なくともコンピューター画面のRGB色の場合）は中間調を暗くする傾向があります。

2. 人間の目の分光感度。大まかに言うと、可視スペクトルの中央付近の色（緑、黄色、シアン）が、端の近くの色（青、赤、紫）よりも明るく見えます。

最初の問題はガンマ拡張によって説明できますが、2番目の問題はR / G / Bカラーチャネルの不均一な重み付けを必要とするだけです。まとめると、RGBカラーの知覚される明るさをおおよそ計算し、黒と白のどちらがコントラストが良いかを判断する方法は次のとおりです。

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

これはR、GおよびBが0.0〜1.0の浮動小数点数であることを前提としています。たとえば、0〜255の整数がある場合、それらを浮動小数点数に変換し、255で除算します。

上記のコードの定数は、sRGB入力に対して（ほぼ）正しいです。他の色空間で作業している場合は調整できますが、正確な値はそれほど重要ではありません。十分に暗い色または明るい色の場合は、答えは同じですが、境界線の近くにある色は対照的ですとにかく、黒か白のどちらかとほぼ同じくらいです。

私はジョンに同意します。念のため、テキストをできるだけ黒/白に保ちます。テキストに少量の彩度を追加することもでき、安全です。ここに小さなテストがあります：

ここでは100％で表示： http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.pngは ：周りを再生するには、ここ.AI（ソース）ファイルをダウンロードし ます。http：//フラウィウス。 clickgarden.net/random-hsb-bg-readable-text/test.ai