ブルーグレーとベージュの配色例｜背景とアクセントを入れ替えて比較

ブルーグレーとベージュは、どちらも彩度を抑えた落ち着いた色です。青みのある背景にベージュを添える場合と、温かみのあるベージュを背景にブルーグレーを置く場合では、同じ2色でも雰囲気が変わります。ただし、淡い色同士は境界がぼやけやすいのも特徴です。背景とアクセントを入れ替えた2例で、文字・枠・ボタンまで含めた配色を比較します。

2色を入れ替えると、冷たさと温かさの比率が変わる

ブルーグレーは青に灰色を混ぜたような色、ベージュは黄みや茶色みを含む淡い色の呼び方です。どちらも色名だけでは数値が決まらないため、この記事ではブルーグレーを■#DCE7EB、ベージュを■#EDE0CEとして比較します。HEX（Webの色を16進数で指定するコード）を決めておくと、背景と差し色の役割を入れ替えても同じ色を使えます。

この2色のコントラスト比（隣り合う色の明るさの差）は約1.03:1と小さく、色を隣に置くだけでは区切りが不明瞭です。文字には濃い青灰■#283B47を使うと、ブルーグレーの背景で約9.23:1、ベージュの背景で約8.94:1を確保できます。淡い2色は面積と位置で雰囲気を作り、文字や必要な境界は濃色で整えるのが基本です。

背景とアクセントを入れ替えた配色例

ブルーグレーを背景にする：サービス案内ページ

オンライン相談サービスの案内ページでは、ブルーグレー■#DCE7EBを広い背景に使います。料金や利用の流れをまとめた小さなパネルだけをベージュ■#EDE0CEにし、本文は濃い青灰■#283B47にします。ベージュは暖かさを添える役割ですが、背景との比は約1.03:1なので、パネルがはっきり区切られるとは限りません。

パネルの境界が重要なら、濃い灰青■#536B78の枠を加えます。この線はブルーグレーに対して約4.46:1、ベージュに対して約4.32:1です。相談予約ボタンにはさらに深い青灰■#36586Cを使い、白■#FFFFFFの文字を載せれば約7.58:1、ボタンと背景の差も約6.02:1になります。ボタンには「相談を予約する」と動作を明記します。

ベージュを背景にする：工芸品の告知バナー

工芸品の展示会バナーでは、ベージュ■#EDE0CEを広い背景に使い、開催日と会場をまとめる小さな帯をブルーグレー■#DCE7EBにします。見出しと説明を濃い青灰■#283B47にすると、ベージュ上で約8.94:1、ブルーグレー上で約9.23:1です。ベージュを大きくすることで温かな方向へ寄せ、ブルーグレーは補助情報のまとまりを作るために使います。

開催情報の帯は背景と約1.03:1しか違わないため、必要なら同じ濃い灰青■#536B78の枠を使い、日時の文字や余白でも区別します。「詳細を見る」ボタンは深い赤茶■#8B583Fに白■#FFFFFFの文字を合わせると約5.89:1、ボタンとベージュ背景の比も約4.53:1になります。落ち着いた2色の中で、操作する場所だけを濃い暖色にする案です。

淡い色の境界と操作部分を確認する

背景とアクセントを交換するとき、文字色やボタン色まで一律に反転させる必要はありません。2つの淡色はそのまま使い、背景に接する文字・枠・ボタンを個別に検証します。装飾的な帯なら弱い境界でも構いませんが、選択中のカードや入力欄などを色で識別させる場合は、濃い線やラベルを用意しましょう。細すぎる線は画面上で薄く見えることもあります。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字は背景に対して4.5:1以上、大きな文字は3:1以上が基準です。操作部品や意味のある図形の識別に必要な部分は、隣接色との3:1以上が求められる場合があります。HueRollではHEXで色を選び、配色候補や選択色と白・黒のコントラストを確認できます。ただし任意の2色間の比率やAA・AAAの自動判定には対応しないため、今回のような淡い色同士の組み合わせは別途検証してください。