ペール・インディゴに合う色は？やさしい青紫を落ち着いて見せる配色【#CEC9ED】

ペール・インディゴ（■#CEC9ED）は、青みを含む紫を淡くやわらげた色です。デジタルノートのワークスペースでは、選択中のノートや主要な「新しいノートを作る」ボタンなどに範囲を絞って使うと、やさしい青紫を主役にしながら落ち着いて整理しやすくなります。ここでは、ディープスレートインディゴ、ラベンダーホワイト、ミューテッドセージグレーを組み合わせます。

濃いインディゴで文字を締め、淡い背景とセージグレーで静かにまとめる

■#CEC9EDには、見出しや本文用のディープスレートインディゴ■#3D4058、ノート本文や一覧カードの背景用のラベンダーホワイト■#FAF9FC、アーカイブや表示切替などの補助操作用のミューテッドセージグレー■#586B65を合わせる例が考えられます。

■#3D4058は青紫を含む暗い色で、ペール・インディゴと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FAF9FCはごく淡い紫みを含む白に近い色なので、長い本文やメモ一覧を載せる広い面を軽く保てます。■#586B65は落ち着いた緑みのグレーで、青紫から色相を離し、「アーカイブを見る」「表示を切り替える」などの補助操作を主要な作成操作と分ける候補になります。

ノート画面では、選択中の項目と新規作成ボタンにペール・インディゴを使う

ページと通常のノートカードを■#FAF9FCにし、ノート名、更新日時、本文、ラベルを■#3D4058で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.66:1です。

選択中のノートや主要な「新しいノートを作る」ボタンの背景に■#CEC9EDを使い、その上の文字とアイコンを■#3D4058にすると、コントラスト比は約6.37:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#CEC9EDと■#FAF9FCの差は約1.52:1です。淡い色面だけでは選択中のノートや主要ボタンの境界を見分けにくいため、■#3D4058の枠線、チェックアイコン、「選択中」の文字を併用します。この枠線とページ背景のコントラスト比は約9.66:1です。

「アーカイブを見る」などの補助ボタンは■#586B65を背景にし、その上を■#FFFFFFの文字にすると約5.67:1です。ミューテッドセージグレーとラベンダーホワイトの差も約5.40:1あります。

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

落ち着いて見せるなら、白文字や淡い青紫だけで選択状態を伝えない

■#CEC9EDと■#FFFFFFのコントラスト比は約1.59:1です。そのため、ペール・インディゴ背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#3D4058にします。

また、「選択中」「未保存」「アーカイブ済み」などの状態を色だけで伝えず、状態名の文字、チェックアイコン、更新日時なども併用します。ペール・インディゴをページ全体へ広げるより、選択中のノートや主要な作成操作など用途を絞って使い、■#FAF9FCの余白を広く取ると、やさしい青紫を主役にしながら落ち着いて整理しやすくなります。HueRollでは■#CEC9EDをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。