リンクの色は何色がいい？クリックできると伝わるWEB配色の考え方

WEBサイトのリンク色は、青なら必ず分かりやすいというものではありません。背景との明るさの差を確保し、通常の文章とは下線などでも区別することが大切です。美術館の企画展案内ページを例に、本文中・淡い案内欄・暗いフッターで、クリックできることを伝える色の選び方を紹介します。

リンクの色は「背景とのコントラスト」と「下線」で考える

まず、リンクを置く背景色を確認してから文字色を選びます。コントラスト比は、文字と背景の相対的な明るさの差を示す数値です。色相（赤や青といった色の種類）が違っても、明るさが近ければ文字は読み取りにくくなります。

本文中のリンクは、文字色だけを変えるよりも、下線を付けて通常の文章と区別する方法が分かりやすいでしょう。「こちら」ではなく「企画展の作品解説を読む」など、移動先が分かる言葉を使うことも重要です。リンクでページを移動し、予約などの主要操作は別のボタンにすると、役割も整理できます。

WCAG（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための指針）2.2のAA水準では、通常サイズのリンク文字にも背景との4.5:1以上のコントラスト比が原則必要です。また、下線などの手掛かりがなく色だけで本文中のリンクを区別する場合、W3Cの手法G183では周囲の通常文字と3:1以上の明るさの差を付ける方法が示されています。これは文字と背景の4.5:1とは別の確認です。

美術館の展示案内ページで使う3つの配色例

以下の色はHEX（16進数でWEBの色を表すコード）で示します。展示紹介の本文・案内欄・フッターのそれぞれで、リンク文字とその直下の背景を組み合わせます。

作品解説の本文：オフホワイトに青

本文の背景をオフホワイト ■#FBFAF7、通常文字を濃いブルーグレー ■#26333Bにすると、文字と背景は約12.43:1です。「作品解説を読む」は落ち着いた青 ■#185DA2にし、同じ背景 ■#FBFAF7に対して約6.44:1を確保します。

ただし、青のリンク文字 ■#185DA2と通常文字 ■#26333Bの明るさの差は約1.93:1です。色だけでリンクを見分ける設定にはせず、常に下線を付けます。

来館案内の淡い欄：薄紫に濃い紫

案内欄を淡い薄紫 ■#F1F0F9、説明文を濃い紫がかったグレー ■#353148にすると約11.03:1です。「アクセス方法を確認する」のリンクは深い紫 ■#653D8Bを使い、案内欄の背景 ■#F1F0F9と約7.16:1を確保します。こちらも下線付きの文字リンクとし、案内欄全体をクリックできるような見せ方にはしません。

暗いフッター：濃紺に淡い水色

フッター背景を濃い紺色 ■#22313C、通常文字を明るいグレー ■#E4EDF2にすると約11.25:1です。「お問い合わせ」などのリンクを淡い水色 ■#BFEAF1にすると、背景 ■#22313Cに対して約10.34:1になります。通常文字とリンク色は近いため、ここでも下線を残します。

訪問済み・ホバー・フォーカスでもリンクだと分かるようにする

一度開いたリンクを訪問済みとして表示するなら、本文の青から紫 ■#704B8Cに変える案があります。オフホワイト ■#FBFAF7との比率は約6.54:1です。訪問済みでも下線を消さず、色を見分けられなくてもリンクだと分かる状態を維持します。

ホバー（マウスを重ねた状態）では、本文のリンクを濃い青 ■#134E8Bにすると背景 ■#FBFAF7と約8.08:1、案内欄では濃い紫 ■#563279が薄紫 ■#F1F0F9と約8.73:1です。暗いフッターのホバー色は淡い水色 ■#D7F5F7にすると背景 ■#22313Cと約11.63:1になります。どの場合も下線を保ちます。

フォーカス（キーボード操作などで現在選ばれた状態）には、リンクから少し離した輪郭を加えます。明るい本文背景 ■#FBFAF7には濃い青 ■#27558Bの輪郭で約7.29:1、暗いフッター背景 ■#22313Cには淡い水色 ■#BFEAF1の輪郭で約10.34:1です。スマートフォンでも下線・リンクの文言・押した後の移動先を確認し、色だけに頼らないリンクを仕上げましょう。