第6回
配色最適化システムの実験評価
情報工学科 05A2301
樽美 澄香
(Tarumi Sumika)
2009年 1月 26日
前回までの内容

配色最適化システムの完成(機能の紹介)
1.
JavascriptによるDOM操作

2.
CSSを用いた、ページの配色操作
IGAによる配色最適化

最適な明度・彩度の解の探索(HSV色空間を用いる)
 今回、完成したシステムを主観評価にて実験
配色最適化システムの目的

背景

誰にでも容易にWebページを作成できるようになった。

⇒色弱バリアフリーに配慮されていない
見づらい(情報が読み取れない) Webページが数多く存在する

目的・方針のおさらい

閲覧者側(本システムでは色弱者)から行う配色変更システム

ユーザーの見やすさにあわせた配色補正(主観性)

本来の配色から、なるべくかけ離れない配色候補を選択
実験内容(1)

実験日時


2008年12月15日(月)18:00-19:00
目的

色弱者にとって情報が読み取りづらい「見づらい配色」を、
開発したシステムを用いて、 「見やすい配色」に変更し、
情報が読み取れるようになったかどうか、システムの効果を
実験する(主観評価)

被験者

種田研究室所属の男性9人
実験内容(2)

実験方法
1.
CSSで定義された18パターンの「一般的に見づらい配色」(次スライ
ド参照)の中で、被験者が最も見づらい配色を1パターン選ぶ。
2.
開発したシステムを用いて、
被験者の「見やすい」と思う感覚で、配色を補正する。
3.
主観評価(アンケート形式)を行う。

補正前配色での情報読みやすさ(4段階)

システムの操作性(4段階)

補正後、情報が取得できるようになったか?(2段階)

補正後配色での情報読みやすさ(4段階)
「色弱者の見え方」の実現

市販されている動的「色覚シミュレーションモニター」を用いる

色を変更した際に、瞬時に「色弱者の見え方」を演算するためシステ
ムの操作性に影響しない

色弱者の99%を占める「P型」「D型」(赤緑色盲)設定で実験
25%
75%
0.02%
▲ 色覚用語分類表(参考文献2)
実験データについて

見づらい配色でCSSを定義

参考:色覚異常-Wikipedia
htmlデータ(配色はCSS定義)
<日本語での名言集>
9
組
△見づらい配色
(出典:色覚異常 - Wikipedia)
9組 × 2 (文字-背景反転)
= 18パターン
実験しました
~ご協力ありがとうございました~

2008年12月15日(月)18:00に
本大短期大学部PCルームにて
実験を行った。

使用機器

EIZO社 色覚シミュレーション
モニター「FlexScan U」

公式サイト製品情報

http://www.eizo.co.jp/product
s/u/sx2461w-u/index.html
ー 実 験 結 果 -
補正後の読みやすさ(P型)
4
読みやすさ
&情報取得
※元は同じ配色でも、
補正後の値は異なった
1
読みやすい↑
3
読
み
や 2
す
さ
補正前
1
- 結果 -
読みづらい↓
0
0
1
2
3
4
5
6
7
8
9
被験者ナンバー

補正後
9人全員が、
補正後の読みやすさ(D型)

P型・D型ともに、

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:面倒
自動選択機能の利用

配色自動選択機能

◆自動選択機能の利用回数
新たに提案された配色郡のなかで、
元の配色に最も近い配色を自動選択する機能
利用
不利用

利用状況と考察

12回
(9人・18回中)
最終的な配色候補すべてが見やすい配色とは限らず、
必ずしも「元の配色に近い候補」が見やすいわけではない。

6回
GA設計 or 最終的にユーザーが決定した配色をルール化し、
それを現在の自動選択機能に影響させる仕組みが必要 ?
補正後の明度差

文字色と背景色の明度差は、125以上が望ましい

W3C( WWW技術標準化推進団体)※第5回参照
◆補正後の明度差

所感と考察


必ずしも明度差125以上の配色候補が、
「見やすく、元の印象を崩さない」と
感じる配色ではないようだった。
125~255
6回
62~124
6回
0~61
6回
(9人・18回中)
ユーザーの考える「見やすい」によって・・・
「元のイメージを崩さない(現状)」or「読みやすい(提案する時点
で、125以上で制限をかける)」の2種類のモードを用意し、処理を切
り替えることで対応できる。
まとめ

本研究では進化的計算技法(IGA)を用いた
配色最適化システムを開発した。


個人ごとに読みやすい配色に変更できることがわかった。
今後の課題

GAパラメータの検討

収束が早く、第2世代以降から近い値(人間からみたらほぼ一緒
の配色)ばかりになり細かい補正ができない問題点あり

「学習(ルール化) 」及び「自動補正」の実現

動画像への応用
参考文献
1.
色覚異常 – Wikipedia,
http://ja.wikipedia.org/wiki/%E8%89%B2%E8%A6%9A%
E7%95%B0%E5%B8%B8
2. 色覚バリアフリー HAPPY COLORS
http://www.happycolors.net/
*ご清聴ありがとうございました*
樽美 澄香
ダウンロード

樽美澄香