LoginSignup
3
0

配色にカラーユニバーサルデザインを取り入れる

Last updated at Posted at 2023-12-22

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

カラーユニバーサルデザインとは、誰にでも見やすく使いやすい色使いを行うことです。
対象が色覚異常を持つ人だけだと思われがちですが、白内障や緑内障など病気により後天的に色の見え方が変わる可能性や加齢によっても見え方が変化する可能性を考慮すると、カラーユニバーサルデザインを行うことは全ての人に優しいデザインとなります。
また男性の20人に1人が色覚異常を持つと言われているので、見えにくさで困っている人は意外と身近にいるかもしれません。

見え方の違い

正常色覚、1型色覚、2型色覚では色の見え方がかなり異なります。

  • 正常色覚
    正常色覚.png

  • 1型色覚
    色覚1.png

  • 2型色覚
    色覚2.png

1型色覚、2型色覚で特性は異なりますが、大きく見れば赤系統と緑系統の間の区別がつきにくいという特性があります。
また赤と茶、オレンジと黄緑、オレンジと黄色、青と紫、暗めの赤と黒、ピンクと水色なども区別がつきにくい色となります。

高齢者の場合は水晶体の黄変により、視界が黄色がかって見えるようになります。

  • 通常
    fantasy_dragon_blue.png
  • 高齢者で水晶体の黄変が起こっている場合
    fantasy_dragon_yellow.png
    また、青と黒、白と黄色が区別がつきにくい色となります。

※このページの見え方はわかりやすいようにイメージした画像です。実際の見え方には個人差があります。

わかりやすいカラー設計のポイント

  1. 色の明度差をつける
    明度.png

  2. 色の間に境界線を入れる
    境界線.png

  3. 色の彩度差をつける、低彩度色の組み合わせは避ける
    彩度.png

  4. 微妙に色を変えて見やすい色を使う
    微妙な色変更.png
    この場合は紫がかったピンクから黄みのピンクに変更しています。

便利ツール

実際の色覚異常の見え方を確認するためにはツールを使うのが便利です。

color oracle

adobeの校正設定機能

校正設定.png

Chromeの開発者ツール

image.png

さいごに

デザインというとWebやアプリ制作の際だけ使われることのように思えますが、資料作成などの色使いでもカラーユニバーサルデザインを意識すると、全ての人に見やすく優しくなり、より伝わりやすいものになるのではないかと思います。

追記

色だけではなくて文字や記号を用いてわかりやすくする方法もありますが、それはまた別の機会にまとめます。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0