ABML2011

O3-2

2011年11月3日-5日 東京（芝浦工業大学）

Web アクセシビリティを考慮した文字色と背景色の視認性予測-明度差および色差を用いた検討Prediction of visibility between font color and background color considering Web accessibility- Examination of visibility using luminance and color difference ○ 齋藤大輔（芝浦工業大学）
東斎藤恵一（国際医療福祉大学）

吉彦，犬井正男（東京工芸大学）

納富一宏（神奈川工科大学）

斎藤正男（東京大学名誉教授）

Daisuke SAITO, Shibaura Institute of Technology
Keiichi SAITO, International University of Health and Welfare
Kazuhiro NOTOMI, Kanagawa Institute of Technology
Yoshihiko AZUMA and Masao INUI, Tokyo Polytechnic University
Masao SAITO, Professor emeritus at Tokyo University
Abstract: The approach of the Web accessibility is necessary for all the people to be able to use websites. As the visualelements are very important factors in the website, in our previous study, the visibilities of young adults, the elderly anddichromatic vision persons were evaluated using the simulation filters. In this report, we made visibility prediction
formula by the multiple regression analysis. Objective variable was assumed to be visibility score, and explanatory
variables were assumed to be a color brightness difference and color difference. And the visibility of 215 web-safe colors
was determined using the obtained expression. As the results, all group's visibility prediction formula were highprecision. Moreover, visibility judgment was different between each group when color brightness difference was in therange from 130 to 166. Therefore, it was shown that all group's visibility is judged high when the range for color
brightness difference is 166 or more.
Key Words: Web accessibility, Visibility prediction, Color brightness difference, Color difference,
1. はじめに高度情報社会となり，日々情報技術の開発が進んでいる．
中でもインターネット技術の進歩は目覚ましく，PC のみではなく，様々な携帯端末（スマートフォン，PDA，iPad，タブレット PC など）が市販されており，普段の生活の中にインターネットが入り込んでいる．我が国のインターネ
ットの人口普及率は 78.2 %となった(1)．さらに，我が国では，急速な少子高齢化に伴い，全人口に対する 65 歳以上の高齢者の割合は，2055 年で 40.5 %になると予測されている(2)．また，色覚障碍者は，男性の 20 人に 1 人，女性の 500人に 1 人と，かなり高い割合で存在し，総数で 300 万人以
上，その内訳は P 型（1 型 2 色覚）が約 25 %，D 型（2 型2 色覚）が約 75 %および T 型（3 型 2 色覚）が約 0.02 %といわれている (3-5)．高齢者や障碍者のインターネット利用は，従来の生活から自立し，活動範囲を広げる可能性をもっていることから，今後の発展が期待される．
現在では， W3C/WAI(World Wide Web Consortium/ WebAccessibility Initiative)や JIS 規格により Web アクセシビリ
ティガイドラインが定められている．その中で視認性に関しては“背景色と前景色に十分なコントラストをつけ見やすくすること (6, 7)”と示されているだけである．これでは，Web コンテンツ制作者が現場で活用できるデータとはいえず， Web コンテンツ制作に有用となる人間の視覚特性に関するデータが切望されている．
これまでに，我々は高齢者および障碍者の視認性特性を評価するために，健常若年者に模擬フィルタ（高齢者水晶体疑似メガネおよび色弱模擬フィルタ）を適用し一対比較により視認性を得点化し，健常若年者，模擬高齢者および模擬色覚障碍者の視認性得点と色差（ΔE00(8， 9)）の関係にO3-2-1より評価を行った．その結果，白色背景においてはどの群においてもΔE00 が大きくなると，視認性が高くなる傾向お
よび文字色に G 値を含む場合には注意を払う必要があることを報告した (10)．この報告は一昨年の大会で報告した内容であるが，本報告でデータが必要となることから，「3. 模擬フィルタを用いた視認性評価」の章で詳細を示す．そこ
で今年度の報告では，W3C/WAI において定義されているRGB 値から算出できる明度差および色差を算出し，目的変数を一対比較により得た視認性得点，算出した明度差および色差を説明変数として視認性予測式の算出を行った．さらに，得られた視認性算出式を用いて背景色（白色）を除いた Web セーフから 215 色の視認性予測を行った．
2. 模擬フィルタ2-1 高齢者水晶体疑似メガネ
高齢者の見え方を模擬することができるフィルタとして，ジオマテック株式会社より高齢者水晶体疑似フィルタが市販されている．本研究ではこのフィルタを用いた．このフィルタは，水晶体加齢モデル（Two-factor モデル）に基づき，目に疾患のない 75 歳の平均的な水晶体分光透過率を目に疾患のない 32 歳の平均的な水晶体分光透過率で割ったものに近い分光透過率となっている．32 歳以外の年齢の者に適応する場合には，Table 1 に示すような対応関係のフィ
Table 1 Corresponding age of simulationAge of
young
adultsAge ofelderlyperson202428323438414448727374757677787980ルタとして使用できる(11)2-2 色弱模擬フィルタ
色覚障碍者の見え方を模擬することができるフィルタとして，伊藤光学工業株式会社より色弱模擬フィルタ（Variantor）が市販されている．本研究ではこのフィルタを用いた．このフィルタは，L 錐体のないまたは機能しな
い P 型強度と M 錐体のないまたは機能しない D 型強度の両者において見分けにくい配色を、一度に検出できるように設計されている(12)．
3. 模擬フィルタを用いた視認性評価
被験者（健常若年者 14 名（平均年齢 22.9 歳））には，インフォームド・コンセントを得た上で実験に参加してもらった後，実験に参加してもらった．実験は，外部光の影響を排除するために，暗室内で行った．この暗室内に 21
イ ン チ 液 晶 モ ニ タ （ 株 式 会 社 ナ ナ オ 製 EIZO ColorEdge
CG211）を設置し，実験ブース内に取り付けた照明により画面上の照度が 100 lx となるように調整した．モニタには，MS ゴシック 11 pt および間隔を 10 mm の 2 つの左右対称文字列（全本中王木日）を縦表示でモニタにフルスクリーンで呈示した．左右対称文字を用いることで文字による擾乱を排除した．被験者には座位（視距離 800 mm）にてこの刺激を注視させ，より見やすい文字列をマウスの左右ボタンを用いて判定させた．選択時の時間制限は設けなかった．背景色は大手検索サイトや官公庁などの背景色に多く用いられる白色（＃FFFFFF：本実験では 16 進 RGB 表記を用い#RRGGBB で示される．各色の値は，00～FF の値をとり，10 進で示すと 0～255 である），文字色は輝度が異なり#CC，#99，#00（16 進数表記：10 進数表記では 204，153，0）を基準とする無彩色 3 色および 6 つの基準色（赤，緑，青，シアン，マゼンタ，黄）ごとに 3 段階の輝度（#FF，#CC，#99）18 色の合計 21 色の Web セーフカラーを用いた．
呈示する文字の組合せは，左右の呈示位置の違いも考慮した 420（=21×20）組で，刺激の呈示順序は無作為とした．
この条件下で，健常若年者，健常若年者に高齢者水晶体疑似メガネを装着した模擬高齢者および健常若年者に色弱模擬フィルタを装着した模擬色覚障碍者の 3 条件について同一の実験を行った．暗室内で眼鏡型のフィルタを用いているが，刺激部の照度が一定に保たれていることから，暗室での影響はないと考える．この 3 条件で得られた一対比較の結果にサーストンの方法を用いて得点化し，視認性得点とΔE00 との関係を Fig 1 に示す．Fig. 1 は，(a)に若年者，(b)に模擬高齢者および(c)に模擬色覚障碍者の視認性得点とΔE00 の関係を示した．縦軸は視認性得点を示し，得点が高いほど視認性が高いことを示す．横軸はΔE00 で，値が大きいほど色差が大きいことを示す．さらに，図中に示された“#******”という文字は文字色を示す．
Fig. 1 によると，どの群においてもΔE00 が大きくなると，視認性が高くなる傾向を示した．また，全ての群においてΔE00≧42 の場合には，視認性得点が全ての群で正の値を示していることから，ΔE00 が 42 以上の値となる場合に若年者，模擬高齢者および模擬色覚障碍者の全ての群で視認性が高いと判定できる．この視認性が高いと判定された範囲の文字色は，黒，青系，赤系およびマゼンタ系色であり，これらの文字色は白色背景の場合には全ての群において有効であることが示された．また，これらの文字色は，RGB値の G 値を含まない色であったことから，白色背景においては文字色に G 値を含む文字色を用いる場合には注意を払
O3-2-2(a) Young adults(b) Simulated elderly person(c) Simulated color amblyopia
Fig. 1 The relationship between the ΔE00 and the scoreう必要があることがわかった(10)．
4. 明度差および色差の算出
本研究で用いた明度差および色差は，W3C/WAI において定義されているものであり，R，G および B 値を用いて次式で表すことができる．
明度差 =299 × Rb − R f + 587 × Gb − G f + 114 × Bb − B f
1000

