ストロング・インディゴに合う色は？濃い青紫を力強くまとめる配色【#250BDA】

ストロング・インディゴ（■#250BDA）は、青を軸に紫みを含んだ鮮やかな濃い青紫です。Webサイトでは、企業向けSaaS（Software as a Service、ブラウザーなどから利用するクラウド型ソフトウェア）の料金比較ページで、選択中のプラン名、主要な料金、主要な「無料で試す」ボタンなどに使うと、深い青紫の力強さを出しながら情報の優先順位を整理しやすくなります。ただし、料金表の複数プランをすべて濃色で塗ると、価格や機能差より色の存在感が強くなりやすいため、明るい背景を広く残し、インディゴを選択中のプランや主要操作へ絞るのが扱いやすい方法です。ここでは、クールグレー、インクネイビー、ミントグリーンを合わせます。

クールグレーを土台にし、ミントでインディゴの強さに軽さを加える

■#250BDAには、背景用のクールグレー■#F7F8FC、本文や補助文字用のインクネイビー■#22263B、補助ラベル用のミントグリーン■#A8E1D5を合わせる例が考えられます。

■#F7F8FCは青みをわずかに含む明色で、インディゴとの明度差を大きくしながら料金表のカードや余白を軽く見せられます。■#22263Bは青紫を少し含む低彩度の濃色なので、機能名、注釈、契約条件など長く読む情報を落ち着いて整理できます。■#A8E1D5は明るい青緑で、インディゴから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、濃いインディゴの面へ軽い変化を加える補助色として使えます。

料金比較ページでは、ストロング・インディゴを選択中のプランと主要CTAに集める

実装では、料金表全体の背景や未選択プランのカードを■#F7F8FCにし、選択中のプラン名、主要な料金表示の一部、主要なCTA（Call to Action、無料トライアルや申込みなど次の行動を促す操作）の背景へ■#250BDAを使います。その上の文字を■#FFFFFFにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約9.82:1です。通常サイズの文字に必要な4.5:1以上を満たします。また、■#250BDAと■#F7F8FCは約9.25:1なので、主要ボタンや選択中カードの面も明るい背景から明確に区別できます。

機能一覧、契約条件、補足説明は■#22263Bにします。「おすすめ」「年払いがお得」のような補助ラベルをインディゴのプランカード上へ置く場合は、■#A8E1D5をラベル背景にし、その文字を■#22263Bにします。ミントとインディゴは約6.73:1、ミントとネイビーは約10.22:1なので、インディゴ面に置くラベルの境界と、その中の文字をどちらも見分けやすくできます。

■#22263Bと■#F7F8FCは約14.05:1、■#250BDAと■#F7F8FCは約9.25:1、■#A8E1D5と■#22263Bは約10.22:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンなどの画面部品）や状態を色の境界で識別させる場合は隣接色との3:1以上が基準になります。

力強さを保つなら、ミントを明るい背景上の境界色として単独で使わない

■#A8E1D5と■#F7F8FCのコントラスト比は約1.37:1です。そのため、明るい背景上でミントの面だけを使ってボタンや選択欄の存在を示すのは避け、■#22263Bの枠線や文字を組み合わせます。インディゴの面上で使う場合は、■#250BDAとの約6.73:1の差を活かせます。

また、「選択中」「おすすめ」「契約中」などの状態は、インディゴとミントの色分けだけに頼らず、状態名の文字、チェックマーク、太めの枠線なども併用します。複数プランを比較するページでは、主役色をすべてのカードへ広げるより、選択中のプランと主要CTAだけへ■#250BDAを集めた方が、価格や機能差を追いやすくなります。HueRollでは■#250BDAをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。