達成基準 1.4.1: 色の使用を理解する

意図

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

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

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

メリット

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

事例

• 必須項目を示すために色とテキストを用いている入力フォーム

  ある入力フォームには、必須項目と任意項目の両方がある。入力フォームの上部にある説明文では、必須項目は赤字とアイコンで説明されている。任意項目のラベルと必須フィールドの赤いラベルの違いを知覚できない利用者でも、赤いラベルに隣接するアイコンで視認することができる。

• 試験

  学生は、化合物の SVG 画像を見て、図に使用されている色及び各元素に隣接する番号の両方に基づいて、存在する化学元素を識別する。凡例によって、元素の種類ごとの色及び番号が示されている。目が見えてもすべての色の違いを知覚できない利用者でも、番号を頼りに画像を理解することができる。

関連リソース

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

• Vischeck
• AWARE Color Laboratory
• Wikipedia: Color Blindness
• Microsoft: Verify that a page is usable by people with color blindness
• Causes of Color: How do people inherit colorblindness? How often?: Genetics
• How to make figures and presentations that are friendly to Colorblind people
• The Color Tutor application

達成方法

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