リッチ・インディゴに合う色は？濃い青紫を重厚にまとめる配色【#2914B8】

リッチ・インディゴ（■#2914B8）は、青を軸に紫みを含んだ濃い青紫です。Webサイトでは、資格講座や会員向け学習ポータルで、講座名、現在のレッスン、主要な「学習を続ける」ボタンなどに使うと、鮮やかさを残しながら画面を重厚にまとめやすくなります。ただし、インディゴを広い背景や複数の操作へ同時に使うと、教材本文や進捗情報より色の存在感が強くなりやすいため、明るい面と落ち着いた補助色を組み合わせて役割を分けることが大切です。ここでは、ペールラベンダーグレー、チャコールインディゴ、サンドゴールドを合わせ、濃い青紫を落ち着いて見せる配色を考えます。

ペールラベンダーグレーを土台にし、サンドゴールドで青紫に温かい差を加える

■#2914B8には、背景用のペールラベンダーグレー■#F8F6FA、本文や補助文字用のチャコールインディゴ■#292736、補助操作用のサンドゴールド■#C9B98Cを合わせる例が考えられます。

■#F8F6FAはごく淡い紫みを含む明色で、リッチ・インディゴとの色相のつながりを残しながら大きな明度差を作れます。■#292736は青紫をわずかに含む低彩度の濃色なので、教材本文、受講期限、進捗率、注意事項などを落ち着いて整理できます。■#C9B98Cは黄みを含む低彩度色で、青紫から色相を離しつつ鮮やかさを抑えているため、深いインディゴを主役にした画面へ穏やかな温度差を加えられます。

学習ポータルでは、リッチ・インディゴを現在位置と主要操作に集める

実装では、講座一覧やレッスン本文の広い背景を■#F8F6FAにし、講座名、現在のレッスン、主要な「学習を続ける」ボタン背景などへ■#2914B8を使います。その上の文字は■#F8F6FAにすると、通常サイズの文字に必要なコントラストを確保できます。教材本文、受講期限、進捗率、補足説明は■#292736へ分けると、インディゴを現在位置と主要操作へ限定できます。

UI（ユーザーが操作するボタンや進捗表示などの画面部品）の補助操作には、濃い■#2914B8の帯やパネル上に、■#C9B98Cの「修了条件を見る」ボタンやラベルを置き、その文字を■#292736にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2914B8と■#F8F6FAは約10.37:1、■#292736と■#F8F6FAは約13.60:1、■#292736と■#C9B98Cは約7.51:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#2914B8と■#C9B98Cは約5.73:1なので、濃い青紫の面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

重厚に見せるなら、進捗や修了状態をインディゴとゴールドだけで伝えない

■#C9B98Cと■#F8F6FAのコントラスト比は約1.81:1です。そのため、明るい背景上でサンドゴールドの面だけを使ってボタンや進捗表示の境界を示すのは避け、■#292736の枠線や文字を組み合わせます。

また、「学習中」「修了」「期限切れ」などの状態は、インディゴとゴールドの色分けだけに頼らず、状態名の文字、チェックマーク、進捗数値、太めの枠線なども併用します。教材の表紙や講義サムネイルに青紫が多い場合は、ページ全体へさらに■#2914B8を広げるより、■#F8F6FAの余白を十分に残す方が、教材と操作を分けやすくなります。HueRollでは■#2914B8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。