コンテンツに移動
Silktideヘルプ

リンクのコントラスト

Silktide は、テキスト内にあるリンクのうち、色だけで周囲の単語と区別されていて、色覚に障害のある人には判別しにくいものを検出します。リンクはリンクとして認識できなければ、読者は利用できません。

これが重要な理由

男性の約12人に1人、女性の約200人に1人に色覚異常があります。リンクを示す唯一の手がかりがわずかな色の変化だけの場合、こうした読者には通常のテキストに見え、リンクの存在に気づけません。その結果、ナビゲーションや行動喚起を見逃すことになり、 レベルAの不適合となります。これは最も基本的なアクセシビリティ要件の1つです。

修正方法

インラインリンクを適合させる方法は2つあります。

  1. 色以外の方法でも区別する - 最も簡単な修正方法は下線です。多くの読者はリンクに下線が付いていることを期待しています。境界線、背景、または周囲のテキストより明らかに太いフォントウェイトでも機能します。
\/* 色だけに依存するリンク *\/
a { color: #4a6da7; text-decoration: none; }

\/* 修正済み: 下線により誰でもリンクを確認できる *\/
a { color: #4a6da7; text-decoration: underline; }
  1. 大きく異なる色と、視認できるフォーカスおよびホバー状態を使用する - リンクの色は、周囲のテキストとのが少なくとも 3:1 でなければなりません。また、マウスホバー時と時に、リンクが視認できる形で変化する必要があります(たとえば下線が付くなど)。

Silktide によるテスト方法

  1. テキストの流れの中にあり、直前または直後に単語がある、視認可能なリンクを検出します。メニュー項目やボタンなどの単独のリンクは、このチェックの対象外です。
  2. リンクの色、周囲のテキストの色、または背景色を確実に解決できないリンクは対象外とします。
  3. 下線、境界線、背景が付いているリンク、または周囲のテキストよりフォントウェイトが少なくとも200単位大きいリンクは、色を使わなくても視覚的に区別できるものとして合格とします。
  4. それ以外の場合は、リンクの色と周囲のテキストの色とのコントラスト比を測定し、フォーカス時およびホバー時のリンクの変化を調べます。比が少なくとも 3:1 で、フォーカス時またはホバー時の状態が視認できる形で異なる場合を除き、リンクを報告します。

トラブルシューティング

ホバー時にリンクが変化するのに、なぜ指摘されるのですか?

ホバー時の変化だけでは不十分です。リンクには、周囲のテキストとの色のコントラスト比が少なくとも3:1必要です。また、これらを組み合わせても、そもそもホバーを試せる程度に色の違いを認識できる人にしか役立ちません。下線が最も信頼性の高い修正方法です。

メニューやボタン内のリンクが指摘されません

正しい動作です。このチェックは、読者がリンクを周囲の単語から区別しなければならない、ほかのテキストに囲まれたリンクにのみ適用されます。単独のリンクは、その位置とスタイルによって視覚的に識別できます。

詳細情報

最終更新

このページは役に立ちましたか?