WEBページの価格表示は何色がいい？数字を読みやすく目立たせる方法
WEBページの価格を目立たせたいとき、赤やオレンジにすればよいのでしょうか。強い色を使わなくても、金額の大きさ、太さ、周囲の余白を整えると数字を探しやすくできます。一方、金額だけを大きくして「税込」や料金の単位を薄くすると、内容を読み間違えるおそれがあります。ここでは架空の週末パン作り教室を例に、価格を読みやすく示す文字色と背景色を考えます。
価格は金額・円・税込表示・料金単位をひとまとまりにする
例えば架空の教室に「基礎クラス：3,200円（税込）／1名」と「親子クラス：4,800円（税込）／大人1名＋子ども1名」という2つの料金があるとします。これらは配色を考えるための仮の金額であり、実在する教室の料金ではありません。まずプラン名と金額を対応させ、税込かどうか、何人分の料金かを近くに示します。
金額の数字を30～32px程度の太字、円の文字を少し小さく、税込表示や人数を15～16px程度にする案があります。px（ピクセル）はWEBで文字や余白の大きさを指定する単位です。これは固定の正解ではなく、実際の文字の形や画面幅に応じて調整します。「3,200」と「円」を離しすぎず、「税込」「1名」の文字も読める濃さを保つことが重要です。
色を選ぶときは、まず価格を載せる背景を決めます。白いページなら本文と同じ濃い色でも十分に目立たせられます。料金カードを独立させたいなら、金額だけを落ち着いた深緑にする方法もあります。ただし、金額がリンクや購入ボタンでない場合、下線やボタンの形を付けて押せるものと誤解させないようにします。
白背景と淡い料金カードで比較する配色例
ここではHEX（「#」の後ろに0～9とA～Fの6桁を並べた色コード）で色を示します。コントラスト比は、文字と背景などの相対的な明るさの差を表す数値です。以下はいずれも不透明な単色同士で計算した値です。
案A：白背景では文字の大きさと太さで価格を示す
- ページの背景を白#FFFFFF、本文とプラン名を濃い青灰色#263746にします。文字と背景のコントラスト比は約12.23:1です。
- 「3,200円」「4,800円」の数字と円も濃い青灰色#263746にそろえ、白#FFFFFFとの比を約12.23:1に保ちます。金額を本文より大きく、太くして優先順位を付けます。
- 「税込」「1名」「大人1名＋子ども1名」には少し柔らかな灰青色#56646Bを使います。白#FFFFFFとの比は約6.12:1です。小さな条件の文字も読めるようにします。
この案では、価格だけに新しい色を追加しません。数字の大きさと金額の前後の余白で違いを付けるため、文章が多い案内ページでも色の役割を増やさずに済みます。金額とプラン名が対応しているかを先に確認しましょう。
案B：淡い料金カードで数字だけ深緑にする
料金を比較しやすくするために、プランごとに淡い青緑#EDF5F1のカードを用意する案もあります。プラン名は濃い青灰色#263746で、カード背景との比は約11.02:1です。金額と「円」には深緑#175C53を使うと、淡い青緑#EDF5F1との比は約7.03:1です。「税込」と人数の説明は灰青色#56646Bにし、同じ背景#EDF5F1に対して約5.52:1を確保します。
白#FFFFFFのページと淡い青緑#EDF5F1のカードの背景差は約1.11:1と小さめです。カードの境界が必要なら、落ち着いた青緑灰色#56786Eの線を添えると、カード背景#EDF5F1との比は約4.40:1、外側の白#FFFFFFとは約4.88:1です。線だけに頼らずプラン名や余白でも区切ります。
一方、条件を薄い灰緑#ABB9B2にすると、淡い青緑#EDF5F1の上では約1.84:1しかありません。この色は通常サイズの説明に必要な4.5:1を下回るため、「税込」や人数の表示には使いません。
スマートフォンと料金条件の見え方まで確認する
スマートフォンで2つのプランを縦に並べる場合、金額が目立っても「1名」と「大人1名＋子ども1名」を別の行の遠い場所へ動かさないようにします。金額・通貨・税の表示・対象人数が同じ料金の情報だと分かる配置にし、文字を拡大しても重ならないか確認しましょう。
追加料金や料金に含まれない項目がある場合は、事実を確かめて金額の近くに明記します。値引きがあるときも、赤い数字だけで「割引」を表したつもりにならず、割引の条件を文章で伝えます。実際の価格や期間を確認せずに、架空の通常価格・割引率を付け足してはいけません。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。ここでは金額にも通常文字の4.5:1を超える色を選び、円や税込表示など小さくなりやすい文字も個別に確認しました。写真の上に価格を重ねる場合や透明度を使う場合は、実際の背景で再確認してください。価格表示の目立ちやすさは、鮮やかさだけでなく、数字と条件を正しく一緒に読めることから考えます。