ブリリアント・ブルーに合う色は？明るい青を鮮明に際立たせる組み合わせ【#6489F7】

ブリリアント・ブルー（■#6489F7）は、紫や緑への寄りを抑えた、明るく鮮やかな青です。ドメインのDNS（Domain Name System、ドメイン名に関連する接続先などの情報を管理する仕組み）レコード編集画面では、選択中のレコード、主要な「レコードを追加」ボタン、現在編集中のレコード種別などに絞って使うと、明るい青を鮮明に際立たせながらホスト名や値、TTLなどの設定項目を整理しやすくなります。ここでは、アイスブルーホワイト、インクブラック、ディープアンバーを組み合わせます。

アイスブルーホワイトを土台にし、黒に近い文字色とアンバーで青を整える

■#6489F7には、レコード一覧や編集パネルの背景用のアイスブルーホワイト■#F5F8FF、ホスト名・値・TTL・主要ボタン文字用のインクブラック■#0A1324、変更履歴やネームサーバー確認などの補助操作用のディープアンバー■#5C452Dを合わせる例が考えられます。

■#F5F8FFは青みをわずかに含む明色で、レコード一覧や編集欄の広い面を軽く保てます。■#0A1324はほぼ黒に近い低彩度の濃色なので、ホスト名、レコード値、TTL（Time to Live、DNS情報をキャッシュしてよい時間の目安）、説明文などを主役の青より落ち着いて整理できます。■#5C452Dは黄赤寄りの暗い低彩度色で、青から色相（赤・青・緑など色みの違い）を離しているため、「変更履歴を見る」「ネームサーバーを確認」などの補助操作を主要な追加操作と分けやすくなります。

DNSレコード編集では、ブリリアント・ブルーを選択行と主要操作に使う

実装では、レコード一覧と未選択の編集パネル背景を■#F5F8FFにし、ホスト名、レコード値、TTL、補足説明を■#0A1324にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約17.46:1です。

選択中のレコード行、主要な「レコードを追加」ボタン背景、現在編集中のレコード種別タブへ■#6489F7を使い、その上の文字とアイコンを■#0A1324にすると約5.71:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、■#6489F7と■#F5F8FFの差は約3.06:1なので、選択行や主要ボタンの色面も明るい背景から3:1以上の差を確保できます。

「変更履歴を見る」「ネームサーバーを確認」などの補助ボタンは■#5C452Dを背景にし、その上の文字を■#FFFFFFにすると約8.96:1です。ディープアンバーとページ背景の差も約8.43:1あります。

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

鮮明に見せるなら、白文字やDNSの状態を色だけで伝えない

■#6489F7と■#FFFFFFのコントラスト比は約3.25:1なので、ブルー背景へ通常サイズの白文字を置く使い方は避けます。この例では主要ボタンの文字を■#0A1324にします。

また、■#6489F7と■#5C452Dの差は約2.76:1です。「未保存」「保存済み」「反映待ち」「エラー」などをこの2色だけで分けず、状態名の文字、チェックマーク、警告アイコン、更新時刻なども併用します。HueRollでは■#6489F7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。