色差 = Rb − R f + Gb − G f + Bb − B f

(1)
(2)

ただし，Rb，Gb および Bb はそれぞれ背景色の R，G 及び B
値，Rf，Gf および Bf はそれぞれ文字色の R，G および B 値を示す．本実験においては，一般的に色指定は 16 進数で表わされるが， (1) および (2) 式を用いて計算する場合は， 10進数に変換して計算を行った． W3C/WAI では (1)式により求められた明度差が 125 以上かつ（2）式によって求めた色差が 500 以上であれば視認性が高い組合せと判定している．
本研究で用いた背景色と文字色の明度差および色差を算出し，視認性得点とともに Table 2 にまとめた．

Table 2 Visibility score and calculated color brightness difference and color difference
Font color#000000#000099#0000CC#0000FF#009900#009999#00CC00#00CCCC#00FF00#00FFFF#990000#990099#999900#999999#CC0000#CC00CC#CCCC00#CCCCCC#FF0000#FF00FF#FFFF00

Young adults
2.43
2.23
2.57
2.450.772-0.0271-0.627
-1.70
-1.60
-2.15
1.82
1.18
-1.46
-1.91
1.83
1.24
-2.44
-3.44
1.77
0.640
-3.84

Visibility score
Simulatedelderly person
2.29
2.09
2.502
2.50
0.810
0.147
-0.578-1.06-0.931
-1.68
1.57
0.929
-1.35
-1.83
1.82
0.943
-2.89
-3.60
1.53
0.316
-3.77

