ベージュ背景のWEBサイトに合う色は？やわらかく見せる配色例

ベージュ背景のWEBサイトには、濃いブラウンやグレー、深い緑などが組み合わせの候補になります。ただし、背景も文字も淡い色にそろえると、やわらかな雰囲気より先に読みにくさが目立つ場合があります。今回は手作りノートの販売ページを例に、ベージュを広く使いながら、文字・商品カード・購入ボタンを見分けやすくする配色を考えます。

ベージュ背景には濃い文字色と少量のアクセントを合わせる

まずベージュをページ全体の背景に使い、見出しと本文には背景より十分に暗い色を選びます。ベージュと近いクリーム色だけで文字までそろえると、色数は少なくても情報の強弱がなくなります。色の「やわらかさ」は感じ方や周囲の面積で変わるため、ベージュだから必ず優しく見えると決めつけず、実際のページで確かめましょう。

大きな背景面をベージュにし、説明文は濃いグレー、見出しは濃い茶色、購入操作だけに深い緑を使うと、各色の役割を整理できます。配色を増やすより、文字・写真・ボタンをどの順番で見てほしいかを先に考えることが大切です。

手作りノートの販売ページで使うベージュ配色例

ここではHEX（16進数で色を指定するWEB用のカラーコード）を使います。コントラスト比とは、文字色と背景色など2色の相対的な明るさの差を示す値です。色だけでなく、その色をどこに使うかも合わせて見てください。

商品紹介：温かいベージュと濃いブラウン

• ページ背景：やや温かみのあるベージュ ■#F2E6D6。商品名などの見出し：深いブラウン ■#49352E。文字と背景は約9.32:1です。
• 商品の説明文：濃いグレー ■#403A36。ベージュ背景 ■#F2E6D6とは約9.09:1です。
• サイズや素材などの補足：落ち着いたグレーブラウン ■#695C52。同じ背景 ■#F2E6D6と約5.25:1に保ちます。

写真に紙の白さや表紙の色がある場合、背景まで鮮やかにせず、説明部分をベージュの面に置くと写真との競合を抑えやすくなります。見出しと本文の色相は近くても、文字の太さと間隔で情報の順番を示しましょう。

商品カード：オフホワイトを使い、必要なら枠線を加える

商品を並べるカードの背景にはオフホワイト ■#FCFAF7を使います。外側のベージュ ■#F2E6D6とのコントラスト比は約1.18:1なので、カードの境目はあまり強くありません。商品名を深いブラウン ■#49352Eにすれば、カード背景 ■#FCFAF7とは約11.00:1です。

カードの輪郭が購入操作の理解に必要な場合は、落ち着いた茶系の枠線 ■#8B7665を加えます。枠線はオフホワイト ■#FCFAF7と約4.13:1、外側のベージュ ■#F2E6D6と約3.50:1です。単なる飾り線であれば、この比率を必須条件として扱う必要はありません。

購入案内：深い緑を主要操作に使う

「このノートを注文する」ボタンは深い緑 ■#2E6556に白文字 ■#FFFFFFを組み合わせます。文字とボタンの比率は約6.75:1、ボタンとベージュ背景 ■#F2E6D6は約5.48:1、オフホワイトのカード ■#FCFAF7に置いた場合でも約6.48:1です。

補助の「紙の種類を詳しく見る」は赤みのあるブラウン ■#8D4B3Fで下線付きの文字リンクにします。ベージュ背景 ■#F2E6D6とは約5.32:1、カード背景 ■#FCFAF7とは約6.28:1です。塗りつぶしボタンを増やさず、注文操作との重要度を区別します。

ベージュの濃淡を変えたときは文字と境界を再確認する

配送情報の帯に少し濃いベージュ ■#E8D4BCを使う場合、見出しのブラウン ■#49352Eとは約7.96:1ですが、先ほどの補足文字 ■#695C52との比率は約4.48:1まで下がります。通常サイズの文字に必要な4.5:1へわずかに届きません。帯の説明文は濃いグレー ■#403A36へ変えれば約7.77:1になります。

さらに、薄いクリーム色 ■#FFF9EFをベージュ背景 ■#F2E6D6上の文字色にすると約1.17:1で、文字としては不十分です。やわらかい雰囲気を保ちたいときこそ、読ませる文字と装飾を分けることが大切です。

ホバー（マウスを重ねた状態）では購入ボタンを濃い緑 ■#234B40にすると、白文字 ■#FFFFFFと約9.76:1を確保できます。フォーカス（キーボードなどで操作対象になった状態）には、ボタンから少し離した濃い青灰 ■#203F49の輪郭を加えます。輪郭とベージュ背景 ■#F2E6D6は約9.13:1、カード背景 ■#FCFAF7とは約10.79:1です。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作を識別するのに不可欠な部品の輪郭や状態表示には、隣接色との3:1以上が求められます。実際のスマートフォンでもカードの境目・商品の説明・購入ボタンを確認しましょう。