訪問済みリンクの色は変えるべき？WEBサイトで迷わせない配色

TIPS

訪問済みリンクの色は、記事一覧・検索結果・資料一覧のように複数のリンク先を行き来する画面では、変える価値があります。「どのページをすでに開いたか」を色で補助できるためです。一方、グローバルメニューや主要CTA（Call to Action、ユーザーに主要な行動を促すボタンやリンク）のように、常に同じ役割で見せたい要素まで訪問履歴で色を変える必要はありません。この記事では、訪問前・訪問後のリンクを見分けやすくしながら、文字の読みやすさとブラウザーの制限を守る配色を紹介します。

訪問済み色は「履歴を振り返る場面」に限定して使う

CSSでは、未訪問リンクを :link、訪問済みリンクを :visited で指定できます。ただし訪問状態はブラウザーの履歴に依存し、履歴削除やプライベートブラウジング、別ブラウザーの利用などで変わります。そのため、訪問済み色を「読了」「完了」のような確実な進捗表示として使うのは避け、あくまで閲覧履歴の補助として扱います。

また、W3CのWCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、訪問済みリンクの状態は作者が完全には制御できないため、訪問前と訪問後を色だけで区別しても「1.4.1 Use of Color」の失敗にはならないと説明されています。ただし、どちらのリンク色も背景に対する文字コントラストは満たす必要があります。通常サイズの文字なら4.5:1以上が基準です。

迷わせにくい訪問済みリンクの配色例

1. 白背景では青から落ち着いた紫へ変える

白 ■#FFFFFF の記事一覧で、未訪問リンクをブルー ■#1D4ED8、訪問済みリンクをダークパープル ■#5B2C6F にします。白背景とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、未訪問リンクが約6.70:1、訪問済みリンクが約10.32:1です。本文をチャコール ■#26272B にすると白との比率は約14.92:1です。

.article-list a:link {
  color: rgb(29 78 216);
  text-decoration: underline;
}

.article-list a:visited {
  color: rgb(91 44 111);
}

.article-list a:hover {
  text-decoration-thickness: 2px;
}

未訪問と訪問済みの2色同士のコントラスト比は約1.54:1ですが、WCAGは訪問済み状態について両色間の3:1を作者の必須条件としていません。リンク自体は下線を残し、「リンクであること」と「訪問済みであること」を別々に考えます。

2. 淡いグレー背景ではティールとブラウンを使う

背景がライトグレー ■#F6F7F8 の検索結果や資料一覧では、未訪問リンクをティール ■#155E75、訪問済みリンクをダークブラウン ■#7C2D12 にする方法もあります。背景とのコントラスト比はそれぞれ約6.77:1、約8.74:1です。青と紫に固定せず、サイトの配色に合う2色を選びつつ、どちらも背景上で読めることを優先します。

3. メニューや主要CTAには訪問済み色を適用しない

ヘッダーメニュー、ログイン、購入、問い合わせなど、サイト全体で同じ役割を保ちたいリンクは、閲覧履歴によって色が変わると現在の優先順位と関係なく見た目が変化します。訪問済みスタイルは .article-list a:visited や .search-results a:visited のように対象を絞り、ナビゲーションや主要CTAは通常の配色を保つ方が管理しやすくなります。

`:visited` にはプライバシー制限があるため、色以外の進捗表現には使わない

ブラウザーは閲覧履歴の漏えいを防ぐため、:visited で変更できるCSSを色関連のプロパティに制限しています。MDNでは、color、background-color、border-color、outline-color、text-decoration-color などが対象として示されています。訪問済みリンクだけ太字にしたり、アイコンを追加したりするような履歴依存の装飾は使えません。また、スタイルの順番は :link → :visited → :hover → :active の順にすると、ホバーやクリック中の状態で上書きしやすくなります。

訪問済み状態をユーザーの正式な進捗として扱いたい場合は、履歴色ではなく、チェックマーク、進捗ラベル、アカウントに保存する読了状態など別の仕組みを用意します。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで選び、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、リンク色と実際の背景色の比率は別途確認します。