料金表の配色はどう決める？おすすめプランを自然に目立たせる方法

料金表では、すべてのプランを読める状態にしたうえで、「おすすめプラン」がどれかを自然に見つけられることが大切です。おすすめ列だけを強い色で塗ると目立ちすぎることがあるため、基本は通常プランをニュートラルにそろえ、背景・ラベル・ボタンの3か所で少しずつ差を付けます。ここでは、白を基調にした料金表へ淡いブルーを加える例で考えます。

通常プランをそろえ、おすすめだけに小さな差を付ける

通常プランのセルは白 ■#FFFFFF、文字はダークブルーグレー ■#334155 を基本にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。列見出しをライトブルーグレー ■#F1F5F9 にすると、同じ文字色 ■#334155 との比は約9.45:1です。

おすすめプランは、列全体を鮮やかな色にするのではなく、背景をペールブルー ■#EFF6FF に変え、見出しや価格をダークブルー ■#1E3A8A にする方法があります。この組み合わせは約9.52:1です。さらに「おすすめ」という文字ラベルを付ければ、色だけに頼らず意味を伝えられます。

価格・おすすめラベル・ボタンの役割を分ける

おすすめラベルをロイヤルブルー ■#1D4ED8 の背景にし、文字を白 ■#FFFFFF にすると約6.70:1です。おすすめ列の背景 ■#EFF6FF とロイヤルブルー ■#1D4ED8 の比も約6.16:1あり、ラベルや主要ボタンを識別しやすくできます。

一方、通常プランのボタンまで同じ強い青にすると、おすすめプランとの差が小さくなります。通常プランは白 ■#FFFFFF の背景にスレートグレー ■#64748B の枠線を使う例なら、両者の比は約4.76:1です。ボタン文字をブルーグレー ■#475569 にすると白 ■#FFFFFF に対して約7.58:1です。おすすめだけ塗りつぶしボタン、通常プランはアウトラインというように、色だけでなく形でも優先度を分けられます。

「おすすめ」の根拠を色に背負わせず、文字と操作状態を確認する

おすすめプランは、青い列だから優れているという意味ではありません。価格、容量、機能などの比較内容を文字で示し、そのうえでサイト側が推したいプランに「おすすめ」と明記します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2でも、色を情報伝達の唯一の手段にしないことが求められます。

また、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。料金表内のボタンや選択状態など、操作部品を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。見出し・価格・注釈・ボタンは、それぞれ実際に載る背景色との組み合わせで確認します。

HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、料金表の背景・文字・ボタンなど、実際に隣接する組み合わせは別途確認します。