WEBサイトのホバー色はどう選ぶ？自然な変化を作る配色方法
WEBサイトでボタンやリンクにマウスを重ねたとき、どのくらい色を変えると自然に見えるのでしょうか。変化が小さすぎると反応が伝わりにくく、反対に別の鮮やかな色へ大きく切り替えると、同じ部品に見えなくなる場合があります。ホバーとは、マウスポインターを操作できる要素に重ねている間の状態です。ここでは古書店のオンライン在庫一覧を例に、通常時とホバー時の色を一組として決める方法を紹介します。
元の色を基準に、文字の読みやすさを保って変化を付ける
ホバー色は、通常時の色と無関係に選ぶのではなく、同じ色みを少し濃くするなど、役割がつながる組み合わせにすると整理しやすくなります。まず通常時だけでも文字やリンクが分かるようにし、そのうえでホバー時に背景・下線・枠線のどこを変えるか決めます。コントラスト比は、文字と背景など隣り合う色の相対的な明るさの差です。
例えば通常の予約ボタンを青緑#20667A、ホバー時を深い青緑#174957にすると、2つのボタン色同士の比率は約1.52:1です。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）は、通常色とホバー色そのものに一律3:1の差を求めているわけではありません。ただし、ホバー中も文字や操作に必要な表示が周囲から見分けられることは重要です。
ホバーは現在表示中のページを示す選択状態とも、キーボードで操作対象になっているフォーカス状態とも異なります。常に見せたい情報を、マウスを重ねたときだけ表示する設計にしないことも基本です。
古書店の在庫一覧でボタン・リンク・カードを調整する配色例
本の表紙、在庫状況、価格、商品詳細へのリンク、取り置き相談のボタンを使うWEBページを想定します。HEXはWEBで色を指定する16進数のコードです。通常時とホバー時の両方について、文字と背景のコントラストを確認します。
- ページ背景と本文：温かみのあるオフホワイト#F8F7F2に濃いチャコール#29363Cで説明や価格を載せると、文字と背景は約11.60:1です。見出しの深い青緑#255762は同じ背景に約7.48:1です。
- 通常の商品カード：白#FFFFFFにチャコール#29363Cで書名を表示すると約12.45:1です。白#FFFFFFとページ背景#F8F7F2の差は約1.07:1と小さいため、青灰#74838Aの枠線を使います。枠線と白の差は約3.92:1です。
- 商品カードのホバー：カード全体がリンクである場合は、背景を淡い青緑#EAF2EFへ変え、枠線を深い青緑#285F65にします。文字#29363Cとホバー背景#EAF2EFは約10.93:1、枠線#285F65と背景#EAF2EFは約6.33:1です。カード内に別のボタンを重ねる構造は避けます。
- 通常の「取り置きを相談する」ボタン：商品の詳細ページでは青緑#20667Aを背景に白#FFFFFFで文字を表示します。文字とボタンは約6.48:1、ボタンと周囲のオフホワイト#F8F7F2は約6.04:1です。
- ボタンのホバー：背景だけを深い青緑#174957に変更し、白#FFFFFFの文字は保ちます。文字とボタンは約9.87:1、ボタンとオフホワイト#F8F7F2は約9.20:1です。押せる状態を変えず、重ねたときの短い反応として使います。
- 商品詳細のテキストリンク：通常は青#265A70をオフホワイト#F8F7F2に載せて約7.05:1、ホバー中は濃い青#164154に変えて約10.21:1です。下線は通常時から表示し、ホバー中だけ少し太くするなど、色以外の手がかりも付けます。
- キーボード操作時のフォーカス：Tabキーで移動したときは、ホバーとは別に濃い青#234C60の輪郭線を表示します。輪郭とオフホワイト#F8F7F2は約8.61:1、白#FFFFFFのカードとも約9.23:1です。CSS（WEBの見た目を指定する仕組み）の
:focus-visibleを使い、フォーカスが分かる表示を残します。 - 在庫・発送の補足：補足文字は青灰#52656Cをオフホワイト#F8F7F2に使うと約5.70:1です。別の注意欄には淡いグレー緑#EEF3F0とチャコール#29363Cを使えば約11.09:1です。「在庫あり」「売り切れ」などはホバーせずに読める文字として示します。
通常時に操作できることが分かり、マウスを重ねたら背景の濃さや枠線が少し変わる構成です。リンク・カード・ボタンで変化の方法をそろえすぎず、各部品の役割に合う反応を選びます。
スマートフォンとキーボードでも使える状態にする
CSSの :hover はマウスなどのポインターで要素を指した状態に適用されますが、スマートフォンなどのタッチ操作では、ホバーが起きない、短時間だけ起きる、残り続けるなど動作が異なります。@media (hover: hover) でホバー可能な入力機器向けに効果を分ける方法もあります。ボタン名・価格・在庫情報をホバー時だけ表示しないでください。
色の切り替えを滑らかにする場合も、動きが大きすぎて目が疲れるような演出は避け、短い変化にとどめます。フォーカスの輪郭を消してホバー色で代用せず、タップ・キーボードの操作も試します。
WCAG 2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上の比率が原則必要です。操作や状態を識別するために不可欠な非テキスト表示は隣接色と3:1以上が基準ですが、ホバー色と通常色の差自体に3:1が一律に必要という意味ではありません。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。この記事の色同士の比率は別途計算しています。