お気に入りボタンの色はどう決める？選択前後が分かるWEB UI
ECサイトの商品一覧にあるハート形のお気に入りボタンは、色を変えるだけで登録状態を伝えようとすると、押せる場所なのか、すでに登録した商品なのかが分かりにくくなることがあります。未選択と選択済みでは、色に加えてハートの形や文字も変え、今の状態を確認できるようにしましょう。
未選択は輪郭、選択済みは塗りと文字で区別する
WEB UI（利用者がWEBサイト上で操作する画面の部品）では、お気に入りのハートを未選択時は輪郭だけ、選択後は塗りつぶしにすると、赤やピンクを見分けにくい場合にも形の違いが残ります。登録済みなら「保存済み」などの言葉を添え、同じ操作をもう一度行うと登録を解除できるのかも分かるようにします。
ハートを薄いグレーにしすぎると、未選択ではなく押せないボタンに見える場合があります。重要なのは、未選択でも操作できることが分かる濃さを確保することです。文字ラベルとアイコンは別の基準で確認し、見た目の強調は購入ボタンより控えめにします。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、ボタンの識別や選択状態に必要な図形は隣接色と原則3:1以上のコントラスト比が求められます。コントラスト比とは2色の相対的な明るさの差です。色だけを状態の唯一の手がかりにしないことも重要です。
手作り食器の一覧で使うお気に入りボタンの配色例
白い器や色付きの皿を並べた商品一覧を考えます。HEX（16進数でWEBの色を指定するカラーコード）で、未選択・選択済み・購入操作の役割を分けます。以下の比率は、実際に接する色を組み合わせて計算した数値です。
- 商品カードと写真：ページ背景をごく淡いグレー#F7F9FA、商品カードを白#FFFFFF、写真領域を薄い青灰#EEF2F5にします。写真領域と白の差は約1.13:1しかないため、必要なら余白や枠線で写真と情報欄を分けます。商品名は濃い青灰#293B4Bを白#FFFFFFに置き、比は約11.53:1です。
- 未選択のハート：写真の上に不透明な白#FFFFFFの丸いボタン面を置き、青灰#5D6F80の枠を付けます。枠と外側の写真背景#EEF2F5は約4.61:1、枠と内側の白は約5.18:1です。輪郭のハートには濃い青灰#566679を使い、白との比を約5.88:1にします。「お気に入り」の説明を近くに添えます。
- 選択済みのハート：ボタン面を淡いローズ#FBECEEにし、濃いローズ#92334Fで囲みます。枠と内側の面は約6.53:1、写真背景#EEF2F5に対しては約6.64:1です。塗りつぶしたハートを深い赤紫#A12247にすれば、淡いローズとの比は約6.47:1。近くに「保存済み」を明記し、色と形と文字の3つで状態を示します。
- 購入操作との区別：白#FFFFFFの商品情報欄に「カートに入れる」を置く場合、購入ボタンは濃い青緑#1E5366、文字は白#FFFFFFにします。文字とボタンの比は約8.45:1です。お気に入りボタンだけを強い塗り面にせず、購入操作との優先順位を保ちます。
- フォーカス表示：キーボードでボタンに移動したときは、濃い青#1D5B91の輪郭を外側に表示する方法があります。写真背景#EEF2F5との比は約6.31:1、白#FFFFFFとの比は約7.10:1です。選択色と別に、操作中の場所が分かるようにします。
保存処理・スマホ操作・読み上げで状態を確認する
保存前に塗りつぶしへ切り替えると、通信に失敗したときに「登録済み」と誤解されるおそれがあります。処理中の表示と、登録に成功した後の表示を分け、失敗した場合は元の状態に戻すかエラーを知らせます。再度タップして解除したときも、輪郭ハートに戻して「保存済み」の案内を更新しましょう。
ボタンの実装では、見た目だけでなく支援技術へ状態を伝えます。例えばアクセス可能なボタン名を「お気に入り」に固定して、押されていない状態と押された状態をaria-pressedのfalse・trueで切り替える方法があります。ボタンの名前を「追加」「解除」のように切り替える設計では、同じ設定を機械的に重ねず、操作の意味に合う形を選びます。スマホではハートの絵柄より十分に広いタップ領域も確保します。
写真によって背景色が変わる場合、半透明のボタンでは隣接色も変わります。まず不透明な面でコントラストを確認し、商品写真の明暗が違っても使えるかを実際の画面幅で点検します。HueRollではHEXで候補色を調整し、選択した色と白・黒とのコントラストを確認できますが、任意の2色同士の比較やWCAGのAA・AAA自動判定はできません。今回のようなハートとボタン面の組み合わせは別途計算してください。