白背景でアクセシブルなリンク色

アクセシブルなリンク色の選択

リンク色は同時に2つのアクセシビリティ要件を満たす必要があります：

1. 背景との十分なコントラスト（AAで4.5:1）
2. 周囲のテキストと視覚的に区別可能（リンク色と本文テキスト間で3:1のコントラスト、または下線を使用）

白背景でAAを通過するリンク色

/* すべて#ffffffに対して4.5:1を通過 */
a { color: #1d4ed8; }  /* blue-700: 8.59:1 */
a { color: #2563eb; }  /* blue-600: 5.38:1（カスタム） */
a { color: #1e40af; }  /* blue-800: 10.14:1 */
a { color: #7c3aed; }  /* violet-600: 5.36:1 */
a { color: #0369a1; }  /* sky-700: 5.12:1 */

下線の問題

WCAG 1.4.1（色の使用）は、色だけが情報を伝える唯一の手段であってはならないと規定しています。本文テキスト内のリンクには、以下のいずれかが必要です：

• リンクに常に下線を付ける（最も信頼性の高いアプローチ）
• リンク色と周囲のテキスト間で3:1のコントラスト比を確保し、かつホバー/フォーカス時に色以外のインジケーターを提供

/* 推奨：常に下線を付ける */
a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 代替案：本文テキストとの3:1コントラスト + ホバー下線 */
body { color: #1f2937; }  /* gray-800 */
a {
  color: #2563eb;  /* gray-800との3.23:1コントラスト */
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

人気のリンク色の比較

色	Hex	vs 白	vs #000000本文	推奨
Blue-700	#1d4ed8	8.59:1	2.44:1	下線付きで使用
Blue-600	#2563eb	5.38:1	3.90:1	下線ありなしどちらでも良い
Indigo-600	#4f46e5	5.22:1	4.02:1	下線ありなしどちらでも良い