Blogの作り方

色覚異常(色盲)の人にもわかりやすく 色覚バリアフリーに合わせたデザインにしよう

色覚バリアフリー ユニバーサルデザイン

日本人男性20人に1人、日本人女性500人に1人が、色覚異常(色盲)を持っているといわれています。色覚異常に気が付かずに生活しているケースも多いと聞きます。沢山の人に色覚異常について知ってもらいたいと考え、このブログを書きました。

デザインを一生懸命考えても、サイトカラーを一生懸命考えても、もしこのブログを読むことが難しい人がいるならば意味がありません。みんなが読むことができるようにしたいなと考えています。

近年、WEBサイトのユニバーサルデザイン化が進み、聴覚障害を持つ方に向けて音声で読み上げる機能を有しているものもあります。また見やすい文字フォントを使用したり、配置をするようになりました。しかし、色覚異常(色盲)に対応したデザインはまだまだ進んでいません。色覚バリアフリーを意識し、色覚異常があっても見やすくなるようなデザインにしたいと思い調べました。
※現在、試行錯誤で編集しているためまだ対応は完了していません。温かく見守ってください。

色覚異常(色盲)とは

色覚異常(色盲)とは、船体細胞が失われていたり何らかの異常で色をみわけることができないことをいいます。

日本人男性の20人に1人、日本人女性の500人に1人は色覚異常(色盲)です。これはAB型の血液型の割合よりも多く、日本には約300万人、世界には2億人もの色覚異常(色盲)の人がいます。

眼球には赤・緑・青を判別する「錐体細胞」があります。その3つの錐体細胞が失われていたり、なんらかの異常があることで色を見分けることができない症状のことを言います。

また赤と緑の視物質遺伝子はどちらもX染色体に載っているため伴性劣性遺伝の遺伝形式となり、症状は圧倒的に男性に多くなります。
色盲とは

赤を全く認識することができないケースもあれば、ピンクと藤色の見分けがつかないケースなど、症状や程度はバラバラです。同系色が重なると見えない、マーカーをひかれていると見えなくなるということを友人から聞きました。

どのように見えるか書きBuzzFeedさんの記事がわかりやすいので下記ご覧ください。
参考:色覚異常の人が見ている世界はどれだけ違う? 再現してみた
色覚異常・色盲・色覚多様性の違いって何?というかたは下記ご覧ください。
参考:なぜ「色覚異常」「色覚障害」「色弱」などでなく「色盲」という言葉を使うのか?

色覚異常(色盲)の見え方

  • ピンクと藤色の違いがわからない
  • 緑色がわからない
  • 赤がわからない
  • 赤と緑がわからない
  • マーキングすると文字が読めない
  • 色は白黒でみえる

色覚バリアフリー

色覚バリアフリーのために注意すべきことは3つ

  1. 同系色で重ねない(彩度や明暗差をつける)などの配色を考える
  2. なるべくカラーではなくレイアウトで区別できるようにする
  3. カラーを明記する

参考:バリアフリープレゼンテーション法
参考:色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット(バリアフリーに配慮した見分けやすい色の組み合わせ)

色覚異常(色盲)の方にどのようにWEBサイトが見えるのか確認

Colorblind Web Page Filterは、色覚異常の方がどのように見えているのかWEBサイトを表示されます。このサイトを利用すると、見にくい文字や配色がわかります。
利用方法は簡単。対象のWEBサイトのURLを入力するだけです。

参考サイト

色覚バリアフリー

MarroNoteのカラーを変更してみた

緑&白から白&ブラウンに変更をしてみました。ちょっと見やすくなったかな…。

改善前

改修前

改善後

改修後

確認

Colorblindで見てみると、すっきりしました。
カテゴリの背景色を変更したほうが良さそう。
違い

まとめ

このような形で少しずつ改善をしていくと良さそうです。

全部を一気にやろうと思うと迷ったり、決まりません。気が付いたところをちょこちょこ変更すると良さそうです。

ぜひ参考にしてくださいね。

ABOUT ME
こんちゃ
◆Webライター◆ イベント取材・導入事例・オウンドメディア記事の編集ライティングをIT企業中心に活動しています。