福岡工業大学 情報工学部 情報工学科 種田研究室 情報工学科 種田研究室 樽美 澄香 [C8] 対話型遺伝的アルゴリズム（ IGA ）による 色弱者向けの Web ページ配色最適化システム 2009 年 2 月 20 日

はじめに 「色弱」 「色弱」の定義 視細胞（赤, 青, 緑 ) の３種類のうち、 そのうちどれか１つの機能が低下している状態 「大半の色は見分けがつくが、 特定の範囲の色について見分けづらい色覚障害」

背景と目的 現在、だれでも Web ページを容易に制作・配信可能 多くの人に情報を伝えるためには、 「バリアフリーな配色」知識が必要 個人が勉強する手間がかかる 従来は、進化的計算を用いた 「制作者好みの配色生成」の研究がされている 閲覧者（今回は色弱者）向けの配色ではない 本来の配色からかけ離れず、色弱者ごとの症状具合にあわせ よりすばやく読みやすい配色に最適化するシステムの開発！ i ?

読みづらい配色の Web ページ例 出典：岡部正隆, 伊藤啓, 橋本知子 『ユニバーサルデザインにおける色覚バリアフリーへの 提言 ” 』

研 究 内 容研 究 内 容

Good Morning! システムの概要 赤緑色弱の例 Good Morning! ? 1 1 ．読みづらい Web ページを発 見 2 Good Morning! 2 ．新しい配色の提案一覧から、 ユーザーにとって見やすい配色 に変更する 3 ．進化的計算技法の IGA を用いることで、 よりすばやく、よりユーザーごとの目にあわせた補正を 行う ♪ 進化的計算による提 案 色情報 （ CSS 抽出 ) の 解析・変更 Good Morning! 開発言語： JavaScript

IGA による補正値探索

「明度・彩度」による補正 色弱者は「明度・彩度」の差に敏感 色弱者は「明度・彩度」の差に敏感 少ない変化量で色を判別できるようになる。 「本来の配色から、なるべくかけ離れない」という 研究の方針に適したパラメータ 感性を反映しやすい「 * 対話型遺伝的アルゴリズム (IGA) 」を用いて個 人にあわせた最適な補正値を探索、明度･彩度を補正。 ※ 色相 (H) 明度 (L) 彩度 (S) で色を表す HLS 表示系を使用する △明度 （明る さ） △彩度 （鮮やか さ） （高 ） （低 ）

＊対話型遺伝的アルゴリズム（ IGA ） IGA 適応度の評価 母集団の生成 選択 交叉 終了条件 END Yes No 突然変異 IGA では 人間による判断 で、「評価」を 行う ※ GA の「適応度の評価」に は 定式化された関数を用い る ★ 自然淘汰をモデル化・最適解を求める 「遺伝的アルゴリズム (GA) 」を基にしてい る。 ★ IGA は感性を組み込みやすい特徴がある。

遺伝子の表現 遺伝子の表現法 1. バイナリコーティング： 0, 1, X 2. 実数値 GA （ BLX-α ）： 1, 2.5, ･･･, 1000 etc. IGA では実数値 GA の探索効率が高い 3 色配色補正の遺伝子コーディング S 44% L 23% 1st color S 78% L 36% 2nd color3rd color S 5% L 17% 彩度 S: 0~100% 明度 L: 0~100% 3rd 2nd ( 1st ) ×9 個体 ?

選択・交叉 処理が単純で効率的な SimpleGA ルーレット選択・・・・適応度（評価）に比例した割合で親を選 択 エリート保存戦略・・・適応度（評価）の良い個体はそのまま残 す 一点交叉 突然変異 非一様突然変異 ランダムな座標で、第 1 世代はランダムな値に変更し、 世代ごとに変化させる値の幅を狭くし、安定した結果を得る。 遺伝的操作（選択・交叉・突然変異）

配色候補の評価 ５段階の星評価 人間が操作しやすいと いわれる 5 段階評価 打ち切り世代まで 評価を繰り返す・・・ 「元の配色」に最も近い新 配色をデフォルト自動選択 各色の明度・彩度の差の 合計が、最も小さい配色 △ 実行中の画面 × （打ち切り 世代数：設定可） （配色評価） Web ページの配色を変更する （適用する） ５段階の星評価 人間が操作しやすいと いわれる 5 段階評価 打ち切り世代まで 評価を繰り返す・・・ ※ IGA では「ユーザーの感性（判断）」で評 価 （配色決定）

実験（主観評価） 1. 男性 9 名 パターンの読みづらい配色から、 ユーザーが思う最も見づらい配色を 補正してもらう。 3. 主観評価（アンケート形式） 色弱者の見え方の実現 EIZO 社 色覚シミュレーションモニ ター「 FlexScan U 」 公式サイト製品情報 /sx2461w-u/index.html /sx2461w-u/index.html △読みづらい配色 18 パターンを CSS ルール化 （参考：色覚異常 - Wikipedia ）

静的色弱シミュレーションでの結果 本システムを利用し、色弱者の見え方を実験 Web 色弱シミュレータ「 Vischeck 」 ( パラメータの補正前・補正後のスクリーンショット（ bmp 画像）を利用 私の通常の見え方で感覚的に補正した結果をシミュレートしているため、 今回の実験より、さらに情報を読み取りやすく補正することは可能？ 補正前の配色補正後の配色 読みづらい読みやすくなった !

読みやすさ ＆情報取得 補正前 補正後 読みやすい ↑ 読みづらい ↓ 読みやすい ↑ 読みづらい ↓ 補正後、 情報取得できたか 9 人全員が、 P 型 (25%) ・ D 型 (75%) ともに、 「読めない / 読みづらい」から 「読める / 読みやすい」に補正 情報取得可能になった － 結果 － ※元は同じ配色でも、 補正後の値は異なった

操作しやすさ 色弱者＝コンピュータに馴染み ないユーザー含む 「操作しやすさ」に配慮する 結果 「楽」「普通」評価 9 人中 6 人 (2/3) コメント「星評価が楽」 「苦ではない」「面倒」評価 9 人中 3 人 (1/3) コメント「 GUI 操作が面倒」 程ほど良い評価が得られたが、 慣れた人には GUI 操作は面倒 CUI ・ショートカット機能 （評価） 4: 楽 3: 普通 2: 苦ではない 1: 面倒

まとめ 本研究では進化的計算技法（ IGA ）を用いた 配色最適化システムを開発した。 個人ごとに読みやすい配色に変更できることがわかった。 今後の課題 GA パラメータの検討 収束が早く、第 2 世代以降から近い値（人間からみたらほぼ 一緒の配色）ばかりになり細かい補正ができない問題点あり 「学習（ルール化） 」及び「自動補正」の実現 動画像への応用

＊ご清聴ありがとうございました＊ 樽美 澄香