心身科学 第１巻第１号（71–77）（2009）〈資料〉

文字色と背景色の組み合わせに対する視認性の分析──大規模データ収集の一時報告──
佐部利

真吾＊

最尤非対称多次元尺度構成法を用いた先行研究によって，文字色と背景色の組み合わせに対する視認性の対称部は，その大部分が次元ごとに伸縮された YUV 色空間上の布置に基づき，またその歪対称部については比較的小さいことが示されている．ただし，これらの知見は基本的な８色に対するデータに基づいており，より多くの色数に対するデータの検討が必要である．そこで本研究では，大規模データ収集の一時報告として，先行研究とは異なる６色間の部分的な組み合わせに対するデータを収集し，最尤対称多次元尺度構成法により分析して，その結果を先行研究の知見の点から検討した．
キーワード：color scheme, color space, maximum likelihood multidimensional scaling, visibilityⅠ

問の形で反映されていると仮定して，対象を多次元空間

題

Web や広告物などの様々なデザインにおいて，文字色と背景色の組み合わせは視認性を確保する上で重内に埋め込む手法の総称である．佐部利は，赤（standard
RGB (sRGB) =255, 0, 0），黄色（255, 255, 0），緑（0, 255,0），シアン（0, 255, 255），青（0, 0, 255），マゼンタ（255,0, 255），白（255, 255, 255），黒（0, 0, 0）の８色の中

要 な 要 素 で あ る．Web デ ザ イ ン の 分 野 で は，World
Wide Web Consortium（W3C）（2000）が視認性の測度から文字と背景が配色された文字列を被験者に提示として文字色と背景色の “明度差” と “色差” の測定方し，その見やすさを５段階で評定させた．そして，こ式の試案を示している．また文字色と背景色の視認性について心理学的実験により検討した研究としては，のデータに対し，データの非対称性を許す “非対称”
MDS の一つである ASYMMAXSCAL（Saburi & Chino,鎧沢・井上（1983），吉田・長谷川・安田・福田・長2008）を適用した．この方法は Takane（1981）によ田（1986），槙・田中・留目（2005）等がある．これらの研究では，概ね文字色と背景色の輝度差が視認性を高めることを示している．また Notomi, Hiramatsu,Saito, & Saito（2003）と納富・平松・斎藤（2004）は，一対比較法による視認性の測定を行い，自己組織化マる対称 MDS に対する最尤的方法である MAXSCAL を非対称 MDS に拡張したものである．この適用の結果，データの対称性は概ね棄却され，AIC（Akaike, 1973）の比較により Okada & Imaizumi（1987）によるモデル

ップを用いて未知の文字色と背景色の組み合わせに対（OI モデル）の４次元モデルが最適モデルとなった．
ここで，背景が色 i で文字が色 j の組み合わせに対すする判断の予測を試みている．

る見やすさを OI モデルではこれらの研究は各種多変量解析を用いて配色と視認

g i j =d i j − r i +r j,性についての基礎的な資料を提供するものの，視認性の現象の記述に留まっている．
そこで佐部利（2008）は，多次元尺度構成法（Multidimensional Scaling: MDS）を(1)と表現した．ここで d i j は色 i と色 j 間のユークリッ
ド距離，r i は色 i に付随する円（または球，超球）の半用いて，視認性の潜在的な構造を探った．ここで MDS径である．佐部利はこの４次元 OI モデルの布置といとは，対象間の距離が観測された（非）類似度に何らかずれも３次元の各種色空間上の布置をプロクラステス＊愛知学院大学心身科学部心理学科（連絡先）〒 470–0195 愛知県日進市岩崎町阿良池 12

E-mail: saburi@dpc.agu.ac.jp

─ 71 ─佐部利真吾

図１：先行研究で得られた最適モデルの布置（左：1–2–3 次元布置，右：1–2–4 次元布置）と付随する超球（佐部利，2008，p. 199，図３）．1–2–3 次元布置が図２に示した次元別に伸縮された YUV 色空間上の布置に近づくよう直交回転されている．図中の “green” は sRGB 表色系の（R=0, G=255, B=0）の色を示す．

回転により比較した．この際，Mooijaart & Commandeurした．

（1990）による重み付プロクラステス問題の解法を利

佐部利（2008）は，しかし，基本的な８色を扱って用した交互最小二乗法により，色空間の各次元の自由おり，十分な色数とはいえない．佐部利の結果が汎な伸縮を許す回転を施した．その結果，４次元の最適モ デ ル 中 の ３ 次 元 布 置 は Y：U：V ＝ 1.744：0.452：

