リッチ・ブルーに合う色は？深みのある青を上品に際立たせる組み合わせ【#143DB8】

リッチ・ブルー（■#143DB8）は、鮮やかさを残しながら明るさを抑えた深い青です。Webサイトでは、不動産の物件詳細や内見予約ページで、物件名、選択中の日時、主要な「内見を予約する」ボタンなどに使うと、写真を主役に残しながら深い青を上品に際立たせやすくなります。ただし、青を広い背景や複数の操作へ一度に使うと、室内写真や物件情報よりUIの存在感が強くなりやすいため、明るい背景と低彩度の補助色を組み合わせて役割を分けることが大切です。ここでは、アイスホワイト、インクネイビー、ウォームストーンを合わせ、リッチ・ブルーを落ち着いて引き立てる配色を考えます。

アイスホワイトを土台にし、ウォームストーンで深い青へ温度差を加える

■#143DB8には、背景用のアイスホワイト■#F7F9FF、本文や補助文字用のインクネイビー■#252A38、補助操作用のウォームストーン■#C7B98Eを合わせる例が考えられます。

■#F7F9FFはわずかに青みを含む明色で、リッチ・ブルーとの色相のつながりを残しながら大きな明度差を作れます。■#252A38は青みをわずかに含む低彩度の濃色なので、価格、所在地、間取り、設備情報などを落ち着いて整理できます。■#C7B98Eは黄みを含む低彩度色で、青から色相を離しながら鮮やかさを抑えているため、深い青を主役にした画面へ穏やかな温かさを加えられます。

物件詳細では、リッチ・ブルーを物件名と主要操作に集める

実装では、物件写真の周囲や情報カードの広い背景を■#F7F9FFにし、物件名、選択中の内見日時、主要な「内見を予約する」ボタン背景などへ■#143DB8を使います。その上の文字は■#F7F9FFにすると、通常サイズの文字に必要なコントラストを確保できます。価格、所在地、間取り、設備情報は■#252A38へ分けると、ブルーを要点と主要操作へ限定できます。

UI（ユーザーが操作するボタンや日時選択などの画面部品）の補助操作には、濃い■#143DB8の帯やパネル上に、■#C7B98Eの「設備を見る」ボタンやラベルを置き、その文字を■#252A38にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#143DB8と■#F7F9FFは約8.35:1、■#252A38と■#F7F9FFは約13.60:1、■#252A38と■#C7B98Eは約7.33:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#143DB8と■#C7B98Eは約4.50:1なので、濃い青の面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

上品に見せるなら、内見枠の状態をブルーとストーンだけで伝えない

■#C7B98Eと■#F7F9FFのコントラスト比は約1.85:1です。そのため、明るい背景上でウォームストーンの面だけを使ってボタンや日時カードの境界を示すのは避け、■#252A38の枠線や文字を組み合わせます。

また、「選択中」「予約可能」「受付終了」などの状態は、ブルーとストーンの色分けだけに頼らず、状態名の文字、チェックマーク、太めの枠線なども併用します。室内写真や外観写真に青が多い場合は、ページ全体へさらに■#143DB8を広げるより、■#F7F9FFの余白を十分に残す方が、写真と操作を分けやすくなります。HueRollでは■#143DB8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。