本文へスキップ

同じ色なのに違って見える — 明度対比の錯視

2つの四角、明るいのはどっち?

💡 2つの四角の境目あたりだけを見てください

周りの文脈だけを消します
答えを見る

2つの四角はまったく同じグレー(#8a8a8a)です

↑ 仕掛けを可視化した状態

何が起きているのか

2つの四角は同じ1つの色コードで塗られています。 「答えを見る」を押すと、同じ色の帯が2つの四角をつなぎます。帯が途切れずに一続きに見えたら、それが同じ色である証拠です。

なぜそう見えるのか

網膜から先の視覚系は、光の絶対量ではなく隣り合う領域の差を強調して送ります(側抑制)。 これは照明が変わっても物の色を同じと判断するための仕組みで、日常ではほぼ常に正しく働きます。

  • 曇りの日でも晴れの日でも、白い紙は白く見える
  • 影に入っても、りんごは赤いままに見える

つまりこれは脳のバグではなく、照明の違いを打ち消すための機能が、意図的に作った場面で裏目に出ている状態です。

デザインでの意味

同じ色指定でも、背景が変われば見え方は変わります。 UI のグレーやテキスト色を決めるとき、単体で見て決めると本番の背景の上で印象が変わるのはこのためです。

次の錯視

グラデーションの帯この横帯、左右で色は変わっている?

関連する錯視

この錯視の画像素材とデータ

図版は現象の原理から本サイトで生成しています(自前で再実装)。同時明度対比(simultaneous contrast)として古くから知られる現象。図版は色値をパラメータとして自前生成している。