「見やすい3色の組み合わせが分からない」「チラシを作ると色がごちゃごちゃする」と迷ったら、背景色・文字色・強調色の役割を先に決めるのが近道です。3色をすべて同じ面積で使う必要はありません。
この記事では、資料・チラシ・お知らせに使いやすい12種類の配色を、実際の文字見本とHEXカラーコード付きで紹介します。文字と背景のコントラストも数値で確認しています。使いたい配色を一つ選び、その役割のままコピーして試してみてください。
最初の結論｜3色はこう分ける
- 背景色：広い面積を担当。文字が読みやすい明るさ・暗さを確保する。
- 文字色：本文・見出し・数字を担当。背景との明暗差を優先する。
- 強調色：期限・要点・ボタンなど一部に使用。ラベルの文字も読める組み合わせにする。
まず使い方｜色を選ぶ前に確認したい3つのルール
- 背景と本文文字を先に決める：普通サイズの文字は、WCAG 2.2の目安でコントラスト比4.5:1以上。大きな文字は3:1以上。この記事の見本は通常文字を基準に検算しています。
- アクセントは必要な場所だけに：期限・重要事項など。色だけで「必須」「変更」などを伝えず、必ず文字も併記します。
- HEXコードの役割を入れ替えない：「アクセント色の上の文字」は、本文文字色か背景色のうちコントラストを確認したほうを使います。
「3色」は背景・文字・強調の3役を意味します。見本カードにある強調ラベルでも、3色のどれかを文字色として再利用しており、4色目を追加していません。
見やすい3色の組み合わせ12選｜そのまま使えるカラーコード
次の見本はすべてオリジナルの配色例です。色の名前は便宜上の呼び名で、色票名や公式規格の名称ではありません。画面表示や印刷物の色は機器・紙・インクで変わります。
01｜ネイビー×サンド（提案書・営業資料）
結論を先に伝える
資料・チラシの本文は、文字をはっきり読める色で配置します。
重要：資料提出日色コード：背景 #F6F8FC ／ 文字 #162E47 ／ 強調 #F4B342。本文のコントラスト 13.03:1、強調ラベルは 7.50:1（ラベル文字 #162E47）。
信頼感を大切にする提案書。重要な結論を琥珀色の小さなラベルで示す。
02｜ミント×グリーン（健康・施設案内）
安心して読めるご案内
資料・チラシの本文は、文字をはっきり読める色で配置します。
受付時間を確認色コード：背景 #F1FAF6 ／ 文字 #124A40 ／ 強調 #B7E4CF。本文のコントラスト 9.50:1、強調ラベルは 7.22:1（ラベル文字 #124A40）。
柔らかい雰囲気の施設案内。本文の濃い緑を保ち、淡いミントは背景に使う。
03｜コーラル×プラム（催し・イベント告知）
週末イベントのご案内
資料・チラシの本文は、文字をはっきり読める色で配置します。
申込締切：金曜日色コード：背景 #FFF7F4 ／ 文字 #4F2836 ／ 強調 #FFB3A3。本文のコントラスト 11.76:1、強調ラベルは 7.24:1（ラベル文字 #4F2836）。
温かさを伝えるイベント案内。参加条件は色だけでなく文字でも明示する。
04｜ラベンダー×インク（講座・学習案内）
はじめての学習ガイド
資料・チラシの本文は、文字をはっきり読める色で配置します。
最初の3ステップ色コード：背景 #F6F3FF ／ 文字 #302457 ／ 強調 #D0B7FF。本文のコントラスト 12.66:1、強調ラベルは 7.85:1（ラベル文字 #302457）。
学習資料に使いやすい柔らかな配色。数字や手順も濃い文字で示す。
濃い背景を使うときの注意
5番・10番は暗い背景の見本。本文は明るい文字にし、強調ラベルの文字には暗い背景色を再利用しています。強調ラベルに白字を重ねると、選んだ色次第でコントラストが不足するためです。
05｜ナイト×ゴールド（夜間イベント・発表会）
夜の催しを案内する
資料・チラシの本文は、文字をはっきり読める色で配置します。
開場 18:30色コード：背景 #15243A ／ 文字 #FFF9EF ／ 強調 #FFD478。本文のコントラスト 14.90:1、強調ラベルは 11.11:1（ラベル文字 #15243A）。
暗い背景に明るい本文文字。黄色のラベルには背景色の濃紺を文字として再利用する。
06｜クリーム×キャメル（飲食・メニュー）
今週のおすすめ
資料・チラシの本文は、文字をはっきり読める色で配置します。
数量限定メニュー色コード：背景 #FFF6E7 ／ 文字 #4D2B24 ／ 強調 #E6A15C。本文のコントラスト 11.61:1、強調ラベルは 5.70:1（ラベル文字 #4D2B24）。
料理や商品のお知らせに。価格と注意事項は濃茶の文字で読ませる。
07｜スカイ×ブルー（観光・旅行案内）
週末のおでかけ案内
資料・チラシの本文は、文字をはっきり読める色で配置します。
所要時間の目安色コード：背景 #F1FAFF ／ 文字 #153C59 ／ 強調 #8DD6EE。本文のコントラスト 10.90:1、強調ラベルは 7.13:1（ラベル文字 #153C59）。
水色を全面の文字色に使わないのがコツ。目的地とアクセスを文字で案内する。
08｜オリーブ×ライム（環境・地域活動）
地域活動のお知らせ
資料・チラシの本文は、文字をはっきり読める色で配置します。
参加受付中色コード：背景 #F8FAEE ／ 文字 #314632 ／ 強調 #CBDD78。本文のコントラスト 9.69:1、強調ラベルは 6.89:1（ラベル文字 #314632）。
落ち着いた自然色。淡いアクセントの上にも十分濃い文字を重ねる。
09｜ローズ×ボルドー（美容・サロン案内）
サロンからのお知らせ
資料・チラシの本文は、文字をはっきり読める色で配置します。
予約方法を確認色コード：背景 #FFF5F8 ／ 文字 #512A40 ／ 強調 #F4B0C4。本文のコントラスト 11.21:1、強調ラベルは 6.75:1（ラベル文字 #512A40）。
淡いピンクと濃いボルドーを組み合わせ、重要事項は文字でも説明する。
10｜プラム×シャンパン（記念・式典）
大切な一日のご案内
資料・チラシの本文は、文字をはっきり読める色で配置します。
式典の開始時刻色コード：背景 #292035 ／ 文字 #FFF6EA ／ 強調 #E3BC86。本文のコントラスト 14.51:1、強調ラベルは 8.73:1（ラベル文字 #292035）。
深い紫にクリーム色の文章。金色の帯は暗紫の文字で読ませる。
11｜スレート×ライトブルー（業務報告・IT資料）
今月の実績レポート
資料・チラシの本文は、文字をはっきり読める色で配置します。
前月比をチェック色コード：背景 #F4F7FB ／ 文字 #29384A ／ 強調 #C3D5EF。本文のコントラスト 11.11:1、強調ラベルは 8.01:1（ラベル文字 #29384A）。
数字と見出しを整理する資料向け。棒グラフには値や凡例も付ける。
12｜アイボリー×オレンジ（告知・注意事項）
大切なお知らせ
資料・チラシの本文は、文字をはっきり読める色で配置します。
変更日：来週月曜色コード：背景 #FFF9EC ／ 文字 #4B2B16 ／ 強調 #F8BB63。本文のコントラスト 12.08:1、強調ラベルは 7.41:1（ラベル文字 #4B2B16）。
注意を引く暖色。赤字や色だけに頼らず、期限・対象者を文でも伝える。
配色を変えるなら｜3STEPで判断する
使う目的と一番伝えたいことを決める
会議資料なら結論、チラシなら日時や申込締切など、最重要の情報を先に決めます。色を選ぶ前に文章だけで意味が分かるようにしておきます。
背景色と文字色で、先に読める状態を作る
白っぽい背景と濃い文字、または濃い背景と明るい文字を選びます。文字が小さい資料では4.5:1以上を目安に確認し、必要なら文字をさらに濃くします。
強調色はラベルなど必要な場所に絞る
重要箇所にだけ強調色を配置し、ラベルの文字色も検算します。色だけに頼らず「重要」「締切」などの言葉を添えます。
実際に見やすくするためのチェック
作ってから確認｜配色がよくても見づらい場合
- 文字と背景：通常文字4.5:1以上、大きな文字3:1以上を検討（WCAG 2.2の最低コントラスト基準。すべての可読性を保証する数値ではありません）。
- 文字サイズ・行間：スマホで本文が小さすぎず、長い段落を詰め込みすぎていないか確認する。
- 情報の意味：赤／緑など色の違いだけで区別せず、項目名・アイコン・形・数値も一緒に示す。
- 実際の使用環境：PC・スマホ・印刷紙面・投影画面で、表示色や読める大きさを再確認する。
色の組み合わせは、背景色・文字色・強調色の役割がセットです。この記事のコントラスト値は記載したHEXコードをsRGBとして計算したもので、画像の上への文字載せ、透明度、印刷後、WordPressテーマの上書きCSSを含めて検証した数値ではありません。
配色の理屈をもっと知りたい人へ
「なぜこの色同士が合うのか」「近い色・向かい合う色って何？」と気になったら、まず色相環を理解すると整理しやすくなります。次の記事では、色相の並びを図解と穴埋め練習で確認できます。
さらに色の三属性や配色を体系的に学びたい人には、色彩検定3級の勉強法をまとめた記事が役立ちます。ここでは勉強時間や教材の選び方まで解説しているため、資格に興味がある場合だけ続けて読んでみてください。
「そもそも何級から受ければいい？」という疑問には、級選びから確認できる独学ガイドもあります。
よくある疑問
3色の割合は70：25：5に固定するべき？
いいえ。背景を広く、強調を少なくする配分の考え方は参考になりますが、資料の種類や文字量で適切な割合は変わります。数字を守るために必要な情報を小さくしないことが大切です。
3色全部を文字色にしてもいい？
推奨しません。文字色は背景との明暗差を優先して決め、強調色はラベル・罫線・図形などに限定するのが整理しやすい方法です。強調色で文字を書く場合は、その背景とのコントラストを改めて確認してください。
配色は色相環の補色を選べば必ず見やすい？
いいえ。色相環上で離れていることと、文字が読みやすいことは別です。赤と緑のように色相が異なっていても、明暗差が足りないと読みにくくなります。実際の文字と背景のコントラストを確認してください。
まとめ｜3色は「役割」と「明暗差」で選ぼう
資料・チラシの配色で迷ったら、背景・文字・強調の役割を決め、文字のコントラストを確かめることから始めましょう。まず用途に合う見本を一つ選び、HEXコードを変えずに使うと、色の役割をつかみやすくなります。
※この記事の12配色は学習・制作向けの自作提案です。記事内の色と数値は2026年11月1日に計算・点検。参考：W3C｜Contrast (Minimum)、W3C｜Use of Color。