ページネーションの色はどう選ぶ？現在ページを分かりやすくする方法

ページネーションは、記事一覧や検索結果などを複数ページに分けたときに、現在位置と移動先を示すナビゲーションです。色を付けるなら、通常のページ番号は落ち着かせ、現在ページだけを強調すると整理しやすくなります。ただし、色だけで現在位置を伝えるのではなく、太い枠線や太字、プログラム上の現在位置情報も組み合わせることが大切です。

通常ページはニュートラルにし、現在ページだけを強調する

以下のHEX（Webで色を表す16進数コード）例では、ページネーションの背景を白 ■#FFFFFF にします。通常のページ番号の文字をダークブルーグレー ■#334155 にすると、白に対するコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。必要な枠線をスレートグレー ■#64748B にすると、白に対して約4.76:1です。

現在ページはロイヤルブルー ■#1D4ED8 で塗り、文字を白 ■#FFFFFF にすると約6.70:1です。通常ページを白地の細い枠、現在ページを塗りつぶし＋太い枠＋太字にすれば、色だけではなく形や太さの違いでも現在位置を確認できます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。またNon-text Contrastでは、操作部品や状態を識別するために必要な視覚情報は隣接色との3:1以上が基準です。この例では、現在ページの ■#1D4ED8 と周囲の白 ■#FFFFFF の差も約6.70:1です。

現在ページは見た目だけでなくaria-currentでも伝える

WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）1.2では、関連する項目の中で現在位置を示すために aria-current を使えます。ページネーションでは、現在ページの要素に aria-current="page" を付けることで、「この番号が現在表示中のページ」であることをプログラム上でも示せます。1つのページネーション内では、現在項目として扱う要素は1つにします。

前後のページ番号をホバーしたときは、ライトブルー ■#DBEAFE の背景にダークブルー ■#1E3A8A の文字を置くと約8.49:1です。枠線をロイヤルブルー ■#1D4ED8 にすると、■#DBEAFE に対して約5.49:1です。現在ページと同じ塗りつぶしにせず、ホバーは薄い背景にすることで状態の意味を分けられます。

「前へ」「次へ」もページ番号と同じナビゲーションの一部なので、文字をダークブルーグレー ■#334155、背景を白 ■#FFFFFF とする例が使えます。矢印だけに頼るより、必要に応じて文字ラベルも併用すると移動方向を判断しやすくなります。

フォーカスは現在ページとは別の状態として見せる

現在ページは「表示中のページ」、フォーカスは「今キーボードで操作している項目」です。意味が異なるため、同じ見た目にしないようにします。たとえば白 ■#FFFFFF の余白を挟んでダークネイビー ■#0F172A のフォーカスリングを置くと、リングと白の比は約17.85:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。

ページ数が多い場合も、番号ごとに色を変える必要はありません。通常、現在、ホバー、フォーカスの4つの役割を固定すれば、ページ番号が増えても配色の意味を保ちやすくなります。現在ページだけを強調し、それ以外はニュートラルにすると、ナビゲーションが本文より目立ちすぎるのも防げます。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、ページ番号・現在ページ・ホバー・フォーカスなど、実際に隣接する組み合わせは別途確認します。