CONTRAST

COLOR

明度差による色のコントラスト -配色テクニック活用法-

色同士の差を拡げてコントラストを高める

色のコントラストとは、異なる色同士の色相・明度・彩度の対比から生じるもので、その差が大きいほどコントラストが際立つ=メリハリの効いた状態になります。

配色のテクニックは数多くありますが、重要なポイントの1つに、この『コントラスト』を高め、要所要所でメリハリのある配色にすることが挙げられます。

中でも、視認性や可読性を高め、情報を分かりやすく伝えるために重要なのは明度のコントラストです。これを実践する前に、まず『明度=色の明るさ』を確認することから始めましょう。

色相・明度・彩度からなる「色の三属性」

【明度】とは、色相・明度・彩度からなる色の三属性の内の1つです。
赤・青・緑などの色みを【色相】と呼び、この色相の明るさの程度を表すのが【明度】、鮮やかさの程度を【彩度】で表します。色を測る物差しとも言われ、この三属性を使うことで、色をより詳しく伝えることができるのです。

色相

まず前提として、色は【有彩色】と【無彩色】に分けられます。
赤・青・黄などの「色み」を持つものを【有彩色】、色みを持たない白・黒・灰色を【無彩色】と言います。

有彩色:色味を持つグループ、無彩色:色味を持たないグループ

【色相】とは「色み・色あい」のことで、赤系、青系など色相によってグループ分けすることができます。有彩色のみが持つ属性です。

赤系のグループ、緑系のグループなど

明度

色の「明るさ」の度合いを示す尺度です。あらゆる色の中で、最も明るい色は白、最も暗い色は黒になります。
有彩色・無彩色ともに持っている属性です。

彩度

色の「鮮やかさ」を示す尺度で、有彩色のみが持つ属性です。最も彩度の高い色は【純色】と呼ばれ、これに灰色を混ぜると濁った色【濁色】となります。灰色の割合が増えるほど【無彩色】に近づきます。

明度差によるコントラストを高めるには

具体例とチェック方法をご紹介します。

「明るい色」と「暗い色」の組み合わせを選ぶ

背景と、その上にある対象(文字や図)の色の明度の違いが大きいほど、文字は読みやすく、図は理解しやすくなります。

【図1】無彩色同士の場合:白と黒の組み合わせは明度差が最も大きい。

【図2】有彩色同士の場合:それぞれ左側の方が明度差が大きいため、コントラストが強くなる。

参考「明度の数値化」
【図2】で比較している明度の値は、マンセル表色系で使用されている10段階の明度を適用*しています。
マンセル表色系は色の三属性を使って表現するカラー・システムです。色見本(色票集)があり、明度は0(黒)から10(白)までの10段階で表されます。世界的に普及しており、日本ではJIS規格にも採用されています。
*上の図の色はいずれもマンセル値をRGB変換した近似値で作成されています。

上の2つの図を比較した時に、図2の有彩色同士の明度の比較が難しいと感じる方がいるかもしれません。
下の図3のように同一色相内の明暗は比べやすいのですが、赤系と青系など色相が違うと、どちらの色の明度が高い(低い)か判断しづらくなってしまうのです。

【図3】同じ色相の中で明度順に並べた状態

また、人が色を識別する色覚には個人差があり、さらには年齢によっても見え方が違ってきます。
ユニバーサルデザインの観点から、誰にとっても理解しやすい配色になっているか確認したい時は、以下のような方法で簡単にチェックすることもできます。

コントラストは足りている? チェックしたい時は…

白黒カラーで印刷してみる。
または使用しているアプリケーションでグレースケールに変換してみる。

グレースケールで表示すると、右側のように明暗の差のみになるのでコントラストが判断しやすくなります。

Webデザインにおける適切なコントラスト比を自動判定できるサイトを利用する。

colorableとcontrast-ratio

(左)http://jxnblk.com/colorable/demos/text/
(右)http://leaverou.github.io/contrast-ratio/
客観的な指標として「WCAG2.0」*に準拠したコントラスト比を確認する際に便利。
* WCAG2.0 (ウェブコンテンツアクセシビリティーガイドライン)
「W3C」がWebアクセシビリティを確立することを目的として、公表しているガイドライン)

↓ さらに便利な『Google Material Color Tool』
パレットから選んだ色をWebサイトやスマホアプリのコンポーネントに反映させた状態をサンプルとしてプレビューできる上に、アクセシビリティをチェックしてくれます。

色の三属性を画像編集ソフトで直接編集するには

PhotoshopやIllustratorなどのソフト上で色の三属性をそれぞれ編集することができます。
明度や彩度を変更した結果がライブでプレビュー出来るので、三属性の理解にも役立ちます。

  • H(Hue):色相
  • S(Saturation):彩度
  • B(Brightness):明度

Photoshop、Illustrator、MicrosoftOfficeのカラー編集画面

ポイントまとめ
  • 色は「有彩色」と「無彩色」に分けられる。
  • 「色相」とは色みのこと。有彩色のみが持つ属性
  • 「明度」とは明るさの度合いのこと。有彩色・無彩色ともに持つ属性
  • 「彩度」とは鮮やかさの度合いのこと。有彩色のみが持つ属性
  • 見つけやすく、分かりやすくするには、常に「明るい色」と「暗い色」の組み合わせにする(=明度差を広げる)ことが重要

↓明度差を見分けるためのカラー・リテラシークイズ ➀『明度の高い色はどっち? 』

