web-dev-qa-db-ja.com

人間の目には2つの色がどのように異なって見えるべきですか

Stackoverflowの[Reputation]タブを見ていたところ、新しいエントリを強調するために使用されている黄色が、白い背景からあまり目立たないことがわかりました。違いを見るために目をつぶる必要があります。

enter image description here

それは私に考えさせました：2つの色がユーザーの目で十分にはっきりと表示されるかどうかを知るためのルールはありますか？たとえば、＃FFFFFEと#FFFFFFは2つの異なる色ですが、人間の目には目立った違いはありません。一般的に、どの時点で2つの色がはっきりと異なって見えることを知っていますか？

colorcolor-perceptionhuman-eye
12
laurent

色のコントラストをチェックするためのツールW3Cによる仕様 に従って、「色不足のある人が見たとき、または黒で見たときに、十分なコントラストがあるかどうかを判断します。と白い画面」。

これは草案ですが、Webで取得するのと同じくらい標準に近いものです。

この場合、使用中の異なる色の間のコントラストをテストする必要があります。次の色を使用するとします。

 - ForegroundColor1 
 - BackgroundColor1
 - BackgroundColor2

次に、望ましいコントラストを定義します。

 - ForegroundColor1 <> BackgroundColor1 = Contrast Ratio 9
 - ForegroundColor1 <> BackgroundColor2 = Contrast Ratio 9
 - BackgroundColor1 <> BackgroundColor2 = Contrast Ratio 1.5

色間で使用するコントラストは、前景色と背景色の間の仕様（4.5最小コントラスト比）と背景色の十分なコントラスト（W3C仕様には含まれません）に準拠することを考慮して、設計者の目的です。

私に尋ねると、背景色のコントラストが強すぎてはいけません。白黒で見た場合、ハイライトされた背景は前景で苦労するよりも優れています。

5
Naoise Golden

その質問に対する明確な答えはありません。

2つのRGB色の値をどのくらい離す必要があるかを言う「ルール」を持たせることができないほど、デザイナーとしての制御や知識の外にあるものはたくさんあります。考慮すべき事項：

  • コンピュータ画面の品質、種類、設定（明るさなど）がこれに大きく影響します（ Atwoodのヒントを確認 ）。使用するメディア（コンピューターの画面など）を制御できる場合、この要因は無効になる可能性があります。これは、オンラインアプリではほとんどありません。
  • 色覚異常 も要因となる可能性があります（覚えておいてください：一部の人々-特に男性-は「少し」だけ色盲です）
  • ユーザーベースの人口統計もおそらく重要です（特に年齢、私は想像します）。
2
Jeroen

これは、隣接する色（背景と前景のコントラストを含む）に関するものでも、隣接しない色に関するものでも、大きな違いをもたらします。私たちの目は、隣接する色の違いを知覚することに非常に敏感です。しかし、隣接していない一致の認識は非常に貧弱です。

隣接する色の色の違いは delta-E で表すことができます。 1 delta-Eは、目で認識できる最小の色差です。 delta-Eが高いほど、コントラストが高くなり、違いがはっきりとわかります。 ColorMunkiを所有している場合は、2色のデルタEを即座に確認できます。

隣接していない色については、色の周囲に大きく依存するため、当然のことながら測定や計算はできません。これは 白または黒と同じ色を知覚する にも依存します...

1
Igor Asselbergs