ブリリアント・アジュールに合う色は？鮮やかな空色を開放的に見せる配色例【#64C0F7】

ブリリアント・アジュール（■#64C0F7）は、青に少しシアンのニュアンスを含む、明るく鮮やかな空色です。天気予報のWebダッシュボードでは、選択中の予報日、主要な「予報を更新」ボタン、現在地を示す短いアクセントなどに絞って使うと、空色の明るさを活かしながら気温や降水確率、風速などの情報を整理しやすくなります。ここでは、ウォームアイボリー、ディープティール、ディーププラムを組み合わせます。

ウォームアイボリーを土台にし、濃いティールとプラムで空色を引き締める

■#64C0F7には、ページと未選択カードの背景用のウォームアイボリー■#FFF8EE、気温・降水確率・風速・主要ボタン文字用のディープティール■#14323B、お気に入り地点の管理など補助操作用のディーププラム■#6C2F5Bを合わせる例が考えられます。

■#FFF8EEは黄みをわずかに含む明色で、広い背景を白一色より少しやわらかく見せながら、アジュールの青みを目立たせやすくします。■#14323Bは青緑寄りの低彩度の濃色なので、数値や説明文を落ち着いて整理できます。■#6C2F5Bは赤紫寄りの暗い色で、アジュールから色相（赤・青・緑など色みの違い）を離せるため、補助操作へ変化を付けたいときに使いやすい候補です。

天気予報画面では、選択中の日付と主要操作へブリリアント・アジュールを使う

実装では、ページ全体と未選択の予報カードを■#FFF8EEにし、気温、降水確率、風速、補足説明を■#14323Bにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約12.85:1です。

選択中の予報日カードと主要な「予報を更新」ボタンの背景へ■#64C0F7を使い、その上の文字とアイコン、枠線を■#14323Bにすると約6.73:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#64C0F7と■#FFF8EEの差は約1.91:1なので、明るい背景ではアジュールの塗りだけで選択状態やボタンの境界を示さず、■#14323Bの枠線と「選択中」の文字、チェックアイコンを併用します。枠線とページ背景の差は約12.85:1です。

「お気に入り地点を管理」のような補助ボタンは■#6C2F5Bを背景にし、その上の文字を■#FFFFFFにすると約9.57:1です。ディーププラムとページ背景の差も約9.07:1あり、■#64C0F7との比率は約4.75:1です。

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

開放的に見せるなら、白文字と色だけの天気区分に頼らない

■#64C0F7と■#FFFFFFのコントラスト比は約2.01:1なので、アジュール背景へ通常サイズの白文字を置く使い方は避けます。この例では主要ボタンの文字を■#14323Bにします。

また、晴れ・雨・強風・警報などの状態を色だけで区別せず、天気名の文字、アイコン、数値、必要に応じた注意文を併用します。選択中の日付も、■#64C0F7の背景だけで示すのではなく、「選択中」の表示やチェックアイコンを加えると状態を追いやすくなります。HueRollでは■#64C0F7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。