用的なものであるかを確かめるには色数を増やす必0.804の比で伸縮された YUV 色空間上の布置に最も適合した．図１に最適モデルの布置を，図２に伸縮された YUV 色空間上の布置を，それぞれ示す．ここで，YUV 色空間は，カラーテレビの映像信号に用いられ要があるが，ASYMMAXSCAL を適用する都合上，色数 を 増 や す と 膨 大 な 被 験 者 数 を 要 す る． こ れ は，ASYMMAXSCAL が各評定判断の独立性を仮定しているために，各被験者はただ一つの組み合わせのみ判断る他，画像データの圧縮技術にも利用されている色空す る と い う 単 一 判 断 サ ン プ リ ン グ（single-judgmentsampling）（Bock & Jones, 1968）によりデータを収集間で，そのＹ軸は輝度信号を表しており，RGB 表色するためである．そのため，長期計画によりデータを系からＹ値を得るには次の変換式を用いる：収集する必要がある．本研究は，この大規模データ収Y i = 0.299R i + 0.587G i + 0.114B i.

(2)

集の一時報告として，今回追加収集したデータを分析し，その結果を佐部利の知見の点から検討する．

ここで R i，G i，B i はそれぞれ，色 i の RGB 表色系における R 値，Ｇ値，Ｂ値を示す．(2) 式は，W3C（2000）

Ⅱ方法が提案した明度の算出式と同じである．したがって，佐部利の結果は W3C の試案の妥当性を一部確認しているといえる．また，YUV 色空間の U 軸，V 軸はそ１

刺激材料

れぞれ，輝度信号と青成分との差分信号，輝度信号と本研究では，maroon（sRGB=128, 0, 0），purple（128,0, 128），green（0, 128, 0），olive（128, 128, 0），navy（0,赤成分との差分信号を表す．佐部利は，この結果とヒ0, 128），teal（0, 128, 128）の６色を取り上げた．ここトの色覚情報処理との関連を指摘している．また残りで，本研究における green（0, 128, 0）と図１，図２中のgreen（0, 255, 0）とは異なることに注意する．混乱を避の次元では，赤，マゼンタ，緑，シアンがその他の色と対峙しており，これらの色群間の相性の良さを示した．歪対称性については全体として小さいものの，そけるため，これ以降は sRGB が（0, 255, 0）の色を “lime”と 呼 ぶ こ と に す る．Y：U：V ＝ 1.744：0.452：0.804のの中でマゼンタと青の半径が他の色よりも大きく，こ比で伸縮された YUV 色空間内における，本研究で扱れらの色が背景色よりも文字色に適していることを示った６色と佐部利（2008）が扱った８色との位置関係

─ 72 ─文字色と背景色の組み合わせに対する視認性の分析

図３：Y：U：V ＝ 1.744：0.452：0.804 の 比 で 伸 縮 さ れ た
YUV 色空間内での，本研究で扱った６色（白丸）と佐部利（2008）が扱った８色（黒丸）の位置関
係． 本 図 中，“lime” は，sRGB 表 色 系 の（R=0,G=255, B=0）の色で，図１，図２中における “green”と 同 じ 色 で あ る． な お， 本 図 中 の “green” はsRGB 表色系の（R=0, G=128, B=0）の色を示す．

図２：Y：U：V ＝ 1.744：0.452：0.804の比で伸縮された YUV 色空間上の布置（佐部利，2008，p. 199，図２）．図中の “green”
は sRGB 表色系の（R=0, G=255, B=0）の色を示す．

表１：本研究で扱った刺激における配色の組み合わせ
文字色

背景色

maroonpurple
green
olive
navy
teal

maroon(128, 0, 0)

purple(128, 0, 128)green
(0, 128, 0)

olive(128, 128, 0)

navy(0, 0, 128)

teal
(0, 128, 128)－－－－－－

○
○
○
○
○－○
○
○
○－－
○
○
○－－－
○
○－－－－－－○－－－注）カッコ内の数字は，それぞれ sRGB 表色系のＲ値，Ｇ値，Ｂ値を示す．

を図３に示す．これより，本研究で扱った６色は佐部利が扱った８色と比較すると，伸縮された YUV 色空

三角部分の組み合わせに対する視認性判断が下三角部分のそれと同じであると仮定し，対称 MDS を適用す間内で全体としてＹ値が低い領域に集中していること

る．刺激はディスプレイの画面を６分割して同時に６がわかる．つまり，これらの６色は全体的に暗い色で種類提示し，画面を一定の間隔で切り替えることで全あることがわかる．これら６色の中から文字と背景がて提示した．

配色された文字列「この文字は見やすいですか」による刺激をパーソナルコンピュータで作成し，プラズマディスプレイ（SONY PFM-42X1）上に提示した．本研

