WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G183: 色の違いだけで示されているリンク又はコントロールは、その文字色と周囲にあるテキストとのコントラスト比を 3:1 以上にして、フォーカスを受け取ったときには視覚的な手がかりを補足して強調する

適用(対象)

段落中にあるリンクの文字列のように、情報を伝達するために色だけが使われているテキスト

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、テキストの色の違いを識別することができない利用者に対して、同じ情報を示す豊富な視覚的な手がかりを提供することである。色は、段落や他のテキストのブロックの中にある文字列がリンクであることを示すために、一般的に使用されている。例えば、テキスト中に散らばる文字列が、周囲のテキストとの色の違いだけでハイパーテキストのリンクであると認識される。この実装方法は、色の違いを知覚することが困難である、又はロービジョンである利用者がそれらを見分けることができるよう、カーソルを重ねたりフォーカスが当たったときに、手がかりを補足する方法を説明している。

利用者がカーソルを合わせるかタブキーでリンクに移動するとき、この実装方法とともに視覚的な補足の確認手段があれば、テキストとその周りの相対輝度(明るさ)の差を3:1かそれ以上にしてもよい。視覚的なハイライトとは、例えば、アンダーライン、太字又は斜体といったフォントスタイルの変化、又はフォントサイズが大きくなるといった形になる。

この実装方法を使うことは、この達成基準を満たすために十分であるが、リンクテキストを区別するには、好ましい実装方法ではない。これは、色の相対輝度だけを使用するリンクは、全色盲の人々には分からないかもしれないからである。もしテキストのブロックに大量のリンクがないならば、リンクにはアンダーラインが推薦される。

注記 1: この実装方法は輝度に加えて色の使用に関するものである。この実装方法では、コントラスト比はリンクとその周囲の語句とのコントラストについて言及している。達成基準1.4.3と1.4.6では、コントラスト比は単語とその背景とのコントラストについて言及している。この違いは、達成基準1.4.3と1.4.6に使用されるコントラスト比は、異なる色覚及び視覚障害のための、テキストとその背景の可読性に関するものであるが、この実装方法は利用者がテキストの異なる部分の違い(明らかな違い)を識別する能力に関するものだからである。

注記 2: コンテンツ制作者がこの実装方法の色の部分(すなわち、互いに十分なコントラストが確保されている異なる色を語句に使用する)を使用したいと望んでいて、また、コンテンツ制作者が達成基準1.4.3(両方の語句と背景のコントラスト)に適合したいなら、以下の色を使用することができる。(例えば、以下のリストにある色のひとつを使ったリンクを持つ、白地の段落中の黒いテキスト)

注記 3: もしある時点でのすべての支援技術又はウェブブラウザが、利用者のためにウェブページのすべてのリンクにアンダーラインを引く選択肢を提供するなら、これは、コンテンツ制作者によって提供されたリンクをハイライトするメカニズムの代わりに使用することができる。

事例

事例 1: 黒い文字列に3:1のコントラスト、及び白地に4.5:1のコントラストを提供する色

この事例のサンプル:周囲のテキストと3:1のコントラスト比を持つリンク

事例 2

ドキュメントのハイパーテキストのリンクは中位の明るい青(#3366CC)で、通常のテキストは黒(#000000)である。なぜなら青のテキストは十分に明るく、周囲のテキストと3.9:1のコントラストを持ち、まったく色を見ることができない人も含め、すべての種類の色覚障害を持つ人々が周囲のテキストと違うことを識別することができるからである。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. テキストにおいて、情報を伝えるために色だけが使われているすべての箇所を見つける。

  2. テキストの色の相対輝度が、周囲のテキストの相対輝度と少なくとも3:1のコントラスト比の違いがある。

  3. リンクにカーソルを合わせる(マウスオーバーする)と視覚的に強調(アンダーラインやフォントの変更など)される。

  4. キーボード・フォーカスをリンクに合わせると視覚的に強調(アンダーラインやフォントの変更など)される。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。