第5回
配色最適化システムの仮完成と
GAパラメータの調整
情報工学科 05A2301
樽美 澄香
(Tarumi Sumika)
2008年12月 1日
前回までの内容
1.
JavascriptによるDOM操作

ページの配色操作
2. IGAによる配色最適化手順

色相(全般)→明度・彩度(個人)→ルール化
3. 遺伝的アルゴリズム操作の設計 <提案内部処理>

最適な明度・彩度の解の探索(HSV色空間を用いる)
配色最適化システムが完成!!
(現在は、補正は明度・彩度のみ)
配色最適化システムの全体画面

Webページの選択(クリック)
した箇所の配色を、見やすく補
正する。CSSを操作する。

アプリ画面で操作を行う。

現在は、補正したいページに
ボタンを設置することで利用可
Webページ
アプリ
△ 実行中の画面

表示中のページに対応予定

設置法:以下の2行を記述
<script type=“text/javascript“ src=“optapp.js">
<form> <input value=“配色補正ボタン"
onclick="appOpen()" type="button"> </form>
パラメータ設定画面

パラメータ設定画面は
面積節約のため、
折りたたみ式にレイアウト

打ち切り世代
1.
交叉率
2.
突然変異率
3.
突然変異範囲

△ 実行中の画面
1~3の減少率
現配色&新配色の表示
3rd
2nd
ABC
現
在
の
配
色
( 1st )
1色目:文字色
2色目:背景色
3色目:2次背景色

Webページの選択箇所から
解析し表示する
新
し
い
配
色
△ 実行中の画面

色指定されているselector

RGB16進に変換表示
(Webで使われる書式)

新配色はIGA処理後に生成
配色提案(IGA)画面
(配色評価)

5段階の星評価

×(打ち切り
世代数:調整中)
人間が操作しやすいと
いわれる5段階評価

打ち切り世代まで
評価を繰り返す・・・

「元の配色」に最も近い新
配色をデフォルト自動選択

各色の明度・彩度の差の
合計が、最も小さい配色
(配色決定)
△ 実行中の画面
Webページの配色を変更する
(適用する)
配色補正のプレビュー
明度差
△ 実行中の画面

文字色(1色目)と第1背景色(2色目)の明度差の表示機能

W3C(WWW技術標準化推進団体)では、
ウェブサイト設計で、明度差は125以上が望ましいとしている。

明度差は( R×299 + G×587 + B×114 )/1000 で計算。
※
現在は数値表示のみなので、自動選択・判断基準に利用したい。
パラメータの調整&テスト

現在、パラメータの調整(設定)中です。

短期大学部からモニターをお借りして人力実験中。

EIZO社 色覚シミュレーションモニター「FlexScan U」

公式サイト製品情報


http://www.eizo.co.jp/products/u/sx2461w-u/index.html
テスト日程

ゼミ実施日、12月15日(月)or 20日(月)予定

ぜひテストにご協力ください!(お願い)

詳細が決まり次第、後日ご連絡します。
デモのテストデータについて

見づらい配色でCSSを定義

参考:色覚異常-Wikipedia
△見づらい配色
(出典:色覚異常 - Wikipedia)
htmlデータ(配色はCSS定義)
<日本語での名言集>
補正後の色弱シミュレーション結果
補正前の配色
オ
リ
ジ
ナ
ル
見えづらい
補正後の配色
見えやすくなった!
第
一
色
盲

本システムを利用し、色弱者の見え方を実験

Web色弱シミュレータ「Vischeck」(http://vischeck.com/)

パラメータの補正前・補正後の低圧縮jpg画像を利用

私の通常の見え方で感覚的に補正した結果をシミュレートしているため、
今回の実験より、さらに情報を読み取りやすく補正することは可能?
# 今後の予定 #
 研究状況(完了)
 配色提案・補正処理の実装

システムの仮完成!
 GAパラメータの調整中

12月上旬までに完了
 次のステップ
 GAパラメータの調整終了
 複数人によるテスト
(主観評価)

評価方法の調査&検討

評価用紙の作成
参考文献
 色覚異常 – Wikipedia,
http://ja.wikipedia.org/wiki/%E8%89%B2%E8%A6%9A%E
7%95%B0%E5%B8%B8
 W3C, Web Content Accessibility Guidelines 1.0,
http://www.w3.org/TR/WAI-WEBCONTENT/
*ご清聴ありがとうございました*
樽美 澄香
ダウンロード

樽美澄香