GTM-MML4VXJ
Skip to main content

7.1.4.1 色の使用に関する達成基準

情報を伝える、何が起こるか若しくは何が起きたかを示す、利用者の反応を促す、又は視覚的な要素を区別する視覚的な手段として、色だけを使用してはならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

コンテンツを理解し操作するために必要な情報を色を用いて伝える際には、色の違いが分からないユーザーも理解できるように説明や視覚的な手がかりを補足しなければなりません。色の違いが分からないユーザーには、スクリーンリーダーの音声読み上げを利用しているユーザーや色覚に差異のあるユーザーなどが挙げられます。また、弱視のユーザーや視力の低下しているユーザー、白内障などを患っているユーザーなどは、色の違いを知覚しづらいことがあります。

例えば、入力フォームで必須項目を示すために項目名のテキストを赤字にする場合、フォームの先頭で「赤字は必須項目です。」と説明することがあります。その場合は項目名のテキストを赤字にするだけではなく、「(必須)」というテキストを項目名の後に補足することによって、文字の色が赤であることが分からないユーザーも理解することができるようになります。そのような補足がなく、項目名のテキストを赤字にしただけでは、色の違いが分からないユーザーにはその項目が必須項目であることが伝わりません。

また、折れ線グラフ、棒グラフ、円グラフなどで複数の色を使用する場合には、線の種類を変える、パターンを併用する、引き込み線をつけるなどして、色の違いが分からなくてもデータを読み取ることができるようにします。モノクロで印刷したときでも理解できるかどうかを確認するとよいでしょう。

色は、視覚的な訴求力を高めることによって情報を理解しやすくするため、状況に応じて積極的に使用すべきです。しかし、色を違いを知覚しづらいユーザーもいるため、色だけでなく、別の手段もあわせて用いる必要があります。

事例と実装

良い例 1:赤字の必須項目

スクリーンショット:赤字だけでなく「[必須]」と記述した必須項目

説明文に「赤字は必須項目です。」と明記して、必須である項目名のテキストを赤字にしているほか、「[必須]」と必須項目であることをテキストで明記する。ユーザーは、色の違いが分からなくても、この項目が必須項目であることが分かる。

悪い例 1:赤字の必須項目

スクリーンショット:赤字だけで示した必須項目

説明文に「赤字は必須項目です。」とあるが、必須である項目名の「名前」というテキストが赤字になっているだけなので、色の違いが分からないユーザーには、この項目が必須項目であることが分からない。

良い例 2:円グラフ

スクリーンショット:引き出し線をつけた円グラフ

4つの色を用いた円グラフで、それぞれの色の領域に引き出し線を用いて何の領域なのかが分かるようにする。引き込み線で示すことによって、色の違いが分からなくても、ユーザーはデータを読み取ることができる。

悪い例 2:円グラフ

スクリーンショット:凡例だけで示した円グラフ

同じように4つの色を用いた円グラフだが、凡例でしか色の説明が示されていないため、色の違いが分からないユーザーはデータを読み取ることができない可能性がある。

参考情報

関連する達成基準

等級A