Simulatedcolor amblyopia
2.47
2.10
2.33
2.38
-0.544-0.770
-1.54
-2.47
-2.39
-3.78
2.25
1.93
-0.589
-1.22
2.05
1.81
-2.04
-3.02
1.98
1.52
-2.87

Table 2 によると， W3C/WAI で視認性が高いと判定している色が実際には視認性が高いと判定されていない結果であった． W3C/WAI での色差は非常に厳しい条件であり，IBM では(2)式で算出した色差が 400 以上で視認性が高いと判定しているが，この条件を採用しても一対比較で得た視認性得点とは一致しなかった．したがって，実際の視認性特性に近い視認性判定が行える判定方法を検討する必要がある．我々は，実際の視認性特性を反映した視認性判定が行えるように，重回帰分析を用いて視認性予測式の算出を試みた．
5. 明度差および色差を用いた視認性予測式の算出
Table 2 に示した健常若年者，模擬高齢者および模擬色覚
障碍者の視認性得点，明度差および色差をもとに，重回帰分析を用いて視認性予測式の算出を試みた．重回帰分析の目的変数を視認性予測得点（ S），説明変数を明度差（ L）および色差（E）とした．したがって，視認性予測得点（S）は次式で表せる．
S＝ aL ＋ bE ＋ c(3)ただし，a および b はそれぞれ L および E の回帰係数で，cは定数項である．
Table 2 に示した視認性得点と明度差および色差を用いて健常若年者，模擬高齢者および模擬色覚障碍者の回帰係数および定数項を算出した．その結果，健常若年者，模擬高齢者および模擬色覚障碍者の視認性予測得点をそれぞれSY， SE および SC とすると視認性予測式は次式の通りとなった．
SY＝ 0.0347L－0.00161E－4.51
SE＝ 0.0314L－0.000643E－ 4.44
SC＝ 0.0406L－0.00478E－3.97

