ピュア・アジュールに合う色は？鮮明な青空色を開放的に引き立てる配色例【#009FFF】

ピュア・アジュール（■#009FFF）は、青にシアンのニュアンスを含む、明るく鮮明な青空色です。天気情報のダッシュボードでは、現在の天気を示すヘッダーや主要な「詳しい予報を見る」ボタンなどに使うと、空を連想させる開放感を残しながら要点をまとめやすくなります。ただし、明るい青なので、白文字を重ねれば必ず読みやすいわけではありません。ここでは、ミストホワイト、ディープネイビー、スモーキーバイオレットを組み合わせ、明るさを保ちながら文字と操作を見分けやすくする配色を考えます。

ミストホワイトを広く使い、ディープネイビーで青空色を読みやすくする

■#009FFFには、ページや予報カードの背景用のミストホワイト■#F5FAFC、本文・気温・日時・アイコン用のディープネイビー■#102A3A、補助操作用のスモーキーバイオレット■#5F4A7Aを合わせる例が考えられます。

■#F5FAFCは白に近い淡い寒色で、鮮やかなアジュールを広い白余白の中で目立たせやすくなります。■#102A3Aは青みを含む低彩度の濃色なので、気温、降水確率、更新時刻、補足文などを落ち着いて整理できます。■#5F4A7Aは青から紫側へ少し離れた暗めの色で、寒色のつながりを残しながら、補助ボタンや別の情報系列に変化を加えられます。

天気ダッシュボードでは、ピュア・アジュールを現在の天気と主要操作に集める

実装では、ページ全体と週間予報カードを■#F5FAFCにし、「現在の天気」のヘッダーや強調面へ■#009FFFを使います。その上の気温、地域名、更新時刻、天気アイコンを■#102A3Aにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約5.23:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

主要な「詳しい予報を見る」ボタンを■#009FFFの背景で作る場合は、文字を■#102A3Aにし、同じ色の枠線も付けます。■#009FFFと■#F5FAFCの差は約2.70:1なので、明るい背景上では青い塗りだけをボタンの境界に頼らないためです。時間別予報などの補助操作を■#5F4A7Aの背景にし、その上の文字を■#FFFFFFにすると約7.64:1です。バイオレットとページ背景の差も約7.27:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）やグラフィックを色の境界で識別させる場合は、隣接色との3:1以上が基準になります。

開放感を保つなら、白文字と色だけの選択状態に頼らない

■#009FFFと■#FFFFFFのコントラスト比は約2.84:1です。そのため、ピュア・アジュールの上へ通常サイズの白文字を置く使い方は避け、本文やボタン文字には■#102A3Aを使います。白い文字を使いたい場合は、背景色そのものをもっと暗くするなど、実際の組み合わせを改めて確認する必要があります。

また、選択中の日付や現在地を■#009FFFの塗りだけで示すと、周囲の■#F5FAFCとの差が約2.70:1のため、色の境界だけでは十分でない場合があります。■#102A3Aの枠線、下線、チェックアイコン、「選択中」の文字などを併用すると、状態を色以外でも判断できます。

HueRollでは■#009FFFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。