背景色に基づいて前景色を自動的に選択する


7

背景色(背景色はどの色でもかまいません)に基づく前景色の適切な「式」は何ですか?

より詳しい情報:

アプリケーションで、(均一な)背景色に基づいて前景色を選択する必要があります。RGBコンポーネントの合計が(255x3)/ 2を超える場合は、それ以外の場合はという線に沿って考えていました。しかし、むしろ専門家の意見を得たい。これを行うための認められた方法はありますか?またはあなたは何を提案しますか?

同様の質問がありますが、回答は基本的に、使用可能な背景色を制限するためのものです。この場合、それはオプションではありません。


2
この質問は、グラフィックデザインではなく、プログラミングに関するもののように見えるので、トピックから外れたものとして締めくくります。
スコット

@スコットそれはグラフィックデザインについてです-背景色に基づいて適切な前景色は何ですか。それでおしまい。RGBの要素は、考えられる回答者に役立つ可能性のあるコンテキストを周囲に配置することです。私はプログラミングをするのに助けを求めているのではなく、それが私の仕事です。(そしてこの場合は
取るに足らないこと

@Scott質問を編集して、わかりやすくしました。
ispiro 2015年

それでも私にとってアプリケーションのプログラミングについてのようですが、私はたった1票です。他のユーザーの意見を見てください。どちらかといえば、それはこれの可能性重複です:graphicdesign.stackexchange.com/questions/19/...またはこの:graphicdesign.stackexchange.com/questions/9094/...
スコット

1
私が質問を理解しているかどうかはわかりませんが、これが何らかの形で役立つ場合は、アプリのGoogle開発色の仕様に手掛かりが見つかるかもしれません(私は信じています)。そのガイドには、背景と他のインターフェイス要素の防弾手順が既に含まれており、通常は非常に優れたコントラストが得られます。一般に、20〜30%と100%を使用すると、コントラストと可読性が向上します(50%ではコントラストが不十分です)。印刷の場合、100%のテキストが上にある背景要素は10%に固執することをお勧めします。google.com/design/spec/style/color.html理解できるといいのですが。
go-junta 2015年

回答:


2

先ほどゲーム開発スタックエクスチェンジで同様の質問に回答しので、そこで回答をまとめてみましょう。

黒か白のどちらかを選択するという考えは、どちらが背景色とコントラストが良いかに応じて、適切です。ただし、RGBコンポーネントを平均化するだけでは、(主に)2つの理由により、特定の色が人間の目にどのように見えるかを適切に示すことができません。

まず第一に、人間の色知覚に関連する理由により、赤、緑、青のチャンネルは同じ相対輝度を持ちません。実際、純粋な青(#0000ff)は、純粋な緑()の約10%の明るさ(および純粋な赤は約30%の明るさ#00ff00)です。したがって、たとえば純粋な青の黒のテキストは、特に優れたコントラストを持つことはありません。

たとえば、以下の画像は、純粋な赤、緑、青の背景(#ff0000#00ff00および#0000ff)の白黒テキストの例を示しています。

純粋なRGB赤の黒と白のテキスト 純粋なRGB緑の黒と白のテキスト 純粋なRGB青の黒と白のテキスト

これらのすべての色の平均RGB値は同じですが、コントラストの違いをはっきりと見ることができます。

他の複雑な点は、通常コンピュータ画面で使用されるRGBカラースペース(sRGBなど)が線形ではなく、ディスプレイガンマが約2程度であることです。つまり、たとえば、RGBカラー#7f7f7f= "50%グレー"は、実際には純白(#ffffff)の半分の明るさではなく、約25%しか明るく表示されません。実際には「75%グレー」に近い(#bfbfbf)。

しかし、便利なことに、人間の目も非線形であり、暗い色合いの違いに敏感です。実際、グレーのシェードの場合、非線形性はおおよそ相殺されるため、RGB 50%グレー(#7f7f7f)は、依然として知覚的には黒と白の両方からほぼ同じ距離にあります。デモとして、25%、50%、75%の灰色の背景(#3f3f3f#7f7f7fおよび#bfbfbf)の白黒テキストを次に示します。

25%グレーの白黒テキスト 50%グレーの黒と白のテキスト 75%グレーの白黒テキスト

ただし、任意のRGBカラーの明度を正確に計算するには、平均化する必要のある線形明度値であるため、ディスプレイガンマを考慮する必要があります。

まとめると、背景の黒と白のテキストのコントラストが優れているかどうかを判断するには、次のことを行う必要があります。

  1. ガンマ圧縮されたRGBカラー値を線形RGBに変換し、
  2. 線形のR、G、B成分の加重平均を取る
  3. 結果の平均を適切なしきい値と比較します。

最良の結果が得られるしきい値は実験的に決定できますが、一般的には50%RGBグレーの輝度に近いと予想されます。いずれの場合でも、知覚されるコントラストは視聴者の表示設定と視聴条件によって異なるため、誰にとっても単一の最適値ではなく、多かれ少なかれ同等に良い選択肢のかなり広い範囲があることは注目に値します。

単純な数式で数値を挿入するだけの場合は、次を試してください。

  • 0.2126×場合R γ + 0.7152× G γ + 0.0722× B γ > 0.5 γ、黒選択。それ以外は白を選び、

ここで、γはおおよそのディスプレイガンマ値です(γ = 2.2が一般的です)。

さらに単純な近似では、ガンマ補正を無視して(つまり、実質的にγ = 1 と想定)、0.2126× R + 0.7152× G + 0.0722× B > 0.5 の条件を使用します。灰色の濃淡の場合、これは違いがありません(不等式の両側に同じガンマを適用しているため)が、飽和した色の輝度をいくらか過大評価しています。幸いなことに、そのような色では、黒と白のどちらもまともなコントラストを持っている傾向があるため、実際にはエラーはそれほど問題になりません。

最後に、背景色が均一でない場合、1つのテキストの色が適切に表示されない可能性があることに注意してください。このような場合、たとえば、白いアウトラインの黒いテキストを使用したり、その逆を行ったり、反対の色の半透明のボックスでテキストを囲んだりすることを検討してください。


0

すべての色には3つの変数があります。色相、彩度、明るさ。

読みやすさの鍵はコントラストです。これは、互いに独立した3つの変数のそれぞれに対して最適化できます。

例えば; 色相コントラストは、その補色を見つけることで最適化できます。飽和コントラストは、各グラウンドで反対を選択することにより最適化できます。同様に、明るい部分は薄暗い部分と対照的です。

これ(上記の基準)は、選択のための1つの式(最適な読みやすさ)のみに関するものです。

他の考慮事項があるかもしれません。美的、知覚的、技術的など

この機能を提供する1つの実用的な方法は、2つのうちの1つが指定されたセットを提供するカラールックアップテーブルを使用して、事前に決定され、予測可能で許容可能な結果を​​使用することです。例えば; Xの前景が与えられると、Yの背景が提供されます。前景がYの場合、Xの背景が提供されます。CLUTは、特定のアプリケーションに必要なだけ複雑にすることも、包括的にすることもできます。

値がわかったら、それらの選択を自動化できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.