contrast色の対比が生む視覚効果前のページ

カラー・リテラシーを高めよう次のページCOLOR LITERACY

ピックアップ記事

  1. 明度差による色のコントラスト -配色テクニック活用法-
  2. 色の対比が生む視覚効果
  3. 色の調子【トーン】を利用した色選び
  4. 色の連想
  5. カラー・リテラシーを高めよう

関連記事

  1. Color Methodologies

    COLOR

    基本を抑えたロジカルな色選び

    様々な配色技法誰もが使える色彩調和のメソッドを探求して、昔から芸術…

  2. COLOR

    色のアクセシビリティーについて学べる動画

    色のアクセシビリティーについて学べる動画クリエイティブの最新情報が得…

  3. contrast

    COLOR

    色の対比が生む視覚効果

    色は互いに影響し合う色の組み合わせによっては、単色の時とは違った見…

  4. Color Association

    COLOR

    色の連想

    赤は情熱? 共有されている色のイメージ私たちは日常的に色から多くの情…

  5. Psychology of Color

    COLOR

    色彩心理

    ビジネスに使える? 押さえておきたい色彩心理の基本「色彩心理」と聞…

  6. COLOR

    Google Material Color Toolが便利!配色が苦手な人のお役立ちツール

    カラーパレットから選ぶだけ配色の参考サイトやツールは多々あれど、以外と…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ランディングページ制作のポイント
  1. tone

    COLOR

    色の調子【トーン】を利用した色選び
  2. ランディングページ制作のポイント

    OTHER

    心理学を取り入れて効果的なLPを作ろう|ランディングページ制作の基本
  3. COLOR LITERACY

    COLOR

    カラー・リテラシーを高めよう
  4. COLOR

    Google Material Color Toolの活用法
  5. Color Association

    COLOR

    色の連想
PAGE TOP

バンドワゴン効果

多数に人気のあるもの、支持されているものに惹かれて、それらの製品や事象への人々の支持がさらに高まる現象。行列がさらに人を呼ぶなど。
※『バンドワゴン』とはパレード楽団のこと

フォールス・コンセンサス

多くの人が自分と同じ意見を持ち、同じような行動をするだろうと考え、自分を多数派だと思い込むこと。
(さらには周囲と同じ行動を取れば安心するという心理)
※False Consensus:偽の合意

同調効果

周囲と同じ行動をしていると安心し、逆に自分が正しいと思っても他人が異なる行動をしている場合には不安になるといった集団心理のこと。

ピグマリオン効果

他者の期待値が本人の成長・成績結果に影響を与える心理効果。
アメリカの教育心理学者・ローゼンタールの実験では、教師が期待をかけた生徒とそうではない生徒の間では成績の伸びに違いが見られた。
※『ピグマリオン』はギリシャ神話の自作の乙女像に恋をした登場人物から。

ウィンザー効果

口コミやレビューなど、第三者から間接的に情報が伝わることによって、より信憑性や信頼感が増す心理効果。
直接本人から伝えられる評価に対しては利害関係を疑ってしまうため、無関係の第三者の意見の信憑性が増して感じられる。

ハロー効果

ある対象を評価するときに、目立ちやすい特徴に引きずられて他の特徴についての評価が歪められる現象のこと。後光効果とも呼ばれる、心理学における認知バイアスの1つ。

希少性の原理

需要に対して供給が少ない時、手に入る機会が限定される場合など、同じ内容のものであっても価値を高く評価してしまう認知バイアスのこと。

アンカリング効果

交渉の際、先行して提示される何らかの数値によって後の数値の判断が歪められる認知バイアスの一種。
例えば「この商品は1万円より高いと思うか?」と尋ねることによって、回答はアンカーである1万円に近い数値になる傾向のこと。

カクテルパーティー効果

多人数が談笑している会合など周辺の雑音レベルが高い場合でも、自分が話している相手の声はきちんと聞き取れる現象から、
自分に関係のある情報には注意が向けられる効果のこと。

ストーリーテリング

伝えたい内容を、それに関連した体験談やエピソードなどを引用しながら伝えるすることで、相手に強く印象付ける手法のこと。
物語として記憶されるので印象に残りやすい。

エピソード記憶

特定の日時や場所と関連した個人的経験(イベント)に関する記憶

損失回避性

損失を、利益よりも大きく評価する心理効果のこと。
新たに得られる利益からくる満足より、同額の損失がもたらす苦痛の方が大きいと感じる現象。

バイヤーズリモース

買い物をした直後に感じる不安や後悔の感情。
商品の品質に関係なく発生するため、こうした不安を解消することで返品や解約のリスクを下げ、リピートに繋がることが期待される。

親近効果

最後に提示された情報の再生率が良いこと。「新近性効果」とも言う。
接客業における「お見送り」など、最後の情報で印象が決定されやすい。

リフレーミング

事実に対して与えている意味づけを変え、異なる見方でとらえ直すこと。
例えば不動産物件の「徒歩15分」という表現に対して、「駅から遠過ぎて資産価値が無い」「歩けば健康に良い距離」など、同じ情報でも人によって受け取り方が違う現象。

想起集合

マーケティングにおける想起集合
例えば消費者に対して、ある分野のブランド名や企業名を想起させる「○○と言えば?」といった質問をした際に想起された一群(通常3~5個程度)を想起集合、もしくは喚起集合と呼ぶ。

準拠集団

個人の価値観、信念、態度、行動などに強い影響を与える集団。
何かを決めるときに判断の基準となることがある。