ビビッド・シアンに合う色は？鮮烈なシアンをクリアに引き立てる色合わせ【#1FFFFF】

ビビッド・シアン（■#1FFFFF）は、青と緑の中間にある非常に明るく鮮やかなシアンです。カスタマーサポートのライブチャット画面では、選択中の会話、未読メッセージのアクセント、主要な「返信を送信」ボタンなどに絞って使うと、鮮烈なシアンをクリアに見せながら会話本文と操作を整理しやすくなります。明るい色なので、白い画面ではシアンの塗りだけに境界を任せないことが重要です。ここでは、アイスホワイト、ディープティールネイビー、ダスティプラムを組み合わせます。

アイスホワイトを土台にし、濃いネイビーとプラムでシアンの輪郭を作る

■#1FFFFFには、チャット画面やメッセージ領域の背景用のアイスホワイト■#F5FBFC、本文・相手名・時刻・枠線用のディープティールネイビー■#102A33、履歴確認などの補助操作用のダスティプラム■#5B365Fを合わせる例が考えられます。

■#F5FBFCはごく淡い青緑を含む明色で、会話本文の広い面を軽く保てます。■#102A33は青緑をわずかに含む低彩度の濃色なので、メッセージ本文、相手名、送信時刻などをシアンより落ち着いて整理できます。■#5B365Fは紫寄りの低彩度色で、シアンから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「過去の対応履歴を見る」などの補助操作を主要な返信操作と分けやすくなります。

ライブチャットでは、ビビッド・シアンを選択中の会話と送信操作に使う

実装では、会話一覧とメッセージ本文の背景を■#F5FBFCにし、本文、相手名、時刻、入力欄のラベルを■#102A33にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.34:1です。

選択中の会話、未読件数のラベル、主要な「返信を送信」ボタン背景へ■#1FFFFFを使い、その上の文字と枠線を■#102A33にすると、文字との比率は約12.00:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#1FFFFFと■#F5FBFCの差は約1.20:1しかないため、明るい背景上ではシアンの塗りだけで選択状態やボタンの境界を示さず、■#102A33の枠線やアイコンを併用します。この枠線と■#F5FBFCの背景は約14.34:1です。

「過去の対応履歴を見る」などの補助ボタンは■#5B365Fを背景にし、その上の文字を■#FFFFFFにすると約9.82:1です。ダスティプラムとページ背景の差も約9.40:1あり、■#1FFFFFとの比率は約7.86:1です。

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

クリアに見せるなら、白文字や色だけの未読・対応状態に頼らない

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

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