色を用いた表現に関する注意点

参考:グレースケール表示への切り替え方

なにかを表現する際に色を用いることがしばしばあります。

色を用いた表現としてよく見られるものとして、以下のような例が挙げられます:

  • フォーム中で入力が必須の項目のラベルを赤色で表示する

  • エラー・メッセージを赤色で表示する

  • リンクなど、クリッカブルであることを色を変えて示す

  • 強調するためにテキストの色を変える

  • 円グラフの画像で、回答の分布状況を色で示す

色を用いた表現そのものには問題はありませんが、その意味するところが色の違い以外の手段で表現されていないと、色弱者や視覚障害者にその意図が伝わりません。

テキスト情報であれば、その意図が伝わるような文言を工夫して色を用いた表現と併用すれば良いでしょう。

参考:テキスト情報の文言とアクセシビリティー

上記のリンクの場合は、色に加えて下線など、別の視覚的要素も併せて用いれば問題ありません。

画像の場合、テキストによる説明を併記する方法がまず考えられます。また、上記の円グラフの例であれば、背景の模様を変えるといった方法が考えられるでしょう。

このように、色の違いに加えて、別の手段で意図を表現することが重要です。

さらに、色弱者に配慮した色の組み合わせを用いる、いわゆるカラー・ユニバーサル・デザイン(CUD)を行うことも有効です。色に依存しない表現を用いれば、色の認識が著しく困難な人にも伝わる情報になりますが、CUDを行えば、色弱者にとってはより理解しやすい情報になります。

カラーユニバーサルデザイン機構(CUDO)は、CUDのポイントとして以下の3つを挙げています。

  1. 出来るだけ多くの人に見分けやすい配色を選ぶ。

  2. 色を見分けにくい人(場合)でも情報が伝わるようにする。

  3. 色の名前を用いたコミュニケーションを可能にする。

「カラーユニバーサルデザイン3つのポイント」とは? – NPO法人 カラーユニバーサルデザイン機構 CUDO

CUDを行う場合、上記のポイントを満たすような配色を用います。具体的には、例えばカラーユニバーサルデザイン推奨配色セットとして公開されているカラー・パレットを用いるといった方法が考えられます。ただ、配色についてはプロダクトやサービスのブランド・カラーなどとの兼ね合いもあることが多く、こういった制約を考慮して独自のカラー・パレットを予め定義しておくのが良いでしょう。

実際にデザインしたものや実装したものが色弱者にとって利用しやすいものかを検証する場合は、以下に挙げるようなシミュレーターを用いると良いでしょう。

関連ガイドライン項目

関連FAQ