Diapositive 1

第6回
配色最適化システムの実験評価
情報工学科 05A2301
樽美澄香
（Tarumi Sumika)
2009年 1月 26日
前回までの内容

配色最適化システムの完成（機能の紹介）
1.
JavascriptによるDOM操作

2.
CSSを用いた、ページの配色操作
IGAによる配色最適化

最適な明度・彩度の解の探索（HSV色空間を用いる）
 今回、完成したシステムを主観評価にて実験
配色最適化システムの目的

背景

誰にでも容易にWebページを作成できるようになった。

⇒色弱バリアフリーに配慮されていない
見づらい（情報が読み取れない） Webページが数多く存在する

目的・方針のおさらい

閲覧者側（本システムでは色弱者）から行う配色変更システム

ユーザーの見やすさにあわせた配色補正（主観性）

本来の配色から、なるべくかけ離れない配色候補を選択
実験内容（１）

実験日時


2008年12月15日（月）18:00-19:00
目的

色弱者にとって情報が読み取りづらい「見づらい配色」を、
開発したシステムを用いて、「見やすい配色」に変更し、
情報が読み取れるようになったかどうか、システムの効果を
実験する（主観評価）

被験者

種田研究室所属の男性9人
実験内容（２）

実験方法
1.
CSSで定義された18パターンの「一般的に見づらい配色」（次スライ
ド参照）の中で、被験者が最も見づらい配色を1パターン選ぶ。
2.
開発したシステムを用いて、
被験者の「見やすい」と思う感覚で、配色を補正する。
3.
主観評価（アンケート形式）を行う。

補正前配色での情報読みやすさ（４段階）

システムの操作性（４段階）

補正後、情報が取得できるようになったか？（２段階）

補正後配色での情報読みやすさ（４段階）
「色弱者の見え方」の実現

市販されている動的「色覚シミュレーションモニター」を用いる

色を変更した際に、瞬時に「色弱者の見え方」を演算するためシステ
ムの操作性に影響しない

色弱者の99%を占める「P型」「D型」（赤緑色盲）設定で実験
25%
75%
0.02%
▲ 色覚用語分類表（参考文献２）
実験データについて

見づらい配色でCSSを定義

参考：色覚異常-Wikipedia
htmlデータ（配色はCSS定義）
＜日本語での名言集＞
９
組
△見づらい配色
（出典：色覚異常 - 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/
＊ご清聴ありがとうございました＊
樽美澄香

Download Report