プレゼン・資料の配色｜見やすい色と文字・背景の組み合わせ

プレゼン資料の配色は、色数を増やすより文字と背景のコントラスト、見出し・本文・強調の役割分担が重要です。W3Cのコントラスト基準も参考に、見やすいスライド配色を解説します。

配色・デザイン

はじめて読む方へ｜まず知っておきたい基本

この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。

配色とは

配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。

コントラストとは

コントラストは、文字と背景など2つの要素の見え方の差です。デザインでは印象だけでなく、文字の読みやすさやアクセシビリティにも関わります。

プレゼン資料の配色では、「おしゃれな色」を探すより先に、読めること・情報の優先順位が分かることが重要です。色は装飾ではなく、見出し・本文・強調・分類を伝えるために使います。

まず結論

基本は背景1色＋文字1色＋アクセント1〜2色。本文と背景は十分な明度差を取り、強調色を使う場所を絞ります。W3C WCAGでは、通常サイズの文字に対して4.5:1以上のコントラスト比が基準の一つとして示されています。

この記事の色

記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。

← 左右にスライドできます →

教材色 1#3F6682

教材色 2#DDB04F

教材色 3#70A477

教材色 4#C96567

教材色 5#7862A1

配色は色の選び方だけでなく、どの色をどれだけ使うかでも見え方が変わります。

主役を決める 60 / 30 / 10

均等に近づける 40 / 35 / 25

白背景なら濃い文字、濃色背景なら白〜明るい文字が基本です。薄いグレー文字や、鮮やかな色同士の組み合わせは、プロジェクターや明るい会場で読みにくくなることがあります。

WCAG 2.2のSuccess Criterion 1.4.3では、通常サイズの文字で4.5:1以上、大きな文字で3:1以上のコントラスト比が基準として示されています。プレゼン資料はWebページとは用途が違いますが、読みやすさを確認する目安として参考になります。

会場では画面よりコントラストが落ちることがある

プロジェクター、照明、スクリーン、視聴距離によって見え方が変わります。PC画面だけで完成とせず、少し厳しめのコントラストで設計する方が安全です。

赤・青・黄・緑をすべて強調に使うと、どこが重要か分からなくなります。重要数字、結論、CTAなど、意味ごとに色を固定すると読み手が迷いません。

色覚特性やモノクロ印刷を考えると、棒・線・系列は色だけでなく、ラベル、線種、マーカー、直接注記などを併用する方が安全です。

方向	背景	文字	アクセント
ビジネス	白`#F0F0F0`色ページを見る →	濃紺`#010F29`色ページを見る →	青`#006AB6`色ページを見る →
高級	濃紺`#010F29`色ページを見る →	白`#F0F0F0`色ページを見る →	金
ナチュラル	アイボリー`#DED2BF`色ページを見る →	焦茶`#564539`色ページを見る →	深緑`#005638`色ページを見る →
モノトーン	白`#F0F0F0`色ページを見る →	黒`#2A2A2A`色ページを見る →	赤または青を1色