3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【JavaScript】高齢者の色覚を確認できるツールサイトを作ったわよ

Last updated at Posted at 2024-09-23

2024/9/26追記

本記事の画像は「20歳から見た」相対的な高齢者色覚となっています。
本アプリについて、閲覧者の年齢に基づいた相対画像を出力するように修正しました。

このサイトのお話をしています: https://konbraphat51.github.io/ElderVisionSimulation/

はじめに

User-Friendlyの王、User-Firendlyキングになりたいですよね。

現在卒論で認知症関係のヒューマンコンピューターインタラクションをやっていますが、なんと老化にともなって視界がどんどん"黄ばんでいく"そう

なので、推奨される色使いなどがあります。[参考]

しかし、定性的にこうしろと言われたところで、じゃあ自分がデザインしたインターフェースが高齢者にとって見やすいか、(若年層にとっては)想像しづらいですよね。

作りました

なので、作りました
https://konbraphat51.github.io/ElderVisionSimulation/

レポジトリ: https://github.com/konbraphat51/ElderVisionSimulation?tab=readme-ov-file

image.png
(サンプル画像はWikipedia「自然」から)

適当に黄ばませているのではなく、NHKのリサーチチームの論文をもとに実装しています。
ごく簡単にいうと、加齢による水晶体の黄ばみを数式化して、モニターの光が目に当たった際の水晶体の中の光の通りを計算しています。

実際どうなの

配色サンプル

先ほど引用した「けあさぽ」の配色例を80歳の設定で試してみます。
image.png
画像引用: 今月の特集 介護環境に色彩を活用しよう 第1回 色が人に与える影響とは?

「白黄」は全く識別できないですね。
でも他の配色は(先天性色覚異常と比べて)過剰に神経質になるほど識別困難になるわけでもないという見方もできそうです。

Qiitaで試そう

60歳で試してみます

ライトテーマ
image.png

ダークテーマ
image.png

Qiitaは高齢者フレンドリーな配色をしているとわかりますね。

Gigazine

白黄のUIデザインをしているサイトで試してみましょう。対象は別になんでもいいですが、真っ先にGigazineが浮かんできたので、60歳で試してみましょう。
image.png

白黄UIといっても、文字は黒系統なので、特に利用には問題ありません。しかし、せっかくの「最新ニュース40件」のボックスが見えづらくなっていますね。

計算の仕組み

先ほどのNHKの池田, 成田(2008)の論文の数式とデータを使ったとしか言いようがありませんが、さらっとだけ。

それぞれのRGB値について、下記3つの値(「波長」の関数)の積を波長で積分します。(上記論文式(1))

  • n歳の水晶体分光分布特性 →式(4)
    • 簡単に言うと、目の水晶体の色合い
  • 画面の分光分布特性 →式(5)に$\lambda$と$R_0$らを代入
    • 簡単に言うと、画面の色合い
  • 目の分光感度特性 →式(2)に、等色関数データを代入
    • 簡単に言うと、色に対する神経の感度

このうち、年齢によって変わるのが一番上、水晶体の色合いの部分です。
Pokornyらの研究 (1987)によって、年齢とともにどう変化されるのかが数式化されています。(式(3))
こいつのせいで黄色くなるというわけですね。

3
1
7

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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?