グラデ背景に白・黒以外の文字色を使うコツ｜沈まない・浮きすぎない色の選び方

2026.08.15

はじめに

グラデーション背景の文字は、白か濃いグレーがいちばん読みやすい——これは別の記事でご紹介したとおりです。

でも実際にデザインしていると、「ブランドの色を使いたい」「白黒だとかたい」「もう少し遊びたい」という場面が必ず出てきます。そして色つきの文字をグラデに載せると、たいていどちらかが起きます。

背景に沈んで読みにくい
背景から浮きすぎて、そこだけ悪目立ちする

この記事は、その中間を狙うための考え方とレシピ集です。先に結論をお伝えすると、コツはひとことで言えます。

明るさは離して、色みは寄せる。

これだけです。順番に説明します。

なぜ色つき文字は難しいのか

白と黒が読みやすいのは、色みが無いぶん明るさの差だけで勝負できるからです。白はいちばん明るく、黒はいちばん暗い。だから背景がどんな色でも、明るさの差をしっかり取れます。

色つきの文字は、色みを持ったぶんだけ明るさの自由度が下がります。たとえば鮮やかな赤は、どうがんばっても「中くらいの明るさ」にしかなりません。中くらいの明るさのグラデに載せれば、色みがどれだけ違っても沈みます。

ここで大事なことがひとつ。読みやすさを決めるのは、色みの違いではなく明るさの差です。「青とオレンジは反対色だから読めるはず」は思い込みで、明るさが近ければ反対色でも沈みます。

基本の型：明るさは離して、色みは寄せる

この2つを同時にやります。

① 明るさは離す(読みやすさの担当)

背景が濃いグラデなら明るい色の文字、淡いグラデなら暗い色の文字。ここは白黒のときとまったく同じルールです。

目安も同じで、本文サイズの文字なら背景との明るさの比が4.5:1以上。色つきでも基準は変わりません。

② 色みは寄せる(なじみの担当)

文字の色を、背景と同じ系統から選びます。青いグラデなら青系の濃紺やクリーム寄りの白、ピンクのグラデならボルドーや生成り。

色みが近いと、明るさの差がしっかりあっても浮きません。「同じ世界の色」に見えるからです。逆に、色みまで遠い色(青グラデに純粋なオレンジなど)は、読めはしますがそこだけ別の世界になって悪目立ちします。

つまりこう覚えてください。

沈む原因 → 明るさが近い
浮きすぎる原因 → 色みが遠い

そのまま使える配色レシピ

理屈より実物、という方のために、背景別のレシピをまとめました。文字色は「濃い色」と「明るい色」の2方向を用意しています。

背景のグラデ	濃い文字なら	明るい文字なら
青 → 水色	濃紺 `#142048`	クリーム `#FAF5E1`
ピンク → 淡ピンク	ボルドー `#6E1A32`	(明るい文字は不向き)
緑 → 黄緑	深緑 `#1C4A30`	生成り `#FAF5E1`(大きな見出しだけ)
オレンジ → 黄	焦げ茶 `#462C14`	(明るい文字は不向き)
紫 → ラベンダー	深い紫 `#3C1A60`	淡いピンク寄りの白 `#FCF0F8`
紺 → 青	(濃い文字は不向き)	シャンパンゴールド `#F0DEB4`

カラーコードはそのまま入力してお使いいただけます。# から始まる6文字を、お使いのアプリの「文字色」の入力欄に貼り付けてください。

※文字は、グラデのいちばん濃い端かいちばん淡い端に置く前提です(置き方は別の記事でご紹介しています)。「不向き」とあるのは、そのグラデの濃い端があまり濃くならないため、明るい文字では差が取りきれない組み合わせです。

見ていただくと分かるとおり、濃い文字は「背景の色をぐっと濃くした色」、明るい文字は「白にほんのり背景の色みを混ぜた色」になっています。これが「色みは寄せる」の正体です。

いちばん実務で使えるのは「ほんのり色つきの白・黒」

純白のかわりにアイボリーや生成り、真っ黒のかわりに濃紺やチョコ色を使う——実はプロのデザインの多くはこれです。

読みやすさは白黒とほぼ同じなのに、印象がやわらかくなり、背景となじみます。「白か黒かの極端になりたくない」という悩みへの、いちばん確実な答えです。

鮮やかな色をどうしても使いたいとき

ブランドカラーが鮮やかな赤やオレンジで、それを文字に使いたい——そんなときは、色を変えずに載せ方を変えます。

短くて大きい文字だけに使う … 見出しやワンポイントなら、多少コントラストが弱くても読めます。本文サイズには使わないでください。
白い帯や白フチと組み合わせる … 文字の下に半透明の白い帯を敷けば、帯の上では鮮やかな色も読めます。
背景側の彩度を少し落とす … 主役は1つ。文字を鮮やかにするなら、背景はおとなしいグラデを選びます。鮮やか×鮮やかがいちばんうるさくなります。

やりがちな失敗3つ

反対色をそのままぶつける

青グラデに鮮やかなオレンジ、緑グラデに赤。理論上は「補色でよく目立つ」のですが、実際はチカチカして安っぽくなりがちです。補色を使うなら、どちらかの彩度をぐっと落としてください。

背景と同じ明るさの「きれいな色」を選ぶ

パステルの背景にパステルの文字、ビビッドの背景にビビッドの文字。色の相性は良いのに、明るさが同じなので沈みます。色を先に決めず、「濃くするか、明るくするか」を先に決めてください。

グレーの文字で無難にまとめる

中くらいのグレーは、白にも黒にも負ける中途半端な明るさです。無難に見えて、実はグラデの上ではいちばん読みにくい部類。グレーを使いたいなら、ほぼ黒に近い濃さまで落としてください。

仕上げの確認：白黒にして見る

色つき文字がちゃんと読めるかは、画像を白黒(グレースケール)にすると一発で分かります。

色みの情報が消えて、明るさの差だけが残るからです。白黒にしても文字がはっきり見えれば合格。溶けて見えなくなったら、明るさの差が足りていません。

スマートフォンなら、写真編集の「彩度」を最小にするだけで確認できます。色選びに自信がないときほど、この確認が効きます。

よくある質問

結局、何色が一番おすすめですか？

迷ったら生成り(クリーム)か濃紺です。ほぼ白・ほぼ黒の読みやすさを保ったまま、印象だけやわらかくできます。たいていのグラデに合います。

文字に2色以上使ってもいいですか？

1枚の画像の中では、色つき文字は1色までをおすすめします。強調したい単語だけ色を変えるなら、残りは白か黒に。色数が増えるほど、どこを読めばいいのか分からなくなります。

数字で確認したいです

白黒のときと同じで、背景との明るさの比が本文なら4.5:1以上、大きな見出しなら3:1以上が目安です。「コントラストチェッカー」で検索すると、色を2つ入れるだけで判定してくれるサイトが見つかります。色つきでも基準は同じ、というのがポイントです。

まとめ

合言葉は「明るさは離して、色みは寄せる」
沈む原因は明るさが近いこと。浮く原因は色みが遠いこと
濃い文字＝背景の色を濃くした色、明るい文字＝白に背景の色みを混ぜた色
いちばん実務的なのは生成りと濃紺。ほぼ白黒の読みやすさで、印象だけやわらかい
鮮やかな色は大きい文字だけ、または帯とセットで
最後は白黒にして確認。溶けたら明るさ不足

白か黒か、の二択から一歩だけ外に出ると、デザインの幅は一気に広がります。まずは生成りと濃紺から試してみてください。