リッチ・アジュールに合う色は？落ち着いた青空色を鮮やかに引き立てる配色例【#147AB8】

リッチ・アジュール（■#147AB8）は、空色の明るさを残しながら彩度と深さを持たせた青です。Webサイトでは、旅行予約サイトのフライト検索結果や旅程確認ページで、選択中の便、出発・到着情報、主要な「この便を選ぶ」ボタンなどに使うと、落ち着いた青空色を鮮やかに見せながら情報を整理しやすくなります。ただし、青を広い背景や複数の操作へ一度に使うと、時刻や料金、乗継情報より色の存在感が強くなりやすいため、明るい背景と低彩度の補助色を組み合わせて役割を分けることが大切です。ここでは、ウォームクラウド、チャコールネイビー、サンドアプリコットを合わせ、リッチ・アジュールを軽快さと落ち着きの両方が残る配色にまとめます。

ウォームクラウドを土台にし、サンドアプリコットで青空色へ温かい差を加える

■#147AB8には、背景用のウォームクラウド■#FFFDFC、本文や補助文字用のチャコールネイビー■#26313A、補助操作用のサンドアプリコット■#F1D6A5を合わせる例が考えられます。

■#FFFDFCはごくわずかに暖かみを含む明色で、アジュールとの大きな明度差を作りながら、画面全体を冷たくしすぎずに保てます。■#26313Aは青みをわずかに含む低彩度の濃色なので、出発時刻、到着時刻、料金、乗継条件などを落ち着いて整理できます。■#F1D6A5は黄みを含む淡い色で、青から色相を離しながら鮮やかさを抑えているため、リッチ・アジュールを主役にした画面へ穏やかな温かさを加えられます。

フライト選択では、リッチ・アジュールを選択中の便と主要操作に集める

実装では、検索結果カードや旅程情報の広い背景を■#FFFDFCにし、選択中の便、区間見出し、主要な「この便を選ぶ」ボタン背景などへ■#147AB8を使います。その上の文字は■#FFFDFCにすると、通常サイズの文字に必要なコントラストを確保できます。出発・到着時刻、料金、所要時間、乗継条件は■#26313Aへ分けると、アジュールを要点と主要操作へ限定できます。

UI（ユーザーが操作するボタンや便選択などの画面部品）の補助操作には、濃い■#147AB8の帯やパネル上に、■#F1D6A5の「運賃条件を見る」ボタンやラベルを置き、その文字を■#26313Aにする方法があります。

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

鮮やかさを活かすなら、便の状態をアジュールとアプリコットだけで伝えない

■#F1D6A5と■#FFFDFCのコントラスト比は約1.39:1です。そのため、明るい背景上でサンドアプリコットの面だけを使ってボタンや便カードの境界を示すのは避け、■#26313Aの枠線や文字を組み合わせます。

また、「選択中」「残席あり」「満席」などの便や販売状態は、アジュールとアプリコットの色分けだけに頼らず、状態名の文字、チェックマーク、記号、太めの枠線なども併用します。旅行写真や空のビジュアルに青が多い場合は、ページ全体へさらに■#147AB8を広げるより、■#FFFDFCの余白を十分に残す方が、写真と操作を分けやすくなります。HueRollでは■#147AB8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。