スライドや資料を作るとき、配色にどれだけ気を配っていますか？

色の見え方は人によって違うため、他人も同じように見えているとは限りません。女性は男性よりも見える色の種類が多く、男性の 20人に 1人は色覚異常をもっています。

このように色の見え方には個人差があるのに、感覚で色を選んだり、デフォルトのままの色を使っていて良いのでしょうか。

実は、たった 『2つの差』を改善するだけで、男性・女性・色覚異常がある人にも見やすい配色にできるのです。

色差と明度差を『ある程度』つける

前提として、センスの良い配色と見やすい配色は違います。

今回は『センス無 × 見やすい』配色を目標にします。

誰でも見やすい配色には、色差と明度差。この2つの差をつけられれば大丈夫です。なんの差かというと、背景と文字の差のこと。

色の表し方には言葉と数字の 2種類があります。赤色→ rgb (255, 0, 0) というように、差を比べるには、色を数字に変換してください。

今回は RGB値に置き換えます。
rgb は Red, Green, Blue の頭文字で、赤・緑・青の 3つの要素で色を数値化したものです。要素はそれぞれ 0〜255 までの 256 通りあるので、 理論上では 256 の 3乗の約 1,670 万通りの色を表すことができます。

こんな未知数な色の組み合わせを感覚でコントロールしようとすることが、いかに無謀なのかが分かると思います。

さっそく置き換えてみましょう。

ちなみに RGB値には、10進法で表す 0〜255と、16進法で表す #00〜FFの2種類があります。

このように、色を RGB値に置き換えることで、色差と明度差を計算することができます。

そして、色差と明度差、つまり色の種類と明るさに、背景との『ある程度』の違いを付ければ見やすくなるのです。

問題は、この『ある程度』がどの程度なのかです。

『ある程度』は数値化されている

実は『ある程度』の基準は、w3cによって定められています。

色覚異常 – Wikipedia
（6.1 デザイン・ウェブサイトの項を参照）

色差は、背景色と前景色の RGB値それぞれの差を取り、3つを足したものです。
この色差が500以上ならば、見やすい配色になります。

明度差は、(R×299 + G×587 + B×114) / 1000 で求められます。
明度差は125以上であれば良いです。

いかにも複雑な計算なので、配色シミュレーターを作りました。

色差・明度差をすぐ計算できる『配色シミュレーター』の作り方と活用法

たった 2色決めるだけで、配色完成

色差と明度差にどれだけ差をつければ良いかが分かったので、配色を決めていきましょう。

決めるのは、2色だけ

見やすい配色には、以下の 4色を揃えましょう。

1. 背景色: 白で固定
2. 文字色: rgb(87, 87, 87) までのグレー
3. メインカラー:
4. アクセントカラー:

基本的には、背景色は白、文字色は黒でいいのですが、これだと差が大きすぎるので、黒を少し弱めてグレーにするのがオススメです。
実際に、多くのサイトでは文字色にグレーが使われているんです。

このように背景色を固定し文字色をグレーにしてしまえば、決める色はメインカラー・アクセントカラーの2種類だけで良いのです。それぞれ、背景色である白との差を考えます。

メインカラーは内容に即した色

スライドの配色の主役になるメインカラーは、スライドの内容に即した色にします。また、文字色・背景色どちらにも使う色なので、白との相性も重要です。

• ブランドカラー

社内・社外どちらのプレゼンでも使える、万能な配色です。ただ、ブランドカラーが明るすぎる場合は避けた方が良いです。



• スライドの目的・内容（定性ワード）

承認のプレゼンであれば、厳格なネイビーなど明度低めの色。
ワークショップ用の資料なら、黄色やオレンジなど明度高めの色がオススメです。

• 聞き手に合わせる

聞き手の立場や好みに合った色にすると、内容が伝わりやすくなります。
新人にはフレッシュな緑系で彩度高めの色、上司やベテランには落ち着いたグレーや青系など。

• 自分が好きな色

例えば自己紹介のスライドなら、性格に合わせた配色にしましょう。活発なら赤やオレンジ、冷静なら青など。

配色はスライドを見やすくするため、見やすくするのは内容を伝えるためです。逆に内容との一貫性がない場合はノイズになってしまうので、注意してください。

アクセントカラーはメインカラーの補色

アクセントカラーは強調したい時に使う色で、1スライドにつき 1箇所だけ使うのが原則です。なぜならば、スライドの基本は 『1スライド = 1メッセージ』であり、強調するメッセージは 1つだけだからです。

アクセントカラーは背景色だけでなく、メインカラーとの相性も考えなければいけません。

なので、アクセントカラーはメインカラーの補色付近の色にしてください。

補色は、色の 3要素である HSB値を利用すると、彩度と明度を固定して、色相を 180° 回すだけで簡単に求められます。

Officeの場合、HSL値となっており、鮮やかさと明るさが 0〜255 までの 256 通りで表されます。画像の例はどちらも赤の原色を表していますが、HSL値では原色が明るさ 50%なのに対し、HSB値では明度 100%で原色を表します。

まとめ

見やすい配色には、色差と明度差をある程度つけましょう。
これは背景色との差なので、背景色を白に固定すると、決めるのはメインカラーとアクセントカラーの 2色だけです。
メインは内容に即した色、アクセントはメインの補色付近の色にすれば、見やすい配色を簡単に達成できます。

資料はあなたが伝えたいメッセージを伝えてくれる、あなたの味方です。
見やすい配色をマスターして、あなたの資料をさらに伝わりやすいものにしてください。