２

究における配色の組み合わせは表１に示した通りである．本研究では被験者数の制約より，特に対称部の分いる部屋を利用して集団で実施した．被験者は大学生
191 名で，各被験者は無作為に一つの刺激が割り当て析に重点を置き，表１の上三角部分の組み合わせにつられ，順次切り替わる画面の中の該当する刺激の見やいては扱わなかった．そのため，本研究では表１の上すさを「見やすい」「まあまあ見やすい」「どちらとも手続き

実験は，同一機種のディスプレイが複数台備わって─ 73 ─佐部利真吾

表２：各候補モデルの適合度
候補モデル

ユークリッド距離モデル次元数
12345（対称）SR モデル－（対称）飽和モデル

－AIC

順序尺度
ln L

26.51
7.85
5.68
7.01
9.03
7.01–229.25–215.93–211.84–210.50–210.51–210.50

ν

AIC

間隔尺度
ln L

9131618
1918

45.59
35.37
33.42
33.34
35.34
33.34

–240.79–231.68–227.71–225.67–225.67–225.67νln L–195.77

AIC61.54

ν
7111416171660

注１）ln L は対数尤度，ν はモデルの有効パラメータ数を示す．
注２）AIC はあらかじめ 450を引いてある．

図４：最適モデルにおいて推定されたカテゴリー境界値と95％信頼区間．
C1～C5はそれぞれ，評定カテゴリーの「見にくい」「まあまあ見にくい」「どちらともいえない」「まあまあ見やすい」「見やすい」を示す．

いえない」「まあまあ見にくい」「見にくい」の５段階り，色 i と色 j の組み合わせに対する視認性の程度がで評定した．その結果，一つの刺激につき11～14 名

カテゴリーC m に落ちると判断される確率がが評定を行った．

pijm =Ⅲ

結果

本研究で収集したデータに対して，Takane（1981）による MAXSCAL を適用した．ここで，表現モデルとしてはユークリッド距離モデル g i j =d i j に加え，対称制約 g i j =g j i の下で g i j を自由に推定する（対称）SR（Saturated Representation）モデルを用いた．なお，ここでは g i j を，色 i と色 j の組み合わせに対する視認性の程度と定義した．つまり，空間内の該当する２色間のユークリッド距離が大きい組み合わせほど視認性が高いと解釈することになる．さらに，候補モデルとして，多項分布のパラメータを直接扱う（対称）飽和モデルも検討した．また，誤差モデルとしては加算誤差モデルを用いた．

bmòb

f (ô i j)dô i j ,(3)m–1と定義される．ここで，ô i j は g i j に正規誤差が付加さƒ は正規分布の密度関数である．図４より，れたもので，評定カテゴリー「どちらともいえない」の幅が狭く，このカテゴリーに落ちる確率が比較的小さいことがわかる．これと同様の傾向は，佐部利（2008）でも確認された．また，最適モデルの布置を，Y：U：V ＝ 1.744：0.452：0.804 の比で伸縮された YUV 色空間上の布置と比較するために，前者を後者にできるだけ近づけるよ
うに Schönemann & Carroll（1970）によるプロクラステス問題の解法を適用した．これにより変換された最適モデルの布置と次元別に伸縮された YUV 色空間上の布置を図５に示した．図５より，今回得られたデータに基づく布置は，次元別に伸縮された YUV 色空間

表２に各候補モデルの適合度を示す．AIC の値より，上の布置と大きく異なっていることがわかる．その中順序尺度仮定の３次元ユークリッド距離モデルが最適モデルとなった．この最適モデルにおいて推定されたで特に，視認性に対する影響力が強い輝度を表すＹ軸に対応する第１次元について見ると，olive, teal, green

カテゴリー境界値と95％信頼区間を図４に示す．このカテゴリー境界値 b m (m = 1,…, 4; b 0 = –∞, b 5 = ∞) によの布置はだいたいＹ軸上のそれに近いものの，purple,maroon, navy はほぼ同じ位置にあることがわかる．

─ 74 ─

文字色と背景色の組み合わせに対する視認性の分析

図５：最適モデルの布置（左）と Y：U：V ＝ 1.744：0.452：0.804の比で伸縮された YUV
色空間上の布置（右）．左の布置は右の布置にできるだけ近づくよう変換されている．

Ⅳ考

引用文献

察

