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

[C8]
対話型遺伝的アルゴリズム（IGA）による
色弱者向けのWebページ配色最適化システム
福岡工業大学 情報工学部
情報工学科 種田研究室
樽美 澄香
2009年 2月 20日
はじめに
 「色弱」の定義

視細胞（赤,青,緑)の３種類のうち、
そのうちどれか１つの機能が低下している状態

「大半の色は見分けがつくが、
特定の範囲の色について見分けづらい色覚障害」
背景と目的

現在、だれでも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段階評価

打ち切り世代まで
評価を繰り返す・・・

「元の配色」に最も近い新
配色をデフォルト自動選択

各色の明度・彩度の差の
合計が、最も小さい配色
（配色決定）
△ 実行中の画面
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世代以降から近い値（人間からみたらほぼ一緒
の配色）ばかりになり細かい補正ができない問題点あり

「学習（ルール化） 」及び「自動補正」の実現

動画像への応用
＊ご清聴ありがとうございました＊
樽美 澄香