背景色と文字色のおしゃれな組み合わせ6選｜2色・3色の配色とカラーコード
ホームページの色を選ぶときは、背景を明るく、文字を濃くすると読みやすくなります。まずは背景色と文字色の2色を決め、必要な場合だけボタンなどに使う色を足してみましょう。
この記事では、そのまま試せる6組の配色と、色を設定するときに使うカラーコードを紹介します。好きな色を選ぶだけでなく、文字が読めるかを確かめる方法も説明します。
見えやすいのにおしゃれ！文字色と背景色の組み合わせ基本ルール
ホームページにおける「おしゃれ」とは、単に見た目がきれいなことではありません。情報が整理されていて、読み手が迷わず内容を受け取れる状態こそが、洗練されたデザインの本質です。
おしゃれなホームページにするには、色を増やすより、文字が読みやすい組み合わせを選ぶことが大切です。背景と文字の色が似ていると、内容が分かりにくくなります。
まずは、白や薄い色の背景に、黒に近い文字色を合わせてみましょう。本文、見出し、ボタンで色の使い方をそろえると、ページがまとまりやすくなります。
白い背景には、黒に近い文字色を合わせる
黒い文字が悪いわけではありません。少しやわらかい印象にしたいときは、黒に近いグレーや濃い紺色も選べます。たとえば、次の色を試してみてください。
- スミ色（#1A1A1A、#222222）：黒に近いグレーです。ブログやお知らせなど、文章が多いページに使いやすい色です。
- ダークネイビー（#1C2B4A）：黒に近い紺色です。落ち着いた印象にしたい会社のホームページなどに合わせやすい色です。
背景が白（#FFFFFF）または淡いグレー（#F7F7F7）の場合、上記のような「ほぼ黒」の色を文字色に使うだけで、グッとプロらしい印象になります。
文字と背景の明るさの差を確認する
淡い文字は、見た目がやさしくても読みにくい場合があります。文字と背景の明るさにどれくらい差があるかを表す数字が、コントラスト比です。数字が大きいほど、明るさの差があります。
Webの見やすさに関する基準であるWCAGでは、通常の文字は4.5：1以上がレベルAAの条件です。まずは本文とボタンの文字が、この数字を満たすか確認しましょう。
白（#FFFFFF）の背景に薄いグレー（#AAAAAA）の文字を置くと、約2.32：1です。この組み合わせは、大きな文字に必要な3：1にも届きません。文字を濃いグレー（#222222）にするなど、色を調整してください。
淡い色を使いたいときは、背景や飾りに取り入れ、文字は濃い色にするとまとめやすくなります。
おしゃれな2色配色は、背景と文字の役割を決める
初めて色を選ぶときは、背景用と文字用の2色から始めましょう。色数を絞ると、別のページを作るときも同じルールでそろえられます。
背景用の明るい色と、文字用の濃い色を選ぶ
2色の役割は、次のように分けると分かりやすくなります。
- ベースカラー：白（#FFFFFF）やごく薄いグレー（#F5F5F5）など、背景に使う明るい色
- メインカラー：文字・ボタン・ラインなどに使う濃い色（ダークネイビー #1C2B4A、チャコール #3A3A3A など）
ボタンを作るときは、この2色を入れ替える方法もあります。たとえば白いページに紺色の文字を使っているなら、ボタンは紺色の背景に白い文字を合わせます。
そのまま試せる背景色と文字色の組み合わせ6選
カラーコードは、色を指定するための番号です。たとえば #FFFFFF は白を表します。ホームページの色を選ぶ画面にあるHEXやカラーコードの入力欄に貼り付けると、同じ色を指定できます。
以下は、文字と背景を重ねたときの明るさの差も計算した例です。背景を透明にせず、写真を重ねない場合は、6組とも通常の文字に必要な4.5：1を満たします。
1．白 × 濃い紺色：すっきり見せたい会社のホームページに
背景 #FFFFFF ／文字 #1C2B4A ／コントラスト比 約14.06：1
本文と見出しを同じ紺色にそろえると、落ち着いた印象にまとめやすくなります。
2．薄いグレー × スミ色：ブログやお知らせなど、文章が多いページに
背景 #F7F7F7 ／文字 #222222 ／コントラスト比 約14.85：1
白に近い背景と黒に近い文字の組み合わせです。写真や商品画像を一緒に載せるページにも使いやすい配色です。
3．クリーム色 × こげ茶：カフェや雑貨店など、あたたかい雰囲気に
背景 #FFF8EE ／文字 #5B4033 ／コントラスト比 約8.95：1
木や布の写真に合わせる配色の候補です。背景を広く使い、見出しも同じこげ茶にすると色が増えません。
4．淡い緑 × 深緑：自然ややさしさを感じる雰囲気に
背景 #EAF4EF ／文字 #214C3A ／コントラスト比 約8.65：1
背景に緑を使いたいときの組み合わせです。文字まで淡い緑にせず、濃い緑で読みやすさを保ちます。
5．淡いピンク × 濃い赤茶：やわらかく落ち着いた雰囲気に
背景 #FBEFF2 ／文字 #653847 ／コントラスト比 約8.48：1
美容室やハンドメイド作品の紹介などに試せる配色です。ピンクは背景に使い、説明文は濃い色で書きます。
6．濃い紺色 × 白：見出しの帯やボタンをはっきり見せたいときに
背景 #1C2B4A ／文字 #FFFFFF ／コントラスト比 約14.06：1
ページ全体を暗くしなくても、見出しやボタンだけに使えます。長い文章に使う場合は、実際の画面で読みやすさを確認しましょう。
カラーコードをホームページに入れる手順
まず、ページの背景色を設定します。次に本文の文字色を設定し、見出しやボタンにも同じ色を使います。最後にスマホで表示して、文字が小さすぎないか、写真の上で読みにくくなっていないかを確認してください。入力欄の名前や場所は、使っているホームページ作成サービスによって異なります。
3色配色は、背景・文字・目立たせたい部分に分ける
2色だけではボタンなどを目立たせにくいときは、3色目を足してみましょう。あちこちに使わず、お問い合わせボタンなど、大切な場所に絞るとまとまりやすくなります。
70：25：5は、色を使う量の目安
配色の黄金比として紹介される70：25：5は、背景を多く、主役の色をその次に、目立たせる色を少なく使う考え方です。必ずこの割合にする必要はありません。また、黄金比で決まる特別なカラーコードがあるわけでもありません。
| 役割 | 比率 | 使い方の例 |
| ベースカラー | 70% | 背景、余白（白・薄いグレーなど） |
| メインカラー | 25% | 見出し、本文テキスト、ナビゲーション |
| アクセントカラー | 5% | ボタン、強調箇所、アイコン |
表の割合は目安です。画面の面積を正確に測る必要はありません。まず背景を広く取り、ボタン用の色を使いすぎていないか見てみましょう。
3色を使う具体例：白・紺・深いオレンジ
背景は白（#FFFFFF）、本文と見出しは紺（#1C2B4A）、お問い合わせボタンは深いオレンジ（#A64B00）にします。ボタンの文字には、背景にも使った白を合わせます。オレンジと白のコントラスト比は約5.79：1です。ボタンの色と、その上の文字色をセットで決めると迷いにくくなります。
アクセントカラーの使いどころ
アクセントカラー（全体の5%）は、お問い合わせボタンや特に伝えたいキャッチコピーなど、読み手に必ず目を止めてほしい場所だけに使います。
誰にでも見やすい文字色を選ぶための具体的なポイント
ホームページを見る人によって、色の見え方や使っている画面は違います。配色を決めたら、実際の文章や写真を入れた状態でも確認しましょう。色だけでなく、文字の大きさや太さにも気を配ることが大切です。
写真の上に文字を載せる際の工夫
写真の上では、場所によって明るさが変わるため、同じ文字色でも読める部分と読みにくい部分が出てきます。読みづらい場合は、次の方法を試してください。
文字の後ろに、白や紺色の塗りつぶした帯を置く。
半透明の帯を使う場合は、帯を重ねた後の色で、文字が読めるか確認する。
写真を暗くして白い文字を重ねる場合は、文字の後ろにある明るい部分でも確認する。
文字に影を付けるだけでは、十分に読みやすくならない場合があります。迷ったら、写真と文章を別々に置く方法も選べます。
スマホで文字が読めるか確認する
パソコンで読みやすくても、スマホでは文字が小さくなったり、写真の切り取り位置が変わったりします。明るい場所では画面が見づらくなることもあるため、実際のスマホで確認しましょう。
デザインが完成したら、以下の確認を必ず行いましょう。
- 実際のスマートフォンで屋外（または明るい窓際）で表示確認する
- 画面輝度を下げた状態でも文字がはっきり読めるかテストする
- 本文テキストのコントラスト比が4.5:1以上あるかチェックする
色の悩みをゼロに！パッサイ（PASSITE）のプロにお任せするメリットとは
文字色と組み合わせのおしゃれルールをご理解いただけたと思いますが、「自分でやるのは大変そう」と感じた中小企業の担当者様や個人事業主の方も多いのではないでしょうか。
色の選定・コントラスト確認・スマホ表示チェック…これらを自分で調べながら進めるのは、膨大な時間がかかります。多忙なWeb担当者様にとって、デザインの細部に悩み続けることは本業の時間を削るコストにほかなりません。
そこでおすすめしたいのが、初期費用を極限まで抑えてプロの運用を取り入れられる月額制ホームページ制作「パッサイ（PASSITE）」です。
パッサイなら、業種・ターゲット・ブランドイメージに最適な「おしゃれで、かつ見えやすい」カラープランをプロのデザイナーがゼロからご提案します。
自分で試行錯誤して素人感の抜けないサイトを作り続けるより、格安でプロの色彩設計を取り入れる方が、ブランド価値の向上にもつながります。さらに、月々のサポートが含まれているため、後から新しいページやバナーを追加する際も、全体の配色ルールを崩すことなくプロが美しく整えます。
まとめ：文字色の組み合わせは見えやすさを最優先に
ホームページの文字色をおしゃれに見せる最大のコツは、背景とのコントラストを大切にし、誰にとっても見えやすい状態を保つことです。デザインのセンスに自信がなくても、「2色配色」の潔さや、「3色配色（70：25：5）」の黄金比ルールを守るだけで、専門知識に頼らずともお客様にしっかりと「伝わるサイト」へ近づくことができます。
しかし、日々の業務に追われる中で、色の組み合わせの迷路に迷い込み、時間を消費してしまうのは非常にもったいないことです。
貴重な時間を本業に使いつつ、最速でWeb集客の成果を出したいとお考えなら、デザインと運用のプロが並走するパッサイ（PASSITE）を活用することで解決されます。
あなたのサイトを、もっとおしゃれに・もっと読みやすく
「色のセンスに自信がない」「読みやすくておしゃれなサイトを作りたい」とお悩みのあなたへ。
複雑な配色ルールや見えやすさの調整をすべて自分でマスターするのは大変です。
パッサイ（PASSITE）なら、プロのデザイナーが貴社専用のおしゃれで成果が出るカラープランを形にします。
月額3,000円（税込3,300円）〜 という低コストで、デザインに悩む時間を減らし、プロのクオリティを手に入れませんか？
