ビビッド・アジュールに合う色は？鮮やかな青空色を開放的に見せる配色例【#1FABFF】

ビビッド・アジュール（■#1FABFF）は、青にシアンのニュアンスを含む、彩度（色の鮮やかさ）が高い明るい青空色です。ビデオ会議の参加前確認画面では、主要な「会議に参加」ボタン、選択中のデバイス、接続確認のアクセントなどに絞って使うと、鮮やかな青空色を開放的に見せながらカメラ映像や設定項目を整理しやすくなります。ここでは、クラウドホワイト、ディープネイビー、ディープティールを組み合わせます。

クラウドホワイトを広く使い、濃いネイビーとティールで青空色を支える

■#1FABFFには、ページ背景用のクラウドホワイト■#F7FBFF、会議名・デバイス名・説明文用のディープネイビー■#102A43、音声や映像設定などの補助操作用のディープティール■#20505Aを合わせる例が考えられます。

■#F7FBFFは白に近い淡い寒色で、広い余白を保ちながらアジュールの明るさを活かせます。■#102A43は青みを含む低彩度の濃色なので、会議名、参加者名、マイクやカメラの設定文などを主役色より落ち着いて整理できます。■#20505Aは青緑寄りの濃色で、アジュールから色相（赤・青・緑など色みの違い）を少しずらしながら明度（色の明るさ）も下げているため、「デバイス設定を開く」などの補助操作を主要な参加操作と分けやすくなります。

参加前確認画面では、ビビッド・アジュールを参加ボタンと選択中の設定に使う

実装では、ページ全体や設定カードの背景を■#F7FBFFにし、会議名、参加者名、マイク・カメラの説明文を■#102A43にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.08:1です。

主要な「会議に参加」ボタンや選択中のデバイス表示へ■#1FABFFを使い、その上の文字と枠線を■#102A43にすると、文字との比率は約5.81:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#1FABFFと■#F7FBFFの差は約2.43:1なので、明るい背景上ではアジュールの塗りだけをボタンや選択状態の境界にせず、■#102A43の枠線やアイコンを併用します。この枠線と■#F7FBFFの背景は約14.08:1です。

「デバイス設定を開く」などの補助ボタンは■#20505Aを背景にし、その上の文字を■#FFFFFFにすると約8.91:1です。ディープティールとページ背景の差も約8.57:1あり、■#1FABFFとの比率は約3.53:1です。

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

開放感を保つなら、白文字や色だけの接続状態に頼らない

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

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