色の対比と三属性

色の対比とは

3級

並べられた色や前後して見せられた色の違いが強調されて見える現象を色の対比といいます。

対比とは、英訳するとコントラストです。
明暗や色の違いがはっきりしている色の組み合わせを指して「コントラストが強い」などと言いますが、色の対比は、目が受容した色の色相・彩度・明度の差が強調されて脳に伝わることで発生する、実際よりもコントラストが強く見える現象です。

色の対比現象の分類

3級

色の対比現象は、大きく2種類に分けることができます。

• 同時対比：周辺の色や隣接する色（空間的な近接）によって起こる
• 継時対比：複数の色を前後して見ること（時間的な近接）で起こる

同時対比は、複数の色を同時に見ることで発生します。

一方で、継時対比は、ある色を見た後に他の色を見ることで発生するものです。
たとえば、同じ色であっても、鮮やかな色を見た後だと少しくすんで見えることがあります。

同時対比と継時対比には、それぞれ次のようなさまざまな対比現象があります。

ここでは、色の三属性（色相・明度・彩度）による同時対比について詳しく見ていきます。

図と地

3級

対比の具体例に入る前に、これから使うことになる用語を解説します。

デザインなどで用いられる視覚的な表現では、主体となるものを図、背景となるものを地と呼びます。

例えば、背景色の上に文字が書かれている場合は、文字が図で背景色が地になります。

対比の具体例では、大きな面積の背景（地）に囲まれた図の色が、背景色の影響を受けて、どのように変化して見えるかを観察していきましょう。

明度対比

3級

明度対比は、明度が異なる2色が接したときに、明度差が強調されて見える現象です。

• 背景の明度が低いとき、図の色は実際よりも明るく見える
• 背景の明度が高いとき、図の色は実際よりも暗く見える

明度対比は、無彩色だけでなく有彩色でも起こります。
トーンマップで見ると、図の色が上下に移動する形で見え方が変化します。

明度対比と効果的な見せ方

明度対比により、同じ文字色であっても、背景が暗くなるほど文字が明るくはっきり見えます。

明度対比を活用すれば、図がどれくらい明るく見えるかを地の色によって変化させることができます。
明度の異なる色を、明度が近い色に見せるには、明るい図は明るい背景の上に、暗い図は暗い背景の上に置くようにします。

彩度対比

3級

彩度対比は、彩度が異なる2色が接したときに、彩度差が強調されて見える現象です。

• 背景の彩度が低いとき、図の色は実際よりも鮮やかに見える
• 背景の彩度が高いとき、図の色は実際よりもくすんで見える

彩度対比をトーンマップで見ると、図の色が左右に移動する形で見え方が変化します。

地の影響による図の見え方

地と図の彩度差が大きくなるほど、彩度対比は強くなります。
同じ色の図であっても、地の彩度が高いほど、そこから離れるように図の彩度は低く見えるのです。

補色対比

3級

補色対比は、補色の関係にある2色が接したときに、どちらの色も彩度が高く見える現象です。
これは彩度対比の特別な場合であり、補色による彩度対比と呼ばれることもあります。

補色対比の場合は、次のように2枚のトーンマップを並べることで、両方の色が彩度の高い方に引っ張られて離れていく様子が整理できます。

鮮やかな配色の注意点

補色の関係にある図と地がどちらも高彩度色の場合、図の彩度がさらに増すことで、色の境界がギラギラして見えるようになります。
この現象はハレーションと呼ばれ、図の色が見づらくなるため注意が必要です。

ハレーションを和らげるには、白や黒によるセパレーション が効果的です。

色相対比

3級

色相対比は、色相が異なる2色が接したときに、色相差が強調されて色みがずれて見える現象です。
図と地の面積差が大きいほど、また高彩度色であるほど強く見られるようになります。

ここでは、高彩度色であるvトーンの色を使って例を見てみましょう。
色相環で見ると、図の色相が背景の色相から遠ざかる形で見え方が変化します。