Skip to content

解説書 達成基準 1.4.1:色の使用 (レベル A)

要約

目標
色が情報を判別する唯一の方法とならない。
何をすればよいか
色だけでなく、形状やテキストといった情報も用いて、意味を伝達する。
なぜそれが重要か
全ての人に色が見えるわけでもなければ、色が同じように見えるわけでもない。

意図

この達成基準の意図は、色の違いによって伝えられている情報、言い換えれば、それぞれの色には割り当てられた意味があり、その色を使うことによって伝えている情報に、目の見えるすべての利用者がアクセスできるようにすることである。画像 (又は、その他の非テキスト形式) で色の違いによって情報を伝えている場合、色覚異常の利用者はその色が分からないかもしれない。この場合、色で伝えている情報を他の視覚的な手段で提供することで、色の分からない利用者もその情報を知覚できる。

訳注

「色覚異常」という用語は、日本医学会 医学用語辞典「色覚関連用語について」に基づいて使用している。

色は、感覚的な訴求力、ユーザビリティ、そしてアクセシビリティを高めるため、ウェブコンテンツのデザインにおいて重要なものである。しかし、色を知覚しづらい利用者もいる。ロービジョンの人は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。さらに、色数が制限されている、又はモノクロのディスプレイ及びブラウザを使用している人は、色だけで提示されている情報を知覚できない。

色の違いで伝えられている情報の例としては、「必須項目は赤字」、「赤字はエラー」、そして「赤がメアリーの売上、青がトムの売上」などが挙げられる。動作を示している例では、リンクが新しいウィンドウで開くことやデータベースの項目が正常に更新されたことを示すために色を使うことがある。また、利用者の反応を促している例には、必須項目が未入力であることを示すためにフォームの入力フィールドを反転表示することが挙げられる。

注記

この達成基準は、ページ上での色の使用、又は他の視覚的な表示によって補完される場合に色分けすることを何ら阻むものではない。

注記

色相だけでなく明度も大きく異なる色を用いてコンテンツを伝える場合、色間の相対輝度の差が 3:1 のコントラスト比になるのであれば、これは追加の視覚的な区別とみなす。例えば、明るい緑と暗い赤とでは、色(色相)と明度の両方が異なるため、コントラスト比が 3:1 以上あれば合格となる。同様に、要素の前景色と背景色を反転させてコンテンツを区別させる場合も(繰り返すが、前景色と背景色が十分なコントラストを持っているのであれば)合格となる。

しかしながら、コンテンツが特定の色を正確に知覚又は区別できる利用者の能力に依存している場合、色間のコントラスト比に関わらず、追加の視覚的な標識が必要となる。例えば、輪郭線が緑なら有効、赤なら無効とわかるようになっているような場合である。

注記

この達成基準は、情報を伝達する、アクションを示す、反応を促す、又は視覚的要素を判別するために色が使用されていない状況には適用されない。例えば、ハイパーリンクが隣接する静的テキストと変わらないようにスタイリングされている場合、アクション可能なハイパーリンクテキストと隣接する静的テキストとの間には色の違いがないため、この達成基準の失敗とはならない。ただ、こうしたスタイリングの違いの欠如は、障害の有無にかかわらずインタフェースを見るすべての人にとって、ユーザビリティの悪化を招く恐れがある。

注記

この達成基準は、支援技術の利用者のニーズに直接対応するものではない。これは、一部の色を区別できない目の見える利用者が、コンテンツを理解できるようにすることを目的としている。支援技術の利用者に情報をどう伝達するかは、別の達成基準、例えば 1.1.1 非テキストコンテンツ1.3.1 情報及び関係性4.1.2 名前 (name)・役割 (role)・値 (value) など (ただし、これらに限定されるわけではない) で個別に扱われる。

逆に、たとえ色の違いによって伝達される情報が適切に支援技術に伝達されたとしても、特定の色を区別できない目の見える利用者が必ずしも支援技術を使用しているとは限らないため、必ずしもこの達成基準を満たしているとはいえない。この達成基準は、色に代わる視覚的な代替を要求するものである。

