リンクは色に頼らずに区別できる必要があります
Learn Web Accessibility
Compliance Data & Impact
Disabilities Affected
- 視力低下
- 色覚異常
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 1.4.1: Use of Color
WCAG 達成基準 [WCAG 2.0 (A)]
- 1.4.1: Use of Color
WCAG 達成基準 [WCAG 2.2 (A)]
- 1.4.1: Use of Color
Trusted Tester 指南
- 13.A: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
修正方法
テキスト ブロック内に表示されるすべてのリンクの色のコントラストが周囲のテキストと少なくとも3:1異なることを確認して、色を区別できないユーザーでもリンクを見つけられるようにします。
リンクに明確なスタイルがなく、コントラストの差が3:1以上の場合は、フォーカス時とホバー時にリンクに明確なスタイルが適用されることを手動でテストして確認する必要があります。
成功基準: リンク テキストの色のコントラストが少なくとも3:1を確保すること。
DequeのオープンソースaXeおよびブラウザ拡張機能 (WorldSpace AttestおよびComply用) 製品は、色のコントラスト比を分析し、3:1比率のガイドラインに準拠しているかどうかを判断するのに役立つ優れた信頼性の高いツールです。
なぜ重要なのか
視力の弱い人の中には、コントラストが低い、つまり明るい部分や暗い部分があまりないと感じる人もいます。すべてがほぼ同じ明るさで表示される傾向があるため、輪郭、境界線、エッジ、詳細を区別するのが難しくなります。背景の輝度（明るさ）に近すぎるテキストは読みにくくなることがあります。
ロービジョンの人は、全盲の人の約3倍もいます。12人に1人が色覚異常を抱えており、米国では男性の約8%、女性の約0.4%に相当します。視力が低下したり、色覚異常のある人は、十分なコントラストがないと背景に対してテキストを区別することができません。
リンク テキストの色を周囲のテキストの色と区別するのに十分な3:1の色のコントラスト比がない場合、コントラストが低いと感じる視覚障害のあるユーザーは、テキストがリンクとして機能することを視覚的に検出できません。
ルールの説明
リンクが色に依存しない明確なスタイルであるか、コントラストの差が3:1より大きい (手動テストが必要であることを警告する) ことを確認することで、色を区別できないユーザーがテキストがリンクであるかどうかを判断できるようにします。
仕組みについて (簡単に言うと)
テキスト ブロック内に表示されるすべてのリンクの色のコントラストが周囲のテキストと少なくとも3:1異なるかどうかをチェックし、色を区別できないユーザーでもリンクを見つけられるようにします。
このルールでは、下線、フォントスタイル、境界線、背景など、リンクを周囲のテキストから区別する一般的な方法を検討します。リンクが色に依存しない明確なスタイルを持っている場合、違反はありません（合格）。リンクに明確なスタイルがなく、コントラストの差が3:1未満の場合、違反 (不合格) となります。リンクに明確なスタイルがなく、コントラストの差が3:1以上の場合は、確実に自動化できないため、フォーカス時およびホバー時にリンクに明確なスタイルが適用されていることを確認する必要があります (手動テストが必要)。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: