先ほど、ゲーム開発スタックエクスチェンジで同様の質問に回答したので、そこで回答をまとめてみましょう。
黒か白のどちらかを選択するという考えは、どちらが背景色とコントラストが良いかに応じて、適切です。ただし、RGBコンポーネントを平均化するだけでは、(主に)2つの理由により、特定の色が人間の目にどのように見えるかを適切に示すことができません。
まず第一に、人間の色知覚に関連する理由により、赤、緑、青のチャンネルは同じ相対輝度を持ちません。実際、純粋な青(#0000ff
)は、純粋な緑()の約10%の明るさ(および純粋な赤は約30%の明るさ#00ff00
)です。したがって、たとえば純粋な青の黒のテキストは、特に優れたコントラストを持つことはありません。
たとえば、以下の画像は、純粋な赤、緑、青の背景(#ff0000
、#00ff00
および#0000ff
)の白黒テキストの例を示しています。
これらのすべての色の平均RGB値は同じですが、コントラストの違いをはっきりと見ることができます。
他の複雑な点は、通常コンピュータ画面で使用されるRGBカラースペース(sRGBなど)が線形ではなく、ディスプレイガンマが約2程度であることです。つまり、たとえば、RGBカラー#7f7f7f
= "50%グレー"は、実際には純白(#ffffff
)の半分の明るさではなく、約25%しか明るく表示されません。実際には「75%グレー」に近い(#bfbfbf
)。
しかし、便利なことに、人間の目も非線形であり、暗い色合いの違いに敏感です。実際、グレーのシェードの場合、非線形性はおおよそ相殺されるため、RGB 50%グレー(#7f7f7f
)は、依然として知覚的には黒と白の両方からほぼ同じ距離にあります。デモとして、25%、50%、75%の灰色の背景(#3f3f3f
、#7f7f7f
および#bfbfbf
)の白黒テキストを次に示します。
ただし、任意のRGBカラーの明度を正確に計算するには、平均化する必要のある線形明度値であるため、ディスプレイガンマを考慮する必要があります。
まとめると、背景の黒と白のテキストのコントラストが優れているかどうかを判断するには、次のことを行う必要があります。
- ガンマ圧縮されたRGBカラー値を線形RGBに変換し、
- 線形のR、G、B成分の加重平均を取る
- 結果の平均を適切なしきい値と比較します。
最良の結果が得られるしきい値は実験的に決定できますが、一般的には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つのテキストの色が適切に表示されない可能性があることに注意してください。このような場合、たとえば、白いアウトラインの黒いテキストを使用したり、その逆を行ったり、反対の色の半透明のボックスでテキストを囲んだりすることを検討してください。