注記

ほとんどのユーザエージェントは利用者に、リンクが以前アクティブにされた (visited) ことを示す色だけの手がかりを提供する。しかし、いくつかの技術的な制約により、訪問済みリンクを色だけで表示することに対して、コンテンツ制作者が制御できることは非常に限られている。その技術的な制約は次のとおりである:

  1. ユーザエージェントが、プライバシーの懸念から、リンクの訪問済み状態の公開を制限している。コンテンツ制作者からのユーザエージェントへのクエリは、すべてのリンクが未訪問であることを示す。
  2. リンクの訪問済み状態に関する利用可能な情報は、利用者及びブラウザの両方に依存するため、正確ではない。仮に、特定の利用者が以前アクティブにしたリンクに関する情報を正確にコンテンツ制作者が取得できたとしても、コンテンツ制作者は現在のブラウザに保存されている履歴に制約され、利用者が別のブラウザを使ってページを訪れたかどうか (又は、キャッシュクリアもしくはプライベートセッションの使用によって履歴が保存されていないかどうか) を判断することはできない。
  3. コンテンツ制作者は、CSS 擬似クラス :visited のスタイルを変更するのに、色だけを使うことができる。この技術は、色以外のあらゆるスタイリングを制約する。パレットの制限によって、コンテンツ制作者は色だけを使用して、リンクと非リンクのテキストの間だけでなく、訪問済みリンクと非訪問済みリンクの間のコントラストを 3:1 にしつつ、同時に全てのリンク及び非リンクのテキストのコントラストを 4.5:1 にすることはできない。
  4. コンテンツ制作者はまた、リンクの訪問済み状態を設定することもできない。アンカー要素には visited 属性がなく、したがって属性設定を通じて状態を切り替えることができない。そのため、コンテンツ制作者は訪問済みリンクに関して 1.3.1 情報及び関係性 又は 4.1.2 名前 (name)・役割 (role)・値 (value) を達成することができない。

これらの理由から、リンクの訪問済み状態の設定又は伝達は、コンテンツ制作者の責任範囲ではない。色だけで訪問済みリンクと未訪問リンクを判別する場合、二つのリンク色のコントラストが 3:1 以下であっても、結果としてこの達成基準の失敗とはならない。コンテンツ制作者は、すべてのテキストリンクがページの背景に対して最低限のコントラスト (達成基準 1.4.3) を満たすことを引き続き保証しなければならないことに注意されたい。

利点

  • ロービジョンの利用者が、色覚の限界を感じることがよくある。
  • 年配の利用者は、色がよく見えないかもしれない。
  • 色覚異常の利用者が、色で伝えられている情報をその他の視覚的な手段で知覚できるようになる。
  • 色数の制限されたモノクロのディスプレイを使用している人は、色に依存している情報を利用できないことがある。
  • 色の識別に問題を抱える利用者が、テキストの手がかりを見たり、聞いたりすることができる。

事例

必須項目を示すために色とテキストを用いている入力フォーム
ある入力フォームには、必須項目と任意項目の両方がある。入力フォームの上部にある説明文では、必須項目は赤字とアイコンで説明されている。任意項目のラベルと必須フィールドの赤いラベルの違いを知覚できない利用者でも、赤いラベルに隣接するアイコンで視認することができる。
試験
学生は、化合物の SVG 画像を見て、図に使用されている色及び各元素に隣接する番号の両方に基づいて、存在する化学元素を識別する。凡例によって、元素の種類ごとの色及び番号が示されている。目が見えてもすべての色の違いを知覚できない利用者でも、番号を頼りに画像を理解することができる。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。

十分なテクニック

そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付のテクニック (又は、テクニックの組み合わせ) がある。

状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合:

状況 B: 情報を伝える画像の中で色を用いている場合:

参考テクニック

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加のテクニックを検討することが望ましい。ただし、すべての状況において、すべてのテクニックが使用可能、又は効果的であるとは限らない。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

Back to Top