背景・文字・図形の色とは?要素ごとの色の決め方を初心者向けに解説

基本の理解

まずはこの考え方が何を指しているのか、そしてなぜ必要なのかを押さえましょう。

背景・文字・図形の色とは何か

背景・文字・図形の色とは、デザインを構成する要素を「背景」「文字」「図形(ボタンやアイコンなど)」に分け、それぞれにどんな色を割り当てるかを考えることです。

要素ごとに色の役割を整理することで、ベースカラー・メインカラー・アクセントカラーの考え方を、実際のデザインに落とし込みやすくなります。

※ベースカラー・メインカラー・アクセントカラーとは、配色を3つの役割に分ける考え方です。ベースカラーは最も広い面積を占める土台の色(白や淡いグレーなど)、メインカラーはデザインの印象を決める主役の色、アクセントカラーはごく狭い面積だけに使って一点を目立たせる色を指します。

「どの色をどこに使うか」の対応表

「色の役割(3色)」と「使う場所(背景・文字・図形)」が一度に出てくると混乱しやすいので、対応関係を表で整理しておきましょう。

使う場所	割り当てる色	色の例
背景	ベースカラー(画面の約70%)	白、 ごく薄いグレー
見出し・ヘッダーなど	メインカラー(約25%)	紺など、サイトの印象を決める色
ボタンなどの図形	アクセントカラー(約5%)	オレンジなど、一番目立たせたい色
本文の文字	濃いグレー(3色とは別に考える)	黒に近い濃いグレー

ポイントは、本文の文字色は、3色の役割とは別に「読みやすさ」を最優先して決めることです。

本文に使う黒やグレーのような色みのない色(無彩色)は、色数のカウントに含めずに考えるのが一般的です。

メインカラーは見出しやヘッダーなど面積の大きい部分に、アクセントカラーはボタンなどごく一部に使います(比率の考え方は色の割合とは?で解説しています)。

文字は「可読性」、図形は「視認性」を意識する

背景・文字・図形の組み合わせでは、コントラストを意識することが重要です。

コントラストとは、隣り合う色同士の明るさ(明度)や色みの差の大きさのことで、差が大きいほど文字や図形の輪郭がはっきり見えます。

このとき、文字と図形では気をつけるポイントが少し違います。

• 可読性(文字の読みやすさ):長い文章を読んでも、目が疲れたり途中で読むのが嫌になったりしないこと。
  背景との明るさの差をしっかりつけ、本文には真っ黒より少しやわらかい濃いグレーを使うサイトも多くあります。
• 視認性(要素の見つけやすさ):画面を見た瞬間に「ここにボタンがある」とすぐに見つけられること。
  ボタンなどの図形は、周りとはっきり違う色にして存在に気づいてもらうことを優先します。

なぜ要素ごとに色を分けて考える必要があるのか

背景・文字・図形は同時に見えており、それぞれの色の組み合わせ次第で、読みやすさや情報の伝わりやすさが大きく変わります。

特に図形(ボタンなど)の色は、背景・文字の色と干渉しないよう、意図的に選び分ける必要があります。

「干渉する」とは、重なる要素同士の色が似ていて、境目や中身が見分けにくくなることです。

左は背景・ボタン・ボタンの文字がすべて青系で、ボタンが溶け込み文字も読みにくい。右は重なる要素同士の色がはっきり分かれている

実践としては、背景には無彩色(白・グレー・黒のように色みを持たない色)や淡い色(ベースカラー)を使い、その上に乗る文字とのコントラストを確保します。

ボタンなどの図形は、背景・文字とは違う目立つ色(アクセントカラー)にし、ボタンの中の文字もボタンの色とはっきり差をつけることで、操作できる要素だと分かりやすくなります。

実践のポイント

要素ごとに色を決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 背景色を先に決めた後、文字色とのコントラストを確認せずに配色してしまい、読みにくい組み合わせになってしまうことがあります。
  背景と文字は必ずセットで確認しましょう。
• 図形の色が背景色に近すぎて、ボタンなどの操作可能な要素だと気づかれないことがあります。
  操作できる要素には、はっきりと分かる色差をつけましょう。
• 最初にピンクや青などの色付きの背景を選んでしまい、後から合う文字色やボタン色が見つからなくなることがあります。
  慣れないうちは、背景は白か、ごく薄いグレーから始めるのが失敗しない近道です。

よくある質問

• Q. どの要素から色を決め始めるのがいい?
  A. 決まった順番はありませんが、面積が最も広い背景色から決め、そこに乗せる文字色、最後にボタンなどの図形色という順番で進めると、コントラストを確認しながら進めやすくなります。
  迷ったら「白い背景・濃いグレーの文字・オレンジのボタン」のような基本の組み合わせから始め、少しずつ自分のサイトに合う色に調整していきましょう。
• Q. 文字色と背景色のコントラストはどうやって確認すればいい?
  A. 目視での確認に加えて、コントラスト比(2つの色の明るさの差を数値にしたもの)をチェックできるツールを使うと、客観的に判断できます。
  たとえば無料のWebツール「WebAIM Contrast Checker」なら、文字色と背景色のカラーコードを入力するだけで数値と合否が表示されます。
  本文の文字は4.5:1以上、ボタンなどの図形と背景の間は3:1以上が目安です(詳しくはコントラスト比とは?、背景色と文字色の組み合わせとは?で解説しています)。

まとめ

背景・文字・図形の色とは、デザインを構成する3つの要素それぞれに色を割り当てて考える方法です。

背景にはベースカラー(白や淡い色)、見出しなどにはメインカラー、ボタンなどの図形にはアクセントカラーを使い、本文の文字は読みやすさを最優先した濃いグレーにするのが基本の組み立て方です。

まずは「白い背景・濃いグレーの文字・オレンジのボタン」の組み合わせで1画面作ってみて、文字が読みやすく、ボタンがすぐ見つかるかを確かめてみてください。