白背景で失敗しない色選びのコツ｜明度差を制する配色戦略

こんにちは！

今日は「白背景で失敗しない色選びのコツ｜明度差を制する配色戦略」について解説します。

白背景でよくある色選びの失敗パターン

現場でめっちゃよく見かけるのが、白背景に対して「色選びに失敗してる」っていうケースなんですよ。
僕も新人時代は、「うわ、このボタンの色、白背景で見えないやん…」って事態をやらかしました。

具体的には、こんなパターンが多いです。

• 薄いグレーのテキストを白背景に配置して、見えにくくなってる
• 淡いパステルカラーのボタンが白背景に埋もれてる
• 「かわいい色だから」という理由で、明度が高すぎる色を選んじゃう
• ブランドカラーが薄い色で、背景と判別できない

ほんまに多いのは「目で見て『かわいい』『きれい』と思った色が、実装したら読めない」っていう状況。
これってね、明度差を意識してないからなんです。

明度差で判断する正しい色選びの方法

色選びで失敗しないコツは、「色相（どんな色か）」じゃなくて「明度（明るさ）」に注目することです。
白背景は明度が最も高い（#ffffffで明度100%）なので、それと相性のいい色を選ぶ必要があります。

白背景と組み合わせるなら、以下の明度差ルールを意識してください。

• テキスト・ロゴ用途：明度差は最低でも50%以上あるといいですよ。つまり、かなり濃い色。グレーなら#333333以下が目安です。
• ボタン・ナビゲーション：明度差は40%以上あると読みやすい。ブランドカラーを使う場合は、濃くして明度を落とします。
• アクセントカラー：薄い色でも大丈夫ですが、その場合はボーダーやシャドウで補強します。

僕がよく使うチェック方法は、グレースケール（白黒）で表示してみるってやつです。
Figmaでもブラウザのデベロッパーツールでも、カラーフィルターをグレースケールにすると、明度差だけが見えるんですよ。
そこで「あ、これ見えないな」って判断できたら、もっと濃い色に変更するといいですよ。

具体的な例を出すと、僕が前に関わったプロジェクトでは、ブランドカラーが#87CEEB（スカイブルー）でした。
これを白背景に直接使うと、めっちゃ見えにくかったんです。
そこで、同じ青系統でも#0056b3という濃いバージョンを作って、それをテキストやボタンに使いました。
色相は変わってないのに、明度を落とすだけで一気に読みやすくなったんですよ。

実例で学ぶ白背景との相性チェック

実際のデザイン現場で、白背景に配置する色をどうやって判断してるか、パターンを紹介します。

パターン1：テキストカラーの場合

本文テキストなら、ほぼ黒に近い#222222〜#333333を選びます。
「え、完全な黒じゃなくていいの？」って質問をもらいますけど、完全な黒（#000000）は目に疲れやすいので、ほんのちょっと明るいグレーを混ぜるのが業界標準なんですよ。

パターン2：ボタンのカラーの場合

ボタンはクリックしてほしい要素なので、アクセントカラーを使うことが多いですよね。
でも白背景だと、淡いアクセントカラーは目立たないんです。
例えばクライアントから「ピンク系でお願いします」と言われたとき、#FFB6C1（薄いピンク）だと使えません。
ここは#C2185B（濃いピンク）にして、明度差を確保する。
色相はピンク系のまま、でも濃くするってわけです。

パターン3：薄い色を使いたいときの工夫

「いや、どうしても淡いパステル色を使いたいんです」って場合もありますよね。
その時は色だけに頼らず、以下の工夫をするといいですよ。

• ボーダーを加える：薄いピンク背景なら、濃いピンクのボーダーで縁取る。
• シャドウをつける：微妙なシャドウで要素を立体的に見せて、視認性を上げる。
• テキストを濃くする：背景は薄くても、そこに乗るテキストは濃い色にして明度差を保つ。

これらは「色だけで判別できない」という弱点を、別の手段（線や影）で補強する戦略なんです。

まとめ

白背景での色選びの失敗を避けるなら、「色相より明度」を優先することが大事です。
色相（赤・青・緑など）はブランドや好みで選んでいいんですけど、明度差はチェックリストとして最後に必ず確認するといいですよ。

実際のチェック方法としては。

1. グレースケールで見てみる
2. 白背景との明度差が50%以上あるか確認する
3. 不安なら、もう1段階濃くする

この3ステップで、ほぼ失敗することはなくなります。
「でも濃くしたら、ブランドカラーのイメージが変わっちゃう…」って心配も分かるんですけど、見えない色より見える色のほうが大事ですから。
必要に応じて、ボーダーやシャドウで補強する。
そうすることで、デザインの意図も守れるし、視認性も確保できるんです。