目次

    カラーユニバーサルデザインとは

    “多様な色覚に配慮して、情報がなるべくすべての人に正確に伝わるように、利用者の立場に立ってデザインすることを言います。"

    色が見える仕組み

    私たちが色や物体を見るためには光が欠かせません。
    光源からの光が物体を照らすと、物体の表面で一部の光を吸収し、残りの光を反射します。
    この光は性質の違いによって、短波長、中波長、長波長に分けることができます。
    物体から反射された光が目に入り、私たちは網膜で光の波長の長さを判別します。

    色覚特性の仕組み

    眼の網膜には、光の波長の違いを判別する細胞があるのですが、色覚特性を持つ方は、網膜にある「赤などの超波長の光を受け取る視細胞」または「緑などの中波長の光を受け取る視細胞」が不足しているために、色の見え方が変わるとされています。
    (日本人男性では、20人に1人がこのように見えています。1クラスに1人いる計算になります。結構多いですね。)


    見えにくい色

    色覚特性の方が見えにくい色

    赤みと緑みの違いを見分けることが難しいです。他にもピンクと白、水色とピンク、黄色と黄緑など、明度の似た色を見分けることが難しいとされています。また、人によって赤と黒が同じ様に見えていることもあります。

    高齢者が見えにくい色

    高齢化によって眼の水晶体が黄色く変色するため、青い光を通しにくくなり、「青色」が暗く見えてしまうことがあります。

    見えやすくする工夫

    1.明度差をつける

    使用する色に明度差をつけると判断しやすいです。

    2.セパレーションを用いる

    セパレーションとは

    色相が近い色を認識しやすくなる様に、あえて区切り線を入れることです。
    明度差の違う色で境界線を区切ることで色と色の境界がわかりやすくなります。

    3.文字や番号を追加する

    文字や番号などのテキスト情報を追加すると、色が判別できなかった場合でも、情報を判断する手掛かりになります。

    4.形や模様を追加する

    色以外の方法で見せ方を変える、アンダーラインやあしらいをつけるなどが挙げられます。こちらも色が判別できなかった場合でも、模様やあしらいが情報を判断する手掛かりになります。

    例:グラフ
    ただのグラフではなく、以下の様にあしらいを追加すると、色で判別できなかった場合でも、模様の違いで内容が違うことを認識できます。

    おわりに

    ここまでお読みいただきありがとうございました。
    誰にでもわかりやすい表現を作っていきたいですね。
    PREV
    2023.06.12
    初心者コーダーにおすすめの Adobe XD記事3選
    NEXT
    2023.06.12
    【UI/UX設計の原理原則】ドハティの閾値とは