ブライト・アジュールに合う色は？明るい青空色を爽快に見せる配色例【#3DB6FF】

ブライト・アジュール（■#3DB6FF）は、青にシアンのニュアンスを含む、明るく鮮やかな青空色です。スマートホームの機器追加画面では、検出したデバイスの選択状態、主要な「デバイスを追加」ボタン、接続手順の現在位置などに絞って使うと、明るい青空色を爽快に見せながら機器名や接続情報を整理しやすくなります。ここでは、クラウドホワイト、ディープネイビー、ディープアンバーを組み合わせます。

クラウドホワイトを土台にし、ネイビーとアンバーで青空色を引き締める

■#3DB6FFには、機器一覧や設定カードの背景用のクラウドホワイト■#F7FBFF、機器名・Wi-Fi名・説明文・主要ボタン文字用のディープネイビー■#102A43、手動設定や接続履歴などの補助操作用のディープアンバー■#6A4D34を合わせる例が考えられます。

■#F7FBFFは白に近い淡い寒色で、機器一覧や設定カードの広い面を軽く保てます。■#102A43は青みを含む低彩度の濃色なので、機器名、接続先Wi-Fi、説明文、注意事項などをアジュールより落ち着いて整理できます。■#6A4D34は黄赤寄りの暗い茶色で、青から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「手動で設定」「接続履歴を見る」などの補助操作を主要な追加操作と分けやすくなります。

機器追加画面では、ブライト・アジュールを選択中デバイスと主要操作に使う

実装では、機器一覧と未選択カードの背景を■#F7FBFFにし、機器名、接続先Wi-Fi、説明文、補足情報を■#102A43にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.08:1です。

検出した機器の選択カード、主要な「デバイスを追加」ボタン背景、接続手順の現在位置へ■#3DB6FFを使い、その上の文字と枠線を■#102A43にすると約6.51:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#3DB6FFと■#F7FBFFの差は約2.16:1なので、明るい背景上ではアジュールの塗りだけで選択カードやボタンの境界を示さず、■#102A43の枠線やアイコンを併用します。この枠線とページ背景の差は約14.08:1です。

「手動で設定」「接続履歴を見る」などの補助ボタンは■#6A4D34を背景にし、その上の文字を■#FFFFFFにすると約7.71:1です。ディープアンバーとページ背景の差も約7.41:1あり、■#3DB6FFとの比率は約3.43:1です。

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

爽快に見せるなら、白文字や接続状態の色分けだけに頼らない

■#3DB6FFと■#FFFFFFのコントラスト比は約2.25:1なので、アジュール背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンには■#102A43の文字を使い、明るいページ背景上では同じ濃色の枠線も残します。

また、「検出中」「接続済み」「接続確認中」「接続失敗」などを色だけで表さず、状態名の文字、チェックマーク、進行表示、警告アイコンなども併用します。HueRollでは■#3DB6FFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。