ブリリアント・バイオレットに合う色は？輝きのある紫を華麗に見せる色合わせ【#AD64F7】

ブリリアント・バイオレット（■#AD64F7）は、青みを感じる明るく鮮やかな紫です。ノーコードのワークフロー自動化画面（処理の流れをカードで組み立てる編集画面）では、選択中のノード（処理の1ステップを表すカード）、主要な「ワークフローを有効化」ボタン、現在設定中のトリガー（自動処理を始める条件）などに絞って使うと、輝きのある紫を華麗に見せながら処理順や設定内容を整理しやすくなります。ここでは、クールホワイト、ナイトネイビー、ディープオリーブを組み合わせます。

クールホワイトを土台にし、ネイビーとオリーブで紫の明るさを整える

■#AD64F7には、編集キャンバスや未選択ノードの背景用のクールホワイト■#F6F7FB、ノード名・条件・説明・主要ボタン文字用のナイトネイビー■#182033、実行履歴や詳細ログなどの補助操作用のディープオリーブ■#5B5F35を合わせる例が考えられます。

■#F6F7FBは青みをわずかに含む明色で、複数のノードや設定パネルを軽く保てます。■#182033は青みを含む低彩度の濃色なので、トリガー名、実行条件、接続先、説明文などをバイオレットより落ち着いて整理できます。■#5B5F35は黄緑寄りの暗い低彩度色で、紫から色相（赤・青・緑など色みの違い）を離しているため、「実行履歴を見る」「詳細ログを開く」などの補助操作を主要な有効化操作と分けやすくなります。

自動化フローでは、ブリリアント・バイオレットを選択ノードと主要操作に使う

実装では、編集キャンバスと未選択ノードの背景を■#F6F7FBにし、ノード名、条件、接続先、補足説明を■#182033にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.17:1です。

選択中のノード、主要な「ワークフローを有効化」ボタン背景、現在設定中のトリガーの短いアクセントへ■#AD64F7を使い、その上の文字とアイコンを■#182033にすると約4.60:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、■#AD64F7と■#F6F7FBの差は約3.30:1なので、選択ノードや主要ボタンの色面も明るい背景から3:1以上の差を確保できます。

「実行履歴を見る」「詳細ログを開く」などの補助ボタンは■#5B5F35を背景にし、その上の文字を■#FFFFFFにすると約6.70:1です。ディープオリーブとページ背景の差も約6.26:1あります。

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

華麗に見せるなら、白文字や紫とオリーブだけの状態表示に頼らない

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

また、■#AD64F7と■#5B5F35の差は約1.90:1です。「未設定」「有効」「停止中」「エラー」などをこの2色だけで分けず、状態名の文字、再生・停止アイコン、エラー記号、実行時刻なども併用します。HueRollでは■#AD64F7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。