Color brightness
difference

Color difference

255
238
232
226
165
147
135
112
105
76.2
209
192
119
102
194
171
74.3
51.0
179
150
29.1

765
612
561
510
612
459
561
357
510
255612459459306561357357153510255
255

られた視認性予測式の精度を確認するため (4) ～ (6) 式を用いて実測値の視認性予測得点を算出し，実測値との正答率（実測値と同一の判定数／配色数）により比較した．その結果，健常若年者，模擬高齢者および模擬色覚障碍者の予測の正答率はそれぞれ 1.00，0.95，1.00 であり，模擬高齢者の視認性予測が一組異なった以外はすべて同一の判定であり，高精度に視認性が予測できることを確認した．また，得られた(4)～(6)についての偏相関係数をみると，健常若年者，模擬高齢者および模擬色覚障碍者の明度差はそれぞれ0.927，0.940 および 0.898，色差はそれぞれ-0.345， -0.135および-0.499 であった．このことから，明度差の関与が強い傾向であり，色差の影響は模擬色覚障碍者，健常若年者，模擬高齢者の順で関与が強い傾向であった．模擬色覚障碍
者については色差の影響が強くなるのはとうぜんの傾向であるが，健常若年者より模擬高齢者で色差の影響が小さくなる傾向は，実際に高齢者を用いた実験を行った際に若年者より高齢者の方が輝度コントラストの影響が強くなり色度の影響が小さくなっていた []ことを反映しているものと考えられ，今回得た視認性予測式が実際の視覚特性をよく反映していると考える．
6. 明度差および色差を用いた視認性予測算出した (4) ～ (6) の視認性予測式を用いて背景色（白：#FFFFFF）を除いた Web セーフカラー215 色を文字色としたときの視認性判定を行った．Web セーフカラーは，RGBがそれぞれ 16 進数表記で 00，33，66，99，CC および FFの組合せで表される 216 色の色である．Web セーフカラー
全色について 16 進数から 10 進数に変換（00＝0，33＝ 51，66＝102，99＝ 153，CC＝204 および FF＝255）し，これらの値を用いて視認性予測得点を算出し，視認性判定を行った．
(4)～ (6)の視認性予測式を用いて視認性得点とΔE00 の関係を Fig. 2 に示す． Fig. 2 の横軸はΔE00 を示し，値が大きくなるにしたがって色差が大きくなることを示す．縦軸は視認性予測式から算出した視認性予測得点を示し，値が大(4)(5)(6)(4) ～ (6) 式は予測得点が大きいほど視認性が高いことを意味し，正の値となるものを視認性の高い配色，負の値となるものを視認性の低い配色と判定する．また，本手法で得O3-2-3

配慮した Web サイト作成を行えるものと考える．

(a) Young adults(b) Simulated elderly person(c) Simulated color amblyopia
Fig. 2 The relationship between the ΔE00 and the score

