色だけに頼らずリンクを分かりやすくするWEBデザイン

文章の途中にあるリンクが青い文字だけで示されていると、通常の文章と区別しにくいことがあります。色を見分けにくい人だけでなく、画面の明るさや表示環境によっても気づきにくくなります。この記事では、市民講座の案内ページを例に、下線、リンクの言葉、操作中の表示を組み合わせ、色に依存せずリンクを見つけられる設計を紹介します。

リンクは通常時から下線などの形で区別する

WCAG 2.2（Web Content Accessibility Guidelines：Webコンテンツを利用しやすくするための国際的な指針）の達成基準1.4.1「色の使用」では、色だけを情報伝達の唯一の手段にしないことが求められます。本文の一語だけを別の色にし、マウスを重ねたときだけ下線を出す方法では、操作前にリンクだと気づけません。

分かりやすい方法は、文章内のリンクに最初から下線を付けることです。CSS（Webページの見た目を指定する仕組み）のtext-decoration: underlineを通常状態に設定し、文字と線の間を少し空けます。ページ上部のナビゲーションのように配置で操作場所が分かる領域と、文章に混ざるリンクは分けて考えましょう。

下線を使わない場合も、太字など色以外の手がかりを通常時から用意する必要があります。W3Cは、リンク文字と周囲の通常文字の明るさのコントラスト比を3:1以上にする技法も示していますが、本文では下線を常時表示する方法が見つけやすさを確保しやすくなります。

市民講座の案内ページで使う配色とリンク文言

色を6桁の英数字で示すHEXコードの例として、ページ背景を白■#FFFFFF、本文を濃いグレー■#263445、リンクを濃い青■#1E40AFにします。本文と背景のコントラスト比は約12.65:1、リンクと背景は約8.72:1です。いずれも通常サイズの文字に求められる4.5:1以上を満たします。

例えば「参加前に募集要項を確認し、会場までのアクセスを見る」という案内では、「募集要項を確認」と「会場までのアクセスを見る」をそれぞれ下線付きリンクにします。「こちら」「詳細」だけでなく、移動先の内容が分かる言葉にすると、読み上げやリンク一覧でも判断しやすくなります。

訪問済みリンクには紫■#6B21A8を使う例も考えられます。白■#FFFFFFとのコントラスト比は約8.72:1ですが、訪問後も下線は残します。なお、通常の本文■#263445と未訪問リンク■#1E40AFの比率は約1.45:1しかありません。文字がどちらも十分読めても、色の違いだけでリンクを見分けるのは難しい組み合わせです。

キーボードのTabキーで移動したときには、フォーカス（現在操作の対象になっている位置）を枠線で示します。例えば暗いオレンジブラウン■#92400Eの3px（画面上の3ピクセル幅）の外枠なら、白■#FFFFFFとの差は約7.09:1です。文字から少し離した枠にすれば、下線と区別して操作位置を示せます。

ホバー・訪問済み・スマホで確認するポイント

Hover（ホバー：マウスを重ねた状態）で下線を太くするのは追加の反応として使い、普段表示している下線を消さないようにします。キーボード操作時の輪郭も無計画に削除せず、必要なら:focus-visibleで調整します。スマートフォンにはマウスのホバー操作がないため、初期表示のままでリンクを見つけられるかを確認しましょう。

WCAG 2.2のレベルAAでは、通常の大きさの文字と背景のコントラスト比は4.5:1以上、大きな文字では3:1以上が基準です。リンクの識別と文字の読みやすさは別々に確認します。背景が変わる場所や訪問済みの状態、フォーカス表示も、実際に接する色との組み合わせで判断してください。

HueRollではHEXコードを入力して色を選び、白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やAA・AAAの自動判定には対応していません。本文とリンクの差、白以外の背景との比率は別途計算し、マウス・キーボード・スマートフォンで操作を確かめましょう。