色の基本：配色・コントラスト・ブランドカラーとアクセシビリティ｜デザイン・クリエイティブの基本 第3回

配色は「役割」で組み立てる

使う色の数が多いほど、デザインはまとまりにくくなります。配色に自信がないときは、色に「役割」を与え、役割ごとに使う量を決めると整理しやすくなります（図2）。

• ベースカラー：背景など広い面に使う色です。白や薄いグレー、ごく薄いベージュなど、主張しない色を選びます。
• メインカラー：ブランドや商品を表す色です。見出し・帯・図のメインの色などに使います。
• アクセントカラー：「ここを押してほしい」「ここだけは見てほしい」という場所に使う色です。メインカラーと明度や色相がはっきり違う色を選びます。

割合の目安としては、ベース約70%、メイン約25%、アクセント約5%という配分がよく使われます。これは厳密な決まりではありませんが、「アクセントカラーは少量だからこそ効く」という考え方を覚えておくのに便利です。第2回で学んだコントラストと同じで、アクセントカラーをあちこちに使うと、どこも目立たなくなります。

色数を増やしたくなったら

図やグラフで色をたくさん使いたくなったときは、新しい色相を足す前に、同じ色相で明度だけを変えた色 を使えないか考えます。たとえば、紺色をメインにしているなら、紺・中くらいの青・薄い青の3段階で、棒グラフの系列を塗り分けられます。色相を増やさないので、全体のまとまりを保ったまま区別がつきます。

文字と背景のコントラスト比：WCAGの基準

「明度の差が十分かどうか」を数字で確かめる方法があります。Webのアクセシビリティ（誰もが利用できること）の国際的なガイドラインであるWCAG（Web Content Accessibility Guidelines）は、文字と背景の明るさの比を コントラスト比 として計算し、最低限の基準を示しています。

WCAG 2.2の達成基準1.4.3「コントラスト（最低限）」（レベルAA）では、次のように定めています。

• 文字と背景のコントラスト比は 4.5:1以上
• 大きな文字（18ポイント以上、または14ポイント以上の太字）は 3:1以上
• ロゴや商品名の一部である文字、飾りとして置いた文字には、この基準は適用されない

コントラスト比は、白と黒の組み合わせが最大の21:1、同じ色どうしが最小の1:1です。図3は、よく使われる色の組み合わせのコントラスト比を、編集部がWCAGの計算式で求めたものです。

いくつか、意外に感じる結果があるはずです。白地に薄いグレー（#999999）の文字は、おしゃれに見えるのでよく使われますが、コントラスト比は約2.9:1で、本文の基準を満たしません。緑の背景（#0A9F62）に白い文字は約3.4:1で、大きな見出しなら基準内ですが、小さな本文には足りません。そして黄色（#FFE500）の背景に白い文字は約1.3:1で、ほとんど読めません。黄色には黒い文字（約16.5:1）を合わせるのが鉄則です。

なお、コントラスト比は「切り上げ」をしません。WCAGの解説では、計算結果が4.499:1なら4.5:1の基準は満たさないとされています。ブラウザの開発者ツールや、無料で使えるコントラストのチェックツールを使えば、色の番号を入れるだけで比を確かめられます。

文字以外にも基準がある

WCAG 2.2の達成基準1.4.11「非テキストのコントラスト」（レベルAA）は、ボタンの輪郭や入力欄の枠、グラフの線のように、内容を理解したり操作したりするのに必要な図形にも、隣り合う色と 3:1以上 のコントラスト比を求めています。薄いグレーの枠線だけの入力欄は、背景に溶けてどこに入力すればよいか分からなくなることがあります。ボタンや入力欄の見た目を決めるときも、コントラストを意識しましょう。

色の見え方は人によって違う：色だけに頼らない

色の見え方は、すべての人で同じではありません。研究者の岡部正隆氏・伊藤啓氏らがまとめたカラーユニバーサルデザインの資料によると、日本人を含む黄色人種では、男性の約5%（20人に1人）、女性の約0.2%（500人に1人）が、一般と異なる色の感じ方をするとされています。資料を見る人が多くなるほど、その中に色の感じ方が違う人がいる可能性は高くなります。

特に、赤と緑、黄色と黄緑のように、明るさの近い色の組み合わせは見分けにくいとされています。

WCAG 2.2の達成基準1.4.1「色の使用」（レベルA）は、色を、情報を伝えたり、操作を促したり、要素を区別したりする 唯一の 手段にしてはならないと定めています。図4の左のグラフは、今年と昨年を赤と緑の色だけで区別しているため、色の見分けがつきにくい人には、どちらの線がどちらか分かりません。右のグラフは、線を実線と点線に分け、今年の線には点の印をつけ、線の端に直接「今年」「昨年」と書いています。色が見分けにくくても、形とラベルで読み取れます。

色だけに頼らないための工夫は、次のとおりです。