きいほど視認性が高いことを示す．また，視認性得点が正の値をとったものを視認性が高い文字色，視認性得点が負の値をとったものを視認性が低い文字色と判定した．
Fig. 2 によると，全体的にΔE00 が大きくなると視認性が高くなる傾向であった．詳細にみると，模擬高齢者と模擬色覚障碍者の傾向は非常に似ていたが，健常若年者のみΔE00 が大きくなるにつれて予測得点が高くなる傾向がみられた．
また，健常若年者，模擬高齢者および模擬色覚障碍者で視認性判定が異なった文字色は 27 色あった．特徴的であったのは，背景色と文字色の明度差が 130～149.5 の範囲にある 23 色が全てで視認性判定が異なっていた．それ以外の 4色は明度差が 149.5～166 の範囲に含まれる 20 色の中に含まれていた．このことから，明度差が 130～166 を視認性判定が異なる範囲と考えるグレーゾーンと指定することができる．
以上のことから，白色背景においては，背景色と文字色の明度差を 166 以上とすることで Web アクセシビリティを

7. おわりに
健常若年者，模擬高齢者および模擬色覚障碍者の視認性評価実験の結果をもとに，視認性予測得点を目的変数，RGB 値を用いて算出した明度差および色差を説明変数とした重回帰分析により視認性予測式を求めた．その結果，非常に精度が高い視認性予測式を求めることができた．
さらに，得られた視認性予測式を用いて白色背景において白色以外の文字色とした Web セーフカラー215 色を文字色としたときの視認性判定を試みた．視認性判定では，ΔE00 が大きくなると視認性が高くなる傾向が得られ，明度差が 130～166 の範囲が色覚特性により視認性判定が異なる範囲であることが示された．
以上のことから，白色背景においては背景色と文字色の明度差を 166 以上とすることで今回検討した色覚特性の違いに関係なく視認性が高い配色となることが示され， Webアクセシビリティを配慮したデザインを行えるものと考える．
参考文献(1) 総務省，情報通信白書平成 21年度版，ぎょうせい，p.
186，2011(2) 厚生労働省，厚生労働白書平成21年度版，ぎょうせい，
p. 24，2011(3) 岡部正隆，伊藤啓，色覚の多様性と色覚バリアフリーなプレゼンテーション（全3回）第1回 色覚の原理と色盲のメカニズム，細胞工学，Vol. 21, No. 7, pp. 733-745，
2002(4) 岡部正隆，伊藤啓，色覚の多様性と色覚バリアフリーなプレゼンテーション（全3回）第2回 色覚が変化すると，どのように色が見えるのか？，細胞工学，Vol. 21,
No. 8, pp. 909-930，2002(5) 岡部正隆，伊藤啓，色覚の多様性と色覚バリアフリーなプレゼンテーション（全3回）第3回 すべての人に見やすくするためには，どのように配慮すればよいか，細胞工学， Vol. 21，No. 8，pp. 1080-1104， 2002
(6) M. G. Paciello，Web Accessibility for People withDisabilities， CMP Books，pp. 47-68，2000(7) JIS X 8341-3 高齢者・障害者等配慮設計指針 -情報通
信における機械，ソフトウエア及びサービス - 第 3部：
ウェブコンテンツ，pp 11-14，2004(8) CIE, Improvement to industrial color difference evaluation,
CIE publication No. 142-2001(9) G. Sharma, W. Wu, E. N. Dalal, The CIEDE2000
color-difference formula: Implementation notes,
supplementary test data, and mathematical observations,
Color research and application, Vol. 30, No. 1, pp. 21-30,
2005(10) 齋藤大輔, 斎藤恵一, 納富一宏, 斎藤正男, 東吉彦, 犬井正男, 模擬フィルタを用いた高齢者および色覚障碍
者の視認性評価, バイオメディカル・ファジィ・シス
テム学会誌, Vol. 11, No. 2, pp. 73-78 (2009)(11) 岡嶋克典, 吉田博, 氏原彰, 輝度コントラストの加齢変化に基づく高齢者の色視認性評価法：計算シミュレーションと高齢者水晶体疑似フィルタ, 日本色彩学会
誌, Vol. 24, No. 3, pp. 164-170 (2000)(12) 宮澤佳苗, 中内茂樹, 篠森敬三, カラーユニバーサル
デザインツールとしての色弱模擬フィルタ, 日本色彩学会誌, Vol. 32, No. 1, pp. 31-36 (2008)
O3-2-4