色だけで区別される本文中のリンク

園芸店の商品ページに、育て方の欄があります。ある段落には、水やりは週2回、初霜の前に冬の育て方ガイドを読むこと、大きな鉢を注文する前に配送について確認することが書かれています。「冬の育て方ガイド」と「配送について」はリンクです。サイトのスタイルシートはすべてのリンクから下線を消し、リンクを暗い青で表示しています。一般的な色覚の人がよい画面で見れば、青い言葉がかろうじて分かります。それ以外の多くの読み手には、段落はクリックできるもののない、ひとかたまりの暗い文字に見えます。

2つのリンクを示しているのは、色だけです。WCAG 1.4.1は、色を情報を伝える唯一の視覚的な手段にしてはいけないとしています。「ここがリンクである」ことも情報です。リンクの青 #285c99 は白いページに対して6.82:1あり、文字自体は読みやすい色です。しかし #1a1a1a の本文に対しては2.55:1しかありません。違いはほぼ色相だけで、色覚特性によって失われるのはまさにその色相です。

WCAGの失敗例F73は、この状態を挙げています。色覚がなければ見分けられない本文中のリンクです。達成方法G183は代わりの方法を示しています。周囲のテキストに対して3:1以上の色にし、マウスを重ねたときとフォーカスしたときに下線などの視覚的な手がかりを付ける方法です。

色が薄く見えるプロジェクター、角度のついた安価なノートPCの画面、日差しの下のスマートフォンでも同じことが起きます。青と黒が同じグレーに見えるためです。メニュー、ボタン、カードのリンクはここでの問題ではありません。位置と形からリンクだと分かるためです。問題は本文の中、同じように見える言葉に囲まれたリンクです。

10グループ中3グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響あり）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 色を知覚しない 色覚特性のある人の多くには、中間の青とほぼ黒の文字が同じ暗いグレーに見えます。文の中のリンクは、ないのと同じです。
• 視覚が限られる コントラストの感度が低い人や、大きく拡大して読む人は、一度に数語しか見えず、リンクと本文を見分ける形の手がかりもありません。
• 言語・認知・学習の能力が限られる 文章を読むのが難しい人は、目立つリンクを頼りに次の行き先を選びます。目立たないリンクは見落とします。

axeは、文章の中のリンクの色が周囲のテキストと3:1未満で、ほかに区別するスタイルがない場合に指摘します。最も単純なケースは見つかりますが、すべてではありません。マウスを重ねたときだけの下線があるかは判断できず、背景が画像やグラデーションの場合は判定できないことが多く、訪問済みのリンクも確認しません。ブランドの配色から生成されたデザインは、下線をうるさいとして消し、デザイナーの画面で違って見えるリンクの色を残しがちです。