白背景のWEBサイトに合う色は？シンプルに見せる配色のコツ

白背景のWEBサイトには、濃いグレーや深い緑、落ち着いた茶色などを組み合わせる方法があります。ただし、白い面を増やすだけではシンプルなデザインになるとは限りません。白いカードの境目や補足文字が見えにくくなることもあります。地域の植物交換会の案内ページを例に、文字・日程カード・申込みボタンの色を少数に整理する方法を紹介します。

白を広く使い、文字は濃く、アクセントは役割を絞る

白背景では、最初に読む文章の色を決めます。見出しを深い緑、本文を濃いチャコール、補足文を少し控えめなグレーグリーンにすれば、背景を塗り分けなくても情報の順序を作れます。色の種類を表す色相より、まず背景と文字の明るさの差を確認しましょう。

配色のアクセントは、申込みボタンやリンク、選択中の表示など、意味のある場所へ限定します。緑を使えば必ず自然に見えるわけではありませんが、植物を扱う写真に合わせて深い緑を試す案は考えられます。白い余白や文字の大きさも使い、色だけに情報の強弱を任せないことがポイントです。

植物交換会の案内・日程選択ページの配色例

以下のHEXは、WEBの色を16進数で指定するカラーコードです。コントラスト比は2色の相対的な明るさの差を示す値です。白いページ、日程を選ぶ面、参加申込みの操作で、それぞれの色の役割を考えます。

案内文：白と濃い文字で読み進めやすくする

• ページの広い背景には白 ■#FFFFFF。見出しは深い緑 ■#285640にして、背景とのコントラスト比を約8.42:1にします。
• 交換会の内容や参加方法の本文にはチャコール ■#26332Dを使い、白背景 ■#FFFFFFと約13.18:1を確保します。
• 受付時間などの補足文にはグレーグリーン ■#5B6B60を使い、白 ■#FFFFFFとの比率は約5.65:1です。文字を極端に小さくせず、余白でも重要度を調整します。

日程選択：白いカードには境界と選択表示を付ける

日程を選ぶ部分の背景を淡い砂色 ■#F6F1E7にすると、白いページ ■#FFFFFFとの比率は約1.13:1です。小さな明るさの差なので、この色分けだけで区切りを伝えようとしません。説明文には濃いブラウングレー ■#35382Fを使い、砂色の背景 ■#F6F1E7と約10.61:1にします。

各開催日を白いカード ■#FFFFFFで表示するなら、輪郭を示すグレーグリーン ■#74847Aの枠線を加えます。枠線は白いカード ■#FFFFFFと約3.94:1、外側の砂色 ■#F6F1E7と約3.50:1です。選択中の日程には深い緑 ■#176448の枠線と「選択中」の文字を併用します。枠線と白いカード ■#FFFFFFは約7.11:1、砂色の面 ■#F6F1E7とは約6.32:1で、色だけに頼らず状態を示せます。

参加操作：ボタンと補助リンクの役割を分ける

「この日程で申し込む」ボタンには深い緑 ■#176448と白文字 ■#FFFFFFを組み合わせます。文字とボタンの比率は約7.11:1です。ボタンは白い面 ■#FFFFFFに対して約7.11:1、砂色の面 ■#F6F1E7でも約6.32:1の差があります。

補助の「持ち物を確認する」は落ち着いた茶色 ■#795032の下線付きリンクにします。白 ■#FFFFFFに対して約6.98:1、砂色 ■#F6F1E7に対して約6.20:1です。参加区分のラベルには薄いベージュ ■#E9D7BCと濃いブラウン ■#614729を組み合わせると、ラベル文字と背景は約6.11:1になります。色だけで区分を示さず、文字でも内容を記します。

白背景で薄い文字を使うときは操作状態も確認する

白だから薄い文字でも読めるとは限りません。淡いグリーングレー ■#A4B5ABは白 ■#FFFFFFと約2.15:1で、通常の文字には不十分です。また、グレーグリーン ■#63766Bは白背景 ■#FFFFFFなら約4.85:1でも、砂色の面 ■#F6F1E7では約4.30:1となり、通常サイズの文字に必要な4.5:1を下回ります。面が変わったら、文字の色も再確認しましょう。

ホバー（マウスを重ねた状態）では申込みボタンを濃い緑 ■#0D4937に変えても、白文字 ■#FFFFFFと約10.37:1です。フォーカス（キーボードなどで操作対象になった状態）には、少し離した濃い青 ■#264F73の輪郭を加えます。白 ■#FFFFFFに対して約8.58:1、砂色 ■#F6F1E7に対して約7.62:1の差があります。

WCAG 2.2（Web Content Accessibility Guidelines：WEBのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上が必要です。入力欄の枠線や選択状態など、操作に必要な非テキスト表示には隣接色との3:1以上が求められます。すべてのカードに枠線が必要という意味ではありません。スマートフォンでも、日程の選択表示、文字、ボタンの操作を実画面で確認してください。