TOP UX用語 ツール・フレームワーク・方法論 色彩対比

色彩対比 Color contrast

ある色が他の色に影響されて、本来の色と異なる色に見える現象

ある色が他の色に接するとき、お互いの色の要素が影響しあい、違う色に見える現象。色の接し方は「距離」「時間」という2つのパターンがある。

距離で接する…ある色が隣同士に設置されているなど、色同士の空間的な距離が接する場合を表す。「同時対比(Simultaneousサイマルテイニアス Contrastコントラスト)」とも呼ばれる。
時間で接する…ある色を何秒か凝視した後に目を離すと、残像のように色が見えるといった、直前に見ていた色が影響して異なる色に見えることを表す。「維持対比(Successiveサクセシブ Contrastコントラスト)」とも呼ばれる。

基本となる色の三属性

色相、明度、彩度の図

色彩対比を理解するためには、色の三属性を理解する必要がある。

属性1.色相(Hueヒュー

色の違い。赤、青、緑など。

色相の例

色相の例

属性2.明度(ValueバリューまたはBrightnessブライトネス

色の明るさの度合い。明度が低いと暗くなり黒に近づき、明度が高いと明るくなり白に近づく。

明度の図

明度の図

属性3.彩度(ChromaクロマまたはSaturationサーチレイション)

色の鮮やかさの度合い。彩度が低いと無彩色(白・黒・グレー)に近づき、彩度が高いと鮮やかな色になる。

彩度の図

彩度の図

色彩対比の種類

距離で生じる色彩対比(同時対比)の種類

色相対比(Contrastコントラスト ofオブ Hueヒュー
隣接した色同士が影響を与え、本来の色相に、背景の補色の色が混色されたように見える現象。下図の中央の紫色は全く同じ色だが、左は背景の青色の補色である赤、右は背景の赤紫の補色である青が混じったように見える。

色相対比の図

色相対比の図

明度対比(Valueバリュー Contrastコントラスト
隣接した色の明度が影響して、本来の明度が変わって見える現象。暗い色に隣接している場合は本来の色よりも明るく見え、明るい色に隣接している場合は本来の色よりも暗く見える。下図の中心の灰色は全く同じ色だが、黒色に囲まれている方は明度が高いように見える。

明度対比の図

明度対比の図

彩度対比(Chromaクロマ Contrastコントラスト
隣接した色の彩度が影響して、本来の彩度が変わって見える現象。鮮やかな色に隣接している場合は本来の色よりも彩度が低く見え、彩度が低い色に隣接している場合は本来の色よりも鮮やかに見える。下図の中心の紫色は全く同じ色だが、鮮やかな色に囲まれた方は、彩度が低いように見える。

彩度対比の図

彩度対比の図

補色対比(Complementaryコンプリメンタリー Contrastコントラスト
補色関係にある色が隣接した場合、お互いの色の彩度が強くなり、より鮮やかに見える現象。
補色とは色相環で表した時に反対に位置する色のことで、たとえば青色の補色はオレンジ色、赤色の補色は緑色となる。

下図の中心のオレンジ色は全く同じ色だが、水色で囲まれた右側の補色関係にある組み合わせの方がより彩度が高く鮮やかになったように見える。

補色対比の図

補色対比の図

縁辺えんぺん対比(Edgeエッジ Contrastコントラスト
明るい色と暗い色が隣接する場合、明るい色と接した側はより明るく、暗い色と接した側はより暗く見える現象。色と色が接する境界部分に強く表れる。
人の目が隣接した2色の差異を強調するために起きると言われており、濃い色で色の境界線を引いて差異をハッキリさせると、縁辺対比は感じにくくなる。

縁辺対比の図

境界線を引くと、縁辺対比の効果は感じにくい。

時間で生じる色彩対比(維持対比)の例

継時対比(Successiveサクセシブ Contrastコントラスト
ある色を見た後に別の色をみると、前に見ていた色の影響を受けて、本来の色とは違う色が見える現象。見ていた色の反対色が見える現象を「補色残像現象」、見ていた色の残像が見える現象を「心理補色」という。

関連用語

参考サイト

東京在住のWEBデザイナー。 趣味:映画鑑賞、気分がノってる時の料理 好きな食べ物:ビリヤニ、野菜、虫 マイブーム:テキスト読み上げ機能での読書

「UX用語」のカテゴリー