[C8]
対話型遺伝的アルゴリズム(IGA)による
色弱者向けのWebページ配色最適化システム
福岡工業大学 情報工学部
情報工学科 種田研究室
樽美 澄香
2009年 2月 20日
はじめに
 「色弱」の定義

視細胞(赤,青,緑)の3種類のうち、
そのうちどれか1つの機能が低下している状態

「大半の色は見分けがつくが、
特定の範囲の色について見分けづらい色覚障害」
背景と目的

現在、だれでもWebページを容易に制作・配信可能

多くの人に情報を伝えるためには、
「バリアフリーな配色」知識が必要
個人が勉強する手間がかかる

i?
従来は、進化的計算を用いた
「制作者好みの配色生成」の研究がされている
閲覧者(今回は色弱者)向けの配色ではない

本来の配色からかけ離れず、色弱者ごとの症状具合にあわせ
よりすばやく読みやすい配色に最適化するシステムの開発!
読みづらい配色のWebページ例
出典:岡部正隆, 伊藤啓, 橋本知子
『ユニバーサルデザインにおける色覚バリアフリーへの提言”』
研究内容
進化的計算による提案
システムの概要
Good
Morning!
 赤緑色弱の例
色情報
(CSS抽出)
の
解析・変更
2.新しい配色の提案一覧から、
ユーザーにとって見やすい配色に
変更する
Good
Good
Morning!
Morning!
Good
Morning!
Good
Morning!
1
1.読みづらいWebページを発見
?
♪
3.進化的計算技法のIGAを用いることで、
よりすばやく、よりユーザーごとの目にあわせた補正を行う
開発言語:JavaScript
IGAによる補正値探索
「明度・彩度」による補正
(高)
 色弱者は「明度・彩度」の差に敏感
 少ない変化量で色を判別できるようになる。
(低)
△明度
△彩度
(明るさ) (鮮やかさ)
 「本来の配色から、なるべくかけ離れない」という
研究の方針に適したパラメータ

感性を反映しやすい「*対話型遺伝的アルゴリズム(IGA)」を用いて
個人にあわせた最適な補正値を探索、明度・彩度を補正。
※
色相(H)明度(L)彩度(S)で色を表すHLS表示系を使用する
*対話型遺伝的アルゴリズム(IGA)
★ 自然淘汰をモデル化・最適解を求める
「遺伝的アルゴリズム(GA)」を基にしている。
IGA
★ IGAは感性を組み込みやすい特徴がある。
母集団の生成
適応度の評価
終了条件
No
Yes
END
※GAの「適応度の評価」には
定式化された関数を用いる
選択
交叉
突然変異
IGAでは
人間による判断で、
「評価」を行う
遺伝子の表現
?
 遺伝子の表現法
1.
バイナリコーティング: 0, 1, X
2.
実数値GA(BLX-α): 1, 2.5, ・・・ , 1000 etc.
IGAでは実数値GAの探索効率が高い


3色配色補正の遺伝子コーディング
3rd
2nd
44
23
78
36
5
17
×9個体
S
L
44% 23%
1st color
S
L
78% 36%
2nd color
S
L
5% 17%
3rd color
彩度S: 0~100%
明度L: 0~100%
( 1st )
遺伝的操作(選択・交叉・突然変異)

選択・交叉


処理が単純で効率的なSimpleGA

ルーレット選択・・・・適応度(評価)に比例した割合で親を選択

エリート保存戦略・・・適応度(評価)の良い個体はそのまま残す

一点交叉
突然変異

非一様突然変異

ランダムな座標で、第1世代はランダムな値に変更し、
世代ごとに変化させる値の幅を狭くし、安定した結果を得る。
配色候補の評価
※IGAでは「ユーザーの感性(判断)」で評価
(配色評価)

5段階の星評価

×(打ち切り
世代数:設定可)
人間が操作しやすいと
いわれる5段階評価

打ち切り世代まで
評価を繰り返す・・・

「元の配色」に最も近い新
配色をデフォルト自動選択

各色の明度・彩度の差の
合計が、最も小さい配色
(配色決定)
△ 実行中の画面
Webページの配色を変更する
(適用する)
実験(主観評価)
1.
男性9名
2.
18パターンの読みづらい配色から、
ユーザーが思う最も見づらい配色を
補正してもらう。
3.
主観評価(アンケート形式)

色弱者の見え方の実現

EIZO社 色覚シミュレーションモニ
ター「FlexScan U」

公式サイト製品情報

△読みづらい配色18パターンをCSSルール化
(参考:色覚異常 - Wikipedia)
http://www.eizo.co.jp/products/u
/sx2461w-u/index.html
静的色弱シミュレーションでの結果
補正前の配色
オ
リ
ジ
ナ
ル
読みづらい
補正後の配色
読みやすくなった!
第
一
色
盲

本システムを利用し、色弱者の見え方を実験

Web色弱シミュレータ「Vischeck」(http://vischeck.com/)

パラメータの補正前・補正後のスクリーンショット(bmp画像)を利用

私の通常の見え方で感覚的に補正した結果をシミュレートしているため、
今回の実験より、さらに情報を読み取りやすく補正することは可能?
補正後の読みやすさ(P型)
4
読みやすさ
&情報取得
※元は同じ配色でも、
補正後の値は異なった
1
読みやすい↑
3
読
み
や 2
す
さ
補正前
1
- 結果 -
読みづらい↓
0
0
1
2
3
4
5
6
7
8
9
被験者ナンバー

補正後
9人全員が、
補正後の読みやすさ(D型)

P型(25%)・D型(75%)ともに、

4
1
読みやすい↑
「読めない/読みづらい」から
3
「読める/読みやすい」に補正

情報取得可能になった
読
み
や 2
す
さ
1
補正後、
情報取得できたか
読みづらい↓
0
0
1
2
3
4
5
被験者ナンバー
6
7
8
9
操作しやすさ

色弱者=コンピュータに馴染み
ないユーザー含む


「操作しやすさ」に配慮する
5
D型
4
P型
結果

「楽」「普通」評価




操作しやすさ
9人中6人 (2/3)
コメント「星評価が楽」
「苦ではない」「面倒」評価

9人中3人 (1/3)

コメント「GUI操作が面倒」
程ほど良い評価が得られたが、
慣れた人にはGUI操作は面倒

操 3
作
し
や
す
さ 2
1
0
0
1
2
3
4
5
6
7
8
9
10
被験者ナンバー
CUI・ショートカット機能
(評価) 4:楽 3:普通 2:苦ではない 1:面倒
まとめ

本研究では進化的計算技法(IGA)を用いた
配色最適化システムを開発した。


個人ごとに読みやすい配色に変更できることがわかった。
今後の課題

GAパラメータの検討

収束が早く、第2世代以降から近い値(人間からみたらほぼ一緒
の配色)ばかりになり細かい補正ができない問題点あり

「学習(ルール化) 」及び「自動補正」の実現

動画像への応用
*ご清聴ありがとうございました*
樽美 澄香
ダウンロード

(IGA)による色弱者向けのWebページ配色最適化システム