本研究は，佐部利（2008）で扱った８色とは異なる６色で作成された刺激に対する視認性を測定し，最尤対称 MDS により分析した．佐部利で最も適合した Y：U：V ＝ 1.744：0.452：0.804の比で伸縮された YUV 色空間上の布置と，本研究で得られた布置をプロクラステス回転により比較した結果，両者は大きく異なることが示された．特に，Ｙ軸に対応する第１次元上において purple, maroon, navy の３色はほぼ同じ位置にあった．これらはＹ値が相対的に小さい色であり，したがってある程度暗い色は視認性判断においてその輝度の違いが現れにくいのかもしれない．一方でこの結果には，一つには得られた布置が本研究で扱った６色のみに基づくものであり，布置を描くための情報が不足していた可能性が考えられる．加えて，本研究で扱った６色が，次元別に伸縮された YUV 色空間上で，輝度を表すＹ値が小さい領域に固まっていたことも影響している可能性がある．本研究は長期的な大規模データ収集の一時報告であり，今後未測定の組み合わせに対するデータを収集し，さらに検討する必要があるだ
ろう．
謝辞

本研究におけるデータ収集に際しては，愛知学院大学の学生の皆様にご協力いただいた．ここに謝意を表わす．また，本研究は愛知学院大学心身科学研究所より助成を受けた．

Akaike, H. (1973). Information theory and an extension of themaximum likelihood principle. In B.N. Petrov & F. Csaki(Eds.), The second international symposium on information
theory (pp. 267–281). Budapest: Akadémiai Kiado.
Bock, R.D., & Jones, L.V. (1968). The measurement and predictionof judgment and choice. San Francisco: Holden-Day.
槙究・田中奈苗・留目真由香（2005）．読みやすさと配色の良さの両立 ─文字色と背景色の組み合わせの評価
─．日本色彩学会誌，29，2–13.
Mooijaart, A., & Commandeur, J.J.F. (1990). A general solutionof the weighted orthonormal Procrustes problem.
Psychometrika, 55, 657–663.
納富一宏・平松明希子・斎藤恵一（2004）．Web 利用時の視認性を考慮した自己組織化マップによるカラーセッ
ト予測方式の提案．バイオメディカル・ファジィ・シ
ステム学会誌，6，57–62.
Notomi, K., Hiramatsu, A., Saito, K., & Saito, M. (2003). A
fundamental study on visibility of background and character
colors at the web browsing. Biomedical Soft Computing andHuman Sciences, 9, 17–25.
Okada, A., & Imaizumi, T. (1987). Nonmetric multidimensional
scaling of asymmetric proximities. Behaviormetrika, 21,81–96.
佐部利真吾（2008）．背景色と文字色の組み合わせに対する視認性の構造 ─最尤非対称多次元尺度構成法による分析─．行動計量学，35，193–201.
Saburi, S., & Chino, N. (2008). A maximum likelihood method
for an asymmetric MDS model. Computational Statistics
and Data Analysis, 52, 4673–4684.
Schönemann, P.H., & Carroll, R.M. (1970). Fitting one matrix to─ 75 ─佐部利

another under choice of a central dilation and a rigidmotion. Psychometrika, 35, 245–255.
Takane, Y. (1981). Multidimensional successive categories
scaling: A maximum likelihood method. Psychometrika, 46,9–28.
World Wide Web Consortium (2000). Techniques for accessibility
evaluation and repair tools. (http://www.w3.org/TR/2000/WD-AERT-20000426)

真吾
鎧沢勇・井上正之（1983）．文字画像における配色と見易さの関係．テレビジョン学会技術報告，7, VVI59–5,25–30.
吉 田 辰 夫・ 長 谷 川 敬・ 安 田 稔・ 福 田 忠 彦・ 長 田 昌 次 郎（1986）．文字放送画像の好ましい配色．テレビジョン
学会誌，40，758–765.

─ 76 ─

最終版平成 20 年 12月 26 日受理

Journal of the Institute for Psychological and Physical Science, Vol. 1, No. 1, 71–77, 2009NotesAnalysis of Visibility for the Combination of Character and Background Colors—A Preparatory Report for the Large Data Collection—
Shingo SABURI
Abstract
It has been shown that the symmetric part of the visibility for the combination of character and backgroundcolors is almost based on the configuration in the dimensionally shrunk or expanded YUV color space and thatits skew-symmetric part is relatively small by a preceding study using a maximum likelihood (ML) asymmetricmultidimensional scaling (MDS). But these findings were based on the data consisted of only eight basic colors.
Therefore the examination of the data with larger number of colors is needed. As a preparatory report for thelarge data collection, we collected the data composed of partial combinations of the six different colors fromthose in the preceding study, and analyzed them by an ML symmetric MDS, and examined the result in light ofthe preceding study.
Keywords: color scheme, color space, maximum likelihood multidimensional scaling, visibility

─ 77 ─