• 形や線の種類を変える：実線と点線、丸と四角など。
• 文字で書き添える：凡例を離れた場所に置かず、グラフの線や棒の横に直接ラベルを書く。
• 明度の差をつける：色相だけでなく明るさも変えておくと、白黒で印刷しても区別できる。
• 必須項目やエラーを色だけで示さない：「赤字の項目は必須です」ではなく、「※必須」と文字でも示す。

迷ったら、一度デザインを白黒（グレースケール）にして見てください。白黒でも意味が通じれば、色の見え方が違う人にも伝わる可能性が高くなります。

写真の上に文字を置くとき

バナーやWebページのメインビジュアルでは、写真の上に文字を重ねることがよくあります。このとき起きやすいのが、写真の明るい部分と白い文字が重なり、文字が背景に溶けてしまう失敗です（図5の左）。

写真の上の文字を読みやすくする方法は、主に次の4つです。

• 暗幕を敷く：文字の下に、黒から透明へのグラデーションや半透明の黒い帯を敷きます（図5の右）。写真の雰囲気を残したまま、文字の部分だけ明度の差を確保できます。
• 文字を置く場所を選ぶ：空や壁など、写真の中で色が均一で暗い（または明るい）部分に文字を置きます。
• 写真と文字を分ける：写真の上に重ねず、写真の横や下に文字の領域を作ります。最も確実な方法です。
• 文字に縁取りや影をつける：手軽ですが、使いすぎると古い印象になりやすいので、控えめにします。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

ブランドカラーの決め方

最後に、会社やサービスの「ブランドカラー」の決め方です。色には、一般に「青は誠実さ」「緑は自然や安心」「赤は情熱や緊急」といった連想があるとよく言われます。ただし、こうした連想は文化・業界・時代によって変わり、同じ業界の競合が皆同じ色を使っていれば、むしろ見分けがつかなくなります。連想だけで決めず、次の手順で考えると失敗が減ります。

1. ブランドで伝えたい印象を言葉にする（例：「信頼できる専門家」「親しみやすい相棒」）
2. 競合の色を並べて見る：業界でよく使われている色と、空いている色を確かめます。
3. メインカラーの候補を選び、明度・彩度を調整する：白い背景でも黒い背景でも使えるか、文字色との組み合わせでコントラスト比が取れるかを確かめます。
4. サブ・アクセント・文字・背景の色をセットで決める
5. 使い道まで書いた色の表を作り、共有する

図6のように、色の番号（HEXコードなど）だけでなく、「どこに使うか」「どの文字色と組み合わせてよいか」まで書いておくのがポイントです。色の番号だけを渡すと、受け取った人がアクセントカラーを見出しや背景に広く使ってしまい、ブランドの印象がばらばらになります。この表は、第7回で扱うデザインツールの「ブランドキット」の機能に登録しておくと、社内の誰が作っても同じ色を使えるようになります。

実務ではこう使う

色を決めるとき、出来上がったデザインを確認するときは、次の5つをチェックします。

• 本文の文字と背景のコントラスト比は4.5:1以上あるか（ツールで確かめる）
• 色の役割（ベース・メイン・アクセント）は決まっているか。アクセントカラーを使いすぎていないか
• 色だけで情報を区別していないか。白黒にしても意味が通じるか
• 写真の上の文字は、どの部分に重なっても読めるか
• ブランドの色の表に沿っているか

なお、色のルールを含むブランドの統一感を、ツールでどう保つかは第7回で扱います。デザインツールの一つであるCanvaの評判の記事もあわせて参考にしてください。

この回のまとめ

• 色は「色相・明度・彩度」の3つの属性で捉えると、言葉で説明でき、直し方も見えてきます。
• 読みやすさを最も左右するのは、文字と背景の明度の差です。
• 配色はベース・メイン・アクセントの役割で組み立て、アクセントカラーは少量に絞ります。
• WCAG 2.2では、本文のコントラスト比は4.5:1以上、大きな文字は3:1以上、ボタンや図形も3:1以上が基準です。
• 色だけに頼らず、形・線の種類・文字でも情報を伝えます。ブランドカラーは使い道まで決めて共有します。

確認テスト

次回予告

第4回は「文字」です。ゴシック体と明朝体の使い分け、文字の大きさと太さのメリハリ、行間・行の長さ・字間など、「読まれる文字」にするための基本を学びます。デザインの印象の多くは、実は文字で決まっています。

参考資料

• W3C「Understanding SC 1.4.3: Contrast (Minimum)」（WCAG 2.2）：https://w3.org/WAI/WCAG22/Understanding/contrast-minimum.html （2026年11月12日確認）
• W3C「Understanding SC 1.4.11: Non-text Contrast」：https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast （2026年11月12日確認）
• W3C「Understanding SC 1.4.1: Use of Color」（WCAG 2.2）：https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html （2026年11月12日確認）
• 岡部正隆・伊藤啓・橋本知子「カラーユニバーサルデザイン」解説資料：https://jfly.uni-koeln.de/color/handout.pdf （2026年11月12日確認）
• 図3のコントラスト比は、WCAGの相対輝度の計算式を使って編集部が計算しました。