色の対比とは
読み：いろのたいひ英語：Color contrast effects
更新日：2026年10月31日
ひとことで
色の対比とは、まわりにある色の影響を受けて、同じ色でも違う色に見える現象のことです。
ひとに説明するなら
「同じ灰色でも、白に囲まれると暗く、黒に囲まれると明るく見える。色は、それだけで見ているんじゃなくて、まわりの色と比べて見ている。それが色の対比」
同じ色が、違って見える
色は、まわりの色との関係で見え方が変わります。同じ灰色の四角を、白い背景と黒い背景に置くと、白い背景の上では暗く、黒い背景の上では明るく見えます。
隣り合う色どうしの差が、実際より強調されて見える。これが色の対比です。
まん中はどちらも #808080
対比の種類
これらは、色を同時に見たときに起きる対比です。ある色を見つめたあと、別の色を見たときに起きる対比（継時対比）もあります。
| 種類 | 起きること |
|---|---|
| 明度対比 | 明るい色に囲まれると暗く、暗い色に囲まれると明るく見える |
| 色相対比 | まわりの色みから離れる方向に、色みがずれて見える |
| 彩度対比 | 鮮やかな色に囲まれるとくすんで、くすんだ色に囲まれると鮮やかに見える |
| 補色対比 | 補色どうしを並べると、お互いがより鮮やかに見える |
| 縁辺対比 | 色の境目のあたりで、差がいっそう強く見える |
デザインで気をつけたいこと
同じ色を、違う背景の上に置くと、別の色に見えてしまうことがあります。ブランドの色やボタンの色を、背景を変えて使うときは、実際に並べて確かめることが大切です。
逆に、対比を生かして、少ない色で強いメリハリをつけることもできます。
よくある勘違い
勘違いカラーコードが同じなら、どこに置いても同じ色に見える
ほんとうはまわりの色によって、明るさや色みが違って見えます。
勘違い色の対比は、目の錯覚なので気にしなくていい
ほんとうは見る人には実際にそう見えるので、デザインでは見え方を基準に考えます。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットの色も、背景の色によって見え方が変わります。パレットのページでは6色を並べて見せていますが、実際に使うときは、置く背景の上で確かめてみてください。
参考になるパレット
クイズ
同じ灰色を黒い背景に置くと、どう見える？
明るく見える
正解です。答えは「明るく見える」。明度対比によって、暗い色に囲まれると明るく見えます。
暗く見える
ちがいます。答えは「明るく見える」。明度対比によって、暗い色に囲まれると明るく見えます。
変わらない
ちがいます。答えは「明るく見える」。明度対比によって、暗い色に囲まれると明るく見えます。
くすんだ色に囲まれた鮮やかな色は？
より鮮やかに見える
正解です。答えは「より鮮やかに見える」。彩度対比によって、まわりがくすんでいるほど鮮やかに見えます。
よりくすんで見える
ちがいます。答えは「より鮮やかに見える」。彩度対比によって、まわりがくすんでいるほど鮮やかに見えます。
灰色に見える
ちがいます。答えは「より鮮やかに見える」。彩度対比によって、まわりがくすんでいるほど鮮やかに見えます。
よくある質問
色の対比とは何ですか？
まわりにある色の影響を受けて、同じ色でも違う色に見える現象です。
色の対比にはどんな種類がありますか？
明度対比、色相対比、彩度対比、補色対比、縁辺対比などがあります。
同時対比と継時対比の違いは？
同時対比は色を同時に見たときに、継時対比はある色を見たあとに別の色を見たときに起きる対比です。