適用 (対象)
段落中にあるリンクの文字列のように、情報を伝達するために色だけが使われているテキスト
これは達成基準 1.4.1: 色の使用 (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、テキストの色の違いを識別することができない利用者に対して、同じ情報を示す豊富な視覚的な手がかりを提供することである。色は、段落や他のテキストのブロックの中にある文字列がリンクであることを示すために、一般的に使用されている。例えば、テキスト中に散らばる文字列が、周囲のテキストとの色の違いだけでハイパーテキストのリンクであると認識される。この達成方法は、色の違いを知覚することが困難である、又はロービジョンである利用者がそれらを見分けることができるよう、カーソルを重ねたりフォーカスが当たったときに、手がかりを補足する方法を説明している。
利用者がカーソルを合わせるか Tab キーでリンクに移動するとき、この達成方法とともに視覚的な補足の確認手段があれば、テキストとその周りの相対輝度 (明るさ) の差を 3:1 かそれ以上にしてもよい。視覚的なハイライトとは、例えば、アンダーライン、太字又は斜体といったフォントスタイルの変化、又はフォントサイズが大きくなるといった形になる。
この達成方法を使うことは、この達成基準を満たすために十分であるが、リンクテキストを区別するには、好ましい達成方法ではない。これは、色の相対輝度だけを使用するリンクは、全色盲の人々には分からないかもしれないからである。もしテキストのブロックに大量のリンクがないならば、リンクにはアンダーラインが推薦される。
この達成方法は輝度に加えて色の使用に関するものである。この達成方法では、コントラスト比はリンクとその周囲の語句とのコントラストについて言及している。達成基準 1.4.3 と 1.4.6 では、コントラスト比は単語とその背景とのコントラストについて言及している。この違いは、達成基準 1.4.3 と 1.4.6 に使用されるコントラスト比は、異なる色覚及び視覚障害のための、テキストとその背景の可読性に関するものであるが、この達成方法は利用者がテキストの異なる部分の違い (明らかな違い) を識別する能力に関するものだからである。
コンテンツ制作者がこの達成方法の色の部分を使用したい (すなわち、互いに十分なコントラストが確保されている異なる色を語句に使用する) と望んでいて、かつ、コンテンツ制作者が達成基準 1.4.3 にも適合したい (それぞれの語句と背景とのコントラストを確保する) 場合、以下で挙げる色を用いることができる。(例えば、白い背景の段落内で黒いテキストを使い、リンクは以下の事例 1 にある色のいずれかで表現する)。
もしある時点でのすべての支援技術又はウェブブラウザが、利用者のためにウェブページのすべてのリンクにアンダーラインを引く選択肢を提供するなら、これは、コンテンツ制作者によって提供されたリンクをハイライトするメカニズムの代わりに使用することができる。
事例
例 1: 黒い文字列に 3:1 のコントラスト、及び白地に 4.5:1 のコントラストを提供する色
この事例のサンプル: 周囲のテキストと 3:1 のコントラスト比を持つリンク
例 2
ドキュメントのハイパーテキストのリンクは中位の明るい青 (#3366CC) で、通常のテキストは黒 (#000000) である。なぜなら青のテキストは十分に明るく、周囲のテキストと 3.9:1 のコントラストを持ち、まったく色を見ることができない人も含め、すべての種類の色覚障害を持つ人々が周囲のテキストと違うことを識別することができるからである。
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- Contrast Analyser – Application
- Contrast Ratio Analyser - online service
- Colour Contrast Analyser - Firefox Extension
「Colour Contrast Analyser」は 2018 年現在、Firefox Add-ons から入手できない状態にある。
検証
手順
- テキストにおいて、情報を伝えるために色だけが使われているすべての箇所を見つける。
- テキストの色の相対輝度が、周囲のテキストの相対輝度と少なくとも 3:1 のコントラスト比の違いがあることを確認する。
- リンクへのポインティング (マウスオーバー) が、視覚的に強調 (アンダーラインやフォントの変更など) を引き起こすことを確認する。
- キーボードフォーカスをリンクに移動すると、視覚的に強調 (アンダーラインやフォントの変更など) を引き起こすことを確認する。
期待される結果
- #2、#3、及び #4 の結果が真である。