ブリリアント・インディゴに合う色は？鮮やかな青紫を印象的にまとめる配色【#7664F7】

ブリリアント・インディゴ（■#7664F7）は、青を軸に紫みを含む明るく鮮やかな青紫です。電子署名サービスの署名依頼画面では、選択中の契約書、主要な「署名依頼を送る」ボタン、現在設定している署名者のアクセントなどに絞って使うと、鮮やかな青紫を印象的にまとめながら書類名や受取人、期限を整理しやすくなります。ここでは、アイスグレー、インクブラック、ディープアンバーを組み合わせます。

アイスグレーを土台にし、黒に近い文字色とアンバーで青紫を整える

■#7664F7には、書類一覧や署名者カードの背景用のアイスグレー■#F7F8FC、書類名・受取人・期限・主要ボタン文字用のインクブラック■#080B12、監査履歴やテンプレート確認などの補助操作用のディープアンバー■#5A4632を合わせる例が考えられます。

■#F7F8FCは青みをわずかに含む明色で、書類一覧や署名者設定の広い面を軽く保てます。■#080B12はほぼ黒に近い低彩度の濃色なので、書類名、署名者名、期限、説明文などをインディゴより落ち着いて整理できます。■#5A4632は黄赤寄りの暗い低彩度色で、青紫から色相（赤・青・緑など色みの違い）を離しているため、「監査履歴を見る」「テンプレートを確認」などの補助操作を主要な送信操作と分けやすくなります。

署名依頼画面では、ブリリアント・インディゴを選択書類と送信操作に使う

実装では、書類一覧と未選択の署名者カード背景を■#F7F8FCにし、書類名、受取人、期限、補足説明を■#080B12にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約18.55:1です。

選択中の契約書カード、主要な「署名依頼を送る」ボタン背景、現在設定中の署名者の短いアクセントへ■#7664F7を使い、その上の文字とアイコンを■#080B12にすると約4.63:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、■#7664F7と■#F7F8FCの差は約4.01:1なので、選択書類や主要ボタンの色面も明るい背景から3:1以上の差を確保できます。

「監査履歴を見る」「テンプレートを確認」などの補助ボタンは■#5A4632を背景にし、その上の文字を■#FFFFFFにすると約8.91:1です。ディープアンバーとページ背景の差も約8.40:1あります。

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

印象的にまとめるなら、白文字や署名状態の色分けだけに頼らない

■#7664F7と■#FFFFFFのコントラスト比は約4.25:1なので、インディゴ背景へ通常サイズの白文字を置く使い方は避けます。この例では主要ボタンの文字を■#080B12にします。なお、■#7664F7と■#080B12は約4.63:1で基準への余裕が大きくないため、ホバー時に青紫を明るくする場合は文字との比率を再計算します。

また、■#7664F7と■#5A4632の差は約2.09:1です。「送信前」「送信済み」「閲覧済み」「署名済み」「辞退」などをこの2色だけで分けず、状態名の文字、署名者名、チェックマーク、期限表示なども併用します。HueRollでは■#7664F7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。