背景色による色の見え方とは?明度対比の仕組みを初心者向けに解説

基本の理解

まずはこの現象がどんな仕組みで起こるのかを押さえましょう。

背景色による色の見え方とは何か

背景色による色の見え方とは、同じ色でも、それが置かれている周囲の背景色によって、明るさ・鮮やかさ・色味の見え方が変わる現象のことです。

色彩学では、このように隣接する色同士が影響し合う現象全体を「同時対比」と呼び、そのうち明るさの差によって起こるものを特に「明度対比」と呼びます。

同時対比には、このほかにも色みの見え方が変わる「色相対比」、鮮やかさの見え方が変わる「彩度対比」もありますが、この記事ではそのうち明度対比を中心に扱います。

具体的には、明るい(白っぽい)背景に置くと、真ん中の色は実際より暗く・濃く感じられます。

逆に、暗い(黒っぽい)背景に置くと、真ん中の色は実際より明るく感じられます。

つまり色は単独では見え方が決まらず、周囲との関係によって印象が変わるのです。

言葉だけだとイメージしにくいので、実際に同じグレーを白背景と黒背景にまたがせて見比べてみましょう。

中央の帯は、左右で切れ目なくつながった同じ#999999です。境界をまたぐと、白背景側(左)では暗く沈み、黒背景側(右)では明るく浮いて見えます。

ここで「濃く見える」「明るく見える」というのは、色のデータ(HEXコードなど)上の数値が変わっているわけではありません。

あくまで目に映る印象(知覚上の明るさ)が変わっているだけで、色の物理的な数値そのものは同じままです。

人間の視覚には、周囲の明るさと比較して相対的に明るさを判断する性質があるため、このような錯覚が起こります。

ただし、対比が目立つのは色の面積がある程度大きい場合です。

細い線や小さな文字のように面積が小さいパーツでは、逆に周囲の色へ引っ張られて馴染んで見える「同化」という、対比とは正反対の現象が起こることもあります。

同じ背景色の影響でも、面積によって「強調される(対比)」か「埋もれる(同化)」かが変わりうる点は覚えておくとよいでしょう。

なぜこの現象を意識する必要があるのか

この効果を理解しておくと、パーツ単体で見た色と、実際にページに配置したときに見える色の違いに気づけるようになります。

背景色を調整することで、同じ文字色・図形の色でも見え方の印象をコントロールできるということでもあります。

たとえば、CTAボタン(申し込み・購入ボタンなど)の視認性を上げたい場合や、WCAG(Webアクセシビリティの国際基準)のコントラスト比の基準を満たしたい場合など、目的に応じて背景色を意識した色選びが必要になります。

実際に、同じオレンジのCTAボタンでも、背景色との関係で見え方がどう変わるか比べてみましょう。

良い例のようにボタンと背景の明度差が大きければ問題ありませんが、悪い例のように背景色がボタンと近い色調になると、輪郭がぼやけて視認性が落ちてしまいます。

このような場合、改善例のように境界線や影を加えて輪郭を強調することで、背景色を変えなくても視認性を回復できます。

特に、背景色と文字色のコントラスト(2つの色のメリハリ・明暗差の大きさ)や可読性(文字の読みやすさ)を検討する際は、文字色単体ではなく、実際の背景との組み合わせで確認する必要があります。

ボタンの色を決める際も、単色のカラーピッカー(色を選ぶ小窓)の中だけで判断せず、実際に使う背景色の上に置いて見え方を確認しましょう。

商品写真やバナーの背景色を変えるだけで、同じ商品パッケージの色の印象が変わって見えることもあります。

また、配色を決める前のワイヤーフレーム(グレーだけで構成した設計図)の段階から、要素同士のグレーの階調(明るさの違い)を意識しておくと、後で実際の色を当てはめたときに明度対比で見え方が崩れにくくなります。

実践のポイント

この現象を踏まえた作業の注意点と、関連する現象・確認方法・よくある疑問をまとめます。

注意点・よくある間違い

• デザインツールのカラーピッカー(色を選ぶ小窓。白い背景が前提のことが多い)で決めた色を、実際の(白ではない)背景に置いてみると、想定と違う印象になることがあります。カラーピッカーの中だけの見た目を鵜呑みにせず、実際の配置先で確認しましょう。
• 背景色を変更した際、すでに配置していた文字や図形の色の見え方まで変わることを見落としがちです。背景を変更したら、上に乗っている要素の見え方も必ず再確認しましょう。
• チームで開発する場合、背景色とテキスト色の組み合わせをその場その場で決めてしまうと、ページによって明度対比の影響がバラバラになりがちです。「背景色Aにはテキスト色B」のように組み合わせをあらかじめセットで固定しておく(デザイントークンとして管理する)と、ブレを防ぎやすくなります。Figmaのダークモード確認機能などを使って、実際の背景の上での見え方を早い段階でチェックするのも有効です。

明度対比と面積効果の違い

明度対比と混同されやすいものに「面積効果」があります。

どちらも「色は周囲の条件によって見え方が変わる」という点では似ていますが、別々の現象です。

明度対比は背景色との関係による変化を指すのに対し、面積効果は同じ色でも広く使うか狭く使うかという面積の大きさによる変化を指します。

たとえば、同じ明るい黄色でも、小さい面積で見るより壁一面のような広い面積で見た方が、より明るく鮮やかに感じられます。

この記事のテーマは「背景色」による見え方の変化なので、面積による見え方の変化(面積効果)とは別物と考えておけば問題ありません。

文字色と背景色の組み合わせを確認する方法

文字色と背景色の組み合わせは、実際のデザインカンプ(デザインの完成見本・仕上がりイメージ図)やブラウザ上で表示させて目視確認するのが基本です。

あわせて、2色の明暗差を数値で表した「コントラスト比」をチェックできる無料ツール(「WebAIM Contrast Checker」など)を使うと、可読性の基準(WCAGのAA基準では、通常サイズの文字で4.5:1以上)を客観的に判断できます。

ツールの詳しい使い方はコントラスト比とはという記事で解説しています。

実際にWebAIM Contrast Checkerで文字色と背景色のHEXコードを入力し、コントラスト比とPass判定が表示される様子を動画で見てみましょう。

よくある質問

• Q. 背景は何色が見やすい?
  A. 一般的には、白や薄いグレーなど明度の高い背景に、明度の低い(暗い)文字を組み合わせると読みやすくなります。
• Q. 背景に適したカラーは?
  A. サービスの世界観に合わせつつ、彩度を抑えた落ち着いた色を背景に選ぶと、その上に乗る文字や図形が引き立ちやすくなります。
• Q. 背景の決め方は?
  A. 背景色だけを先に確定させるのではなく、実際に使う文字色と組み合わせた状態で明度対比・コントラスト比を確認しながら、両方を一緒に調整するのがおすすめです。
• Q. PCの背景は何色が良いですか?
  A. 色を扱う作業(写真編集やデザインなど)をする場合は、モニターの壁紙を彩度の低いニュートラルなグレーにしておくと、この記事で解説した明度対比の影響を受けにくくなり、作業中の色を正しく判断しやすくなります。

まとめ

背景色による色の見え方(明度対比)とは、同じ色でも周囲の背景色によって明るさ・鮮やかさ・色味の見え方が変わる現象です。

背景の明度が高いとその色は濃く、背景の明度が低いとその色は明るく見えます。

色は単独では見え方が決まらないという前提を持ち、文字色・図形の色は必ず実際の背景との組み合わせで確認する習慣をつけましょう。