JP2014021702A - ウェブコンテンツの色作成支援方法 - Google Patents

Abstract

【課題】色覚の特性に依存せず判別可能なＵＩ要素の色の作成を効率的に行うことができる色作成支援方法を提供する。
【解決手段】クライアントから部品の作成要求がある場合、ウェブコンテンツ上で使用される部品の色を作成する画面３０Ｗが表示され、指定された該部品を構成する要素毎に、色作成用のカラーパレットが表示され、カラーパレットで所望とする色を選択されることにより、選択された該部品の該要素夫々が選択された該色で表示され、部品は、文字と該文字の背景とから構成され、画面３０Ｗには、部品の色を表示するプレビュー欄３３および色覚シミュレーター欄３４が表示され、色覚シミュレーター欄３４には、プレビュー欄３３に表示する画像の各ピクセルの相対輝度と、グレースケールに変換された後の各ピクセルの相対輝度とをできる限り同じになるように近似して変換する処理である、輝度比近似グレースケール処理で処理された画像が表示される。
【選択図】図５

Description

本発明は、ウェブ（Ｗｅｂ）コンテンツに使用するＵＩ（User Interface）要素の色の作成を支援する技術に関する。

Ｗｅｂデザイナは、Ｗｅｂコンテンツの作成において、複数のＷｅｂブラウザ、またバージョン別による検証確認をして作成するが、Ｗｅｂブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることを経験している。

また、色覚障がい者支援のための画像処理方法として、カラー画像内でＲ（赤色）とＧ（緑色）の差異が大きくなる境界を抽出し、その境界からある程度の範囲内の画素について、Ｂ（青色）成分の値を変化させることで縁取りを挿入する。挿入された縁取りは、健常者にはＲＧの刺激に掻き消されてほとんど知覚されないが、ＲＧの識別が困難な色覚障がい者にはＢ成分の変化による刺激に対して敏感に反応するため、はっきりとした縁取りとして知覚することが可能となることが開示されている（例えば、特許文献１参照）。

特開２０１１−１０９４３０号公報

色覚障がいなどの色覚の特性に依存せず、画面に表示される要素が明確に判別できるためには、その要素と、その要素に接した他の要素との輝度コントラスト比（濃さの違い）が充分大きいことが必要である。輝度コントラスト比の計算方法と、その要素が文字の場合に確保すべき輝度コントラスト比の最低値は、Ｗ３Ｃ（World Wide Web Consortium）勧告のＷＣＡＧ（Web Content Accesibility Guidelines）によって提示されている。そのためＷｅｂデザイナは、文字の色を決める際に、その基準を満たしているかどうかを確認する必要がある。グラデーションなど、文字に接する箇所の色が連続的な変化する場合には、最も輝度コントラスト比が小さい箇所の色が最低値を満たしている必要があるが、最も輝度コントラスト比が小さい箇所の特定に時間がかかるという課題がある。

本発明は、前記した課題を解決するためになされたものであり、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なＵＩ要素の色を効率的に作成することができるウェブコンテンツの色作成支援方法を提供することを目的とする。

前記目的を達成するため、ウェブコンテンツで使用される部品（例えば、ＵＩ要素であるボタン本体１００）の色の作成を支援する色作成支援装置（例えば、Ｗｅｂサーバ１０）を用いるウェブコンテンツの色作成支援方法は、クライアント（例えば、クライアント２０）から部品の作成要求がある場合、ウェブコンテンツ上で使用される部品の色を作成する色作成支援操作画面（例えば、画面３０Ｗ）を表示し、色作成支援操作画面で、指定された該部品を構成する要素毎に、色作成用のカラーパレットを表示し、カラーパレットで所望とする色を選択されることにより、選択された該部品の該要素夫々が選択された該色で表示し、カラーパレットには、色相、明るさ、彩度及び透明度の夫々について指定するための指定部（例えば、表示色調整部３）が設けられており、部品は、要素として、少なくとも文字（例えば、文字１０１）と該文字の背景（例えば、ボタンの背景１０２）とから構成され、さらに、色作成支援装置は、色作成支援操作画面に、色作成用のカラーパレットとともに、部品の色を表示するプレビュー欄および部品の色を所定の処理で変換する色を表示する色覚シミュレーター欄を表示し、色覚シミュレーター欄には、プレビュー欄に表示する画像の各ピクセルの相対輝度と、グレースケールに変換された後の各ピクセルの相対輝度とをできる限り同じになるように近似して変換する処理である、輝度比近似グレースケール処理で処理された画像を表示することを特徴とする。

本発明によれば、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なＵＩ要素の色を効率的に作成することができる。

本発明の実施形態に係る色作成支援ツールの利用形態を示す図である。 色作成支援ツールが起動されたときの画面構成の例を示す図である。 デザインするＵＩ要素が選択されたときの画面構成の例を示す図である。 文字と背景の輝度比の表示欄の「？」マークが押下されたときのメッセージボックスの例を示す図である。 通常時のボタンの編集画面の例を示す図である。 非活性時のボタンの編集画面の例を示す図である。 マウスオーバー時のボタンの編集画面の例を示す図である。 色覚シミュレーターの切替えを示す図である。 コードを表示のボタンが押下されたときの出力コードを示す図である。 色作成支援ツールで作成した色の確認のための画面構成の例を示す図である。 ＵＩ要素である具体例としてボタンの構成を示す図である。 図５における単色のタブとグラデーションのタブとの一具体例を示す図である。 図６のカラーパレット表示エリアを拡大した図である。 色作成支援ツールの編集画面の例を示す図である。 Ｒ８bit，Ｇ８bit，Ｂ８bitから輝度値に変換する際の具体例を示す図である。

以下、本発明の実施形態について図面を参照して詳細に説明する。
図１は、本発明の実施形態に係る色作成支援ツールの利用形態を示す図である。色作成支援ツール(Assistance for Color Generation)３０は、Ｗｅｂサーバ１０に格納されており、インターネット９０（ネットワーク）に通信可能に接続されている、デザイナが利用するクライアント２０（端末）からアクセスして利用する。クライアント２０は、例えば、パーソナルコンピュータであり、各種のＷｅｂブラウザがダウンロードされている。

Ｗｅｂサーバ１０は、ＨＴＴＰ（HyperText Transfer Protocol）に則り、クライアント２０のＷｅｂブラウザに対して、ＨＴＭＬ（HyperText Markup Language）やオブジェクト（画像など）の表示を提供するサービスプログラム、および、そのサービスが動作するサーバコンピュータである。Ｗｅｂサーバ１０には、処理部１１、記憶部１２（データベース）などがあり、処理部１１は、クライアント２０からの要求により、所望の処理画面を、クライアント２０に表示する。

色作成支援ツール３０は、ＣＳＳ３（Cascading Style Sheets 3）で開発するＷｅｂコンテンツの色の選択・作成を支援するツールのプログラムである。主な特徴は以下の通りである。
（１）選択した色は登録することが可能で、次に立ち上げたときも利用することができる。（ＨＴＭＬ５のlocalStorageの機能を用いている。）
（２）選択した色のＨＴＭＬとＣＳＳのコードを表示することができる。
（３）選択した色を色覚特性別に変換して示すことができる。
（４）選択した色が色覚の特性に依存せず判別できるかを、輝度コントラスト比（輝度比と称する場合がある。）を近似して変換したグレースケール画像（輝度比近似グレースケール）によって確認することができる。なお、輝度比近似グレースケールについては、後記する。

また、色作成支援ツール３０は、カラーパレットの単色のタブ４５Ｍ（図１２（ａ）参照）、グラデーションのタブ４５Ｇ（図１２（ｂ）参照）を有し、色合い３ａのスライダ、色相表示部２の選択枠２ａを使って色を簡単に選択、作成することができる。詳細については、図１２において後記する。

色作成支援ツール３０は、ＣＳＳ３の普及と、それによるＷｅｂコンテンツの質の向上を支援すること、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なUI要素の色を効率的に作成するための方法「輝度比近似グレースケール」に対する意見を収集することを目的としている。ＣＳＳ３によって、Ｗｅｂコンテンツの視覚的表現力は格段に向上するが、視覚的表現の制約が小さいことにより、色覚特性に依存せずに判別できる色であるかの確認が難しくなる。このため、色作成支援ツール３０の利用はデザイナにとって有効なツールとなる。

図２は、色作成支援ツールが起動されたときの画面構成の例を示す図である。図２に示す画面３０Ｗは、クライアント２０からＷｅｂブラウザで、Ｗｅｂサーバ１０の所定のＵＲＬ（Uniform Resource Locator）にアクセスし、「起動」ボタン（図示せず）を押下すると、表示される。

図２に示す起動画面は、ＵＩ要素の種類であるパーツ一覧３１、選択された種類のリストを示すＵＩ要素一覧表３２（図２においてはＵＩ要素の種類としてボタンが選択された場合、ボタン一覧として表示される）、ＵＩ要素のプレビュー欄３３、色覚シミュレーター欄３４、ＵＩ要素の新規作成ボタン３５、ＵＩ要素の詳細情報／編集ボタン３６、ＵＩ要素の削除ボタン３７、ＵＩ要素のコードを表示するためのコード表示ボタン３８などから構成されている。なお、ＵＩ要素の詳細情報／編集ボタン３６が押下されると、図５に遷移する。図５の詳細については後記する。

パーツ一覧３１のＵＩ要素の種類には、ボタン、矩形、テキスト、リンクテキスト、区切り線、テキストボックス、チェックボックス、ラジオボタン、プルダウン、リストボックス、テーブルなどがある。デザイナが、パーツ一覧３１からデザインしたいＵＩ要素の種類を選択すると、色作成支援ツール３０は、選択された種類のＵＩ要素のリストをリスト表３２１として表示する。

リスト表３２１は、チェックボックス、登録されている名前、文字と背景の輝度比、更新日、種類を含んで構成される。図２のリスト表３２１には、既に登録されているＵＩ要素のリストが表示されている。例えば、名前が「黒背景のボタン」の場合、文字と背景の輝度比は「１２．１」、更新日は「２０１２年３月１２日」、種類が「ボタン」であることがわかる。また、名前が「緑（グラデーション有）のボタン」の場合、文字と背景の輝度比は「判定不能」、更新日は「２０１２年３月１２日」、種類が「ボタン」であることがわかる。なお、輝度比（輝度コントランス比）の算出方法は後記する。

ＵＩ要素のプレビュー欄３３は、文字と背景の輝度比の表示欄３３１と、ＵＩ要素のプレビュー表示欄３３２から構成される。また、色覚シミュレーター欄３４は、輝度比近似グレースケール選択欄３４１と、ＵＩ要素のプレビュー表示欄３４２から構成される。

図１１は、ＵＩ要素である具体例としてボタンの構成を示す図である。ＵＩ要素であるボタンは、ボタン本体１００（部品１）と、背景２００（部品２）との部品によって構成されている。また、部品１のボタン本体１００は、ボタン本体１００の装飾を表すボタンの装飾１０４、ボタン本体１００の輪郭を表わすボタンの枠線１０３と、このボタンの枠線１０３の内部エリアとなるボタンの背景１０２と、テキストを形成する文字１０１とで構成され、これら文字１０１、ボタンの背景１０２、ボタンの枠線１０３、およびボタンの装飾１０４が部品１を構成する要素となる。

なお、部品１、部品２とを分けて説明しているが、部品１に部品２を含めて、部品１を構成する要素を、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および背景２００としてもよい。本実施形態では、部品１を構成する要素を、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および背景２００として説明する。

ところで、部品や部品の要素が明確に判別できるためには、かかる部品や要素とこれに接した（以下、隣接したという）他の部品または他の要素との輝度コントラスト比（濃さの違い）が充分大きいことが必要である。

ここで、Ｗ３Ｃ（World Wide Web Consortium）勧告のＷＣＡＧ（Web Content Accesibility Guidelines）によると、輝度コントラスト比は、
（Ｌ１＋０．０５）／（Ｌ２＋０．０５） …式（１）
但し、Ｌ１：隣接した部品または要素のうちの明るい方の色の相対輝度Ｌ
Ｌ２：隣接した部品または要素のうちの暗い方の色の相対輝度Ｌ
で表わされる。

色の相対輝度Ｌは、ＩＥＣ（国際電気標準会議）規格のｓＲＧＢ色空間では、
Ｌ＝０．２１２６＊Ｒ＋０．７１５２＊Ｇ＋０．０７２２＊Ｂ …式（２）
で表わされる。但し、かかる色の相対輝度におけるＲ（赤）成分、Ｇ（緑）成分、Ｂ（青）成分は、ｓＲＧＢ色空間でのＲ成分をＲｓＲＧＢ、同じくＧ成分をＧｓＲＧＢ、同じくＢ成分をＢｓＲＧＢとすると、
ＲｓＲＧＢ≦0.03928の場合、Ｒ＝ＲｓＲＧＢ／12.92
ＲｓＲＧＢ＞0.03928の場合、Ｒ＝（(ＲｓＲＧＢ＋0.055)／1.055)＾2.4
ＧｓＲＧＢ≦0.03928の場合、Ｇ＝ＧｓＲＧＢ／12.92
ＧｓＲＧＢ＞0.03928の場合、Ｇ＝（(ＧｓＲＧＢ＋0.055)／1.055)＾2.4
ＢｓＲＧＢ≦0.03928の場合、Ｂ＝ＢｓＲＧＢ／12.92
ＢｓＲＧＢ＞0.03928の場合、Ｂ＝（(ＢｓＲＧＢ＋0.055)／1.055)＾2.4
…式（３）
但し、“＾”は指数演算子
で表わされ、ＲｓＲＧＢ、ＧｓＲＧＢ、ＢｓＲＧＢは夫々
ＲｓＲＧＢ＝Ｒ８bit／255
ＧｓＲＧＢ＝Ｇ８bit／255
ＢｓＲＧＢ＝Ｂ８bit／255
…式（４）
である。なお、Ｒ８bit、Ｇ８bit、Ｂ８bitは夫々、８ビットで表わされる値である。

以上のように、輝度コントラスト比は前記の式（１）で表わされるが、
（１）デザイナは、テキストのレンダリング（数値データからの画像化：例えば、フォントのスムージングやアンチエイリアス）に関するユーザの設定を制御できないため、テキストの輝度コントラスト比は、アンチエイリアス（表示される線などに現われるギザギザをなくす処理）をオフした状態で評価される。
（２）文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。但し、文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、かさ（暈：ハローや後光）のようになって、文字の細かい字画を埋めていれば、背景色として考慮されることになる。
（３）ＷＣＡＧへの適用は、典型的な表現において隣接すると製作者が想定して、コンテンツで指定した色の組み合わせに対して評価されるべきである。製作者は、ユーザエージェントによる色の変更などのように、通常とは異なる表現を考慮する必要はない。但し、それが製作者のソースコードによって起こる場合は、除く。

なお、ディザリング（表示可能な色を組み合わせて、その中間の色を表現すること）が発生する場合には、元の色の値が用いられる。発生源でディザリングしている色については、用いられる色の平均値（Ｒの平均値、Ｇの平均値、Ｂの平均値）を用いるべきである。

以下に説明する実施形態は、以上の輝度コントラスト比を基に、コンテンツの部品やその要素の色を規制し、デザイナが、いずれの部品や要素も色覚の特性に依存せず明確に判別可能な色とすることを効率的に行えるようにするものである。

ここで、文字とその背景（この文字が重なって表示される背景）とでは、その輝度コントラスト比が４．５：１以上となる色が推奨される。また、文字以外の要素とその背景またはその文字以外の要素に隣り合う要素（例えば、ボタンの背景色とこのボタンの枠線色、ボタンの枠線色とこのボタンが置かれている背景の色など）では、その輝度コントラスト比が３：１以上（本実施形態の推奨）となる色を選択することが推奨される。

なお、以下では、前記の推奨される輝度コントラスト比を、４．５：１、３：１として、実施形態の説明をするが、これに限るものでなく、デザイナにとって各「要素」を視認し易くする他の輝度コントラスト比を定めることができる。但し、文字とこれに接する「要素」との間で規定される輝度コントラスト比は、文字以外の「要素」間での規定のコントラスト比よりも、その比率が大きいものとする。

また、この実施形態では、接し合う要素（図１１では、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４）は全て個別にカスタマイズを行なうものである。グラデーション（色や濃淡の連続的な変化）の場合には、隣接する要素との輝度コントラスト比（前記の４．５：１や３：１）が最も小さい色で判別する必要がある。

図３は、デザインするＵＩ要素が選択されたときの画面構成の例を示す図である。図３において、デザイナがマウスなどで、リスト表３２１のチェックボックスにチェックを付すと、当該チェックボックスの対象とするリスト（例えば、リスト表３２１中の「緑（グラデーション有）のボタン」の行の色が変更される（図では、行を黒色で表示）。

ＵＩ要素のプレビュー欄３３のＵＩ要素のプレビュー表示欄３３２には、選択された「緑（グラデーション有）のボタン」に係るボタンが表示されている。文字と背景の輝度比の表示欄３３１には、選択された「緑（グラデーション有）のボタン」の算出された輝度比が表示される。文字と背景の輝度比の表示欄３３１には、「判定不能」と表示されており、その右側に表示されている「？」マーク（ヘルプマーク）をマウスなどで押下すると、文字と背景の輝度比の表示欄３３１の内容についてその理由が子画面（図４参照）で表示される。

また、色覚シミュレーター欄３４の輝度比近似グレースケール選択欄３４１において、輝度比近似グレースケールが選択されている。ＵＩ要素のプレビュー表示欄３４２には、本実施形態の特徴である輝度比近似グレースケールで変換処理したボタンが表示されている。

輝度比近似グレースケールとは、元の画像の各ピクセルの相対輝度と、グレースケール（色相の情報を含まない、白から黒の明暗のみで表現された色のこと）に変換された後の各ピクセルの相対輝度とを、できる限り同じになるように変換することを意味する。なお、画面（画像）は、最小単位の粒子が集まることで表現されており、その最小単位の粒子のことをピクセルや、ドットなどと呼ぶ。また、ピクセルは、単一の色を有している。

ここで、市販されている画像処理ソフトウェアにおいても、グレースケールに変換することができるが、変換後の輝度を計算してみると、元の画像の輝度と違うことがある。例えば、テレビ放送のＮＴＳＣ（National Television System Committee）で使用されているＹＩＱモデルの輝度成分Ｌ_ＹＩＱの算出式は、
Ｌ_ＹＩＱ＝０．２９９＊Ｒ＋０．５８７＊Ｇ＋０．１１４＊Ｂ …式（５）
となり、前記式（２）と変換式が異なるためであり、そのままでは適用できない。

本実施形態の輝度比近似グレースケールは、具体的には、前記式（２）により輝度（Ｗ３Ｃの相対輝度に相当）を計算する。しかしながら、
・式（３）の条件があること、すなわち、ｓＲＧＢ値が小さい（０．０３９２８以下）のときは、輝度の変化が緩やかである。
・輝度（０≦輝度≦１）からＲＧＢ値（０≦ＲＧＢ値≦２５５）に変換する際に四捨五入されるなどの計算過程を有する結果、異なる輝度が同じ色で表される場合があるため（ある一つのグレーの濃さが、一意の輝度を表しているとは限らないため）、輝度比近似グレースケールと称している。

図１５は、Ｒ８bit，Ｇ８bit，Ｂ８bitから輝度値に変換する際の具体例を示す図である。図１５において、横軸に前記式（４）に示すＲ８bit，Ｇ８bit，Ｂ８bitを示し、縦軸にＬ＊２５５（＊は乗算）の値を示す。図１５の拡大図を参照すると、例えば、Ｒ８bit，Ｇ８bit，Ｂ８bitが“０”から“６”の、＃００００００（輝度値０）〜＃０６０６０６（輝度値０．００１８）は、同じ＃００００００（輝度値０）に変換される。同様に、Ｒ８bit，Ｇ８bit，Ｂ８bitが“７”から“１７”の、＃０７０７０７（輝度値０．００２１）〜＃１１１１１１（輝度値００５６）は、同じ＃０７０７０７（輝度値０．００２１）に変換される。なお、＃０６０６０６の表記方法は後記する。

図４は、文字と背景の輝度比の表示欄の「？」マーク（ヘルプマーク）が押下されたときのメッセージボックスの例を示す図である。図４には、文字と背景の輝度比の出力内容についてのメッセージが表示される。例えば下記の内容となる。
『本ツールは、Ｗ３Ｃ勧告のＷＣＡＧ２．０の指標に基づき、文字と背景の輝度比を計算して示しています。判定不能と表示される場合は、文字と背景の輝度比の機械的判断が技術的に困難な場合ですが、色覚シミュレーターの「輝度比近似グレースケール」で表示して識別可能であれば、少なくとも本ツールを表示しているブラウザでは、色覚特性に依存せず識別可能です。
なお、文字と背景の輝度比の機械的な判断が難しい理由は、以下の一方または両方が当てはまるケースがあります。
１．文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。
２．ブラウザによって表示する色が異なる可能性のあるコードを用いているため。
下図は、同じ意味を持つコードを２つの異なるＷｅｂブラウザで表示した結果です。ＣＳＳ３によって表現できるグラデーション、光彩、影などは、同じ箇所（ピクセル）で見たときに、ブラウザによって表示される色が異なります（２０１２年７月時点）。』

図５は、通常時のボタンの編集画面の例を示す図である。図２において、ＵＩ要素の詳細情報／編集ボタン３６が押下されたときに表示される編集画面の例である。編集画面には、ＵＩ要素のプレビュー欄３３、色覚シミュレーター欄３４、編集欄４０、新規にＵＩ要素を登録するための名前を付けて保存ボタン４６、すでに登録済みのＵＩ要素について上書きするための上書き保存ボタン４７、ＵＩ要素のコードを表示するコードを表示ボタン４８などから構成されている。編集欄４０は、状態タブ４１（例えば、状態タブ４１ｎ，４１ｍ，４１ｃ，４１ｆ，４１ｘ，４１ｖ）、マーク４２（例えば、マーク４２ａ）の意味欄４２ｍ、ＵＩ要素の形変更欄４３、ＵＩ要素の構成欄４４、ＵＩ要素の構成欄４４で選択された構成要素のカラーパレット４５（例えば、カラーパレット４５ａ，４５ｂ，４５ｃ）を表示するカラーパレット表示エリア４５Ａから構成されている。なお、カラーパレットを総称するときには、カラーパレット４５という。また、マークを総称するときには、マーク４２という。

状態タブ４１には、図３で選択したＵＩ要素について、どの状態をデザインするのかを切り替えるための複数のタブがある。具体的には、通常時の状態タブ４１ｎ、マウスオーバー時の状態タブ４１ｍ、マウスなどでボタンを押して放す操作のクリック時の状態タブ４１ｃ、フォーカス時の状態タブ４１ｆ、非活性時の状態タブ４１ｘ、訪問済の状態タブ４１ｖがある。マウスオーバーとは、マウスのカーソルを画像やリンク、ファイルなどの上に移動した時に表示され、実行される処理のことをいい、カーソルを合わせた画像やファイルがリンクであることを知らせる視覚効果のことである。また、フォーカスとは、コンピュータの操作画面で、ウインドウや入力要素などが選択され、入力や操作を受け付けられる状態のことをいう。非活性時とは、例えば、押せない状態のボタンの色を作成する場合に選択される。訪問済とは、一度訪れたことのあるリンクの状態をいう。

ＵＩ要素の形変更欄４３は、角丸のＵＩ要素を作成する場合などにピクセル値を設定する欄であり、高さ、幅、角丸の半径のピクセル値が入力される。マウスなどで矢印ボタンを押下することにより設定できるようになっている。

ＵＩ要素の構成欄４４は、ボタンのＵＩ要素で説明するが、背景、ボタンの背景、ボタンの枠線、ボタンの装飾（影、光彩を含む）、文字、文字の装飾などの構成要素が選択できる。背景、ボタンの背景、ボタンの枠線、ボタンの装飾、および文字は、図１１に示した、背景２００、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および文字１０１にそれぞれ対応する。

カラーパレット表示エリア４５Ａは、ＵＩ要素の構成欄４４で選択された構成要素のカラーパレット４５を表示するエリアである。例えば、ＵＩ要素の構成欄４４において、背景、ボタンの背景、文字の構成要素のチェックボックスにチェックが入っている場合、カラーパレット表示エリア４５Ａには、各構成要素に対応するカラーパレット４５ａ，４５ｂ，４５ｃが表示される。カラーパレット４５ａは、構成要素「背景」の背景色を設定するための設定画面であり、カラーパレット４５ｂは、構成要素「ボタンの背景」の背景色を設定するための設定画面であり、カラーパレット４５ｃは、構成要素「文字」の文字色を設定するための設定画面である。

カラーパレット表示エリア４５Ａには、例えば、ＵＩ要素がボタンの場合、ボタンを構成する「背景」、「ボタンの背景」、および「文字」の順に左側からカラーパレット４５ａ，４５ｂ，４５ｃが表示されるのが好ましい。これにより、各構成要素の関係を明確にすることができる。なお、カラーパレット表示エリア４５Ａには、ＵＩ要素を構成する「文字」、「ボタンの背景」、および「背景」の順に左側からカラーパレット４５ｃ，４５ｂ，４５ａを表示してもよい。

カラーパレット４５（例えば、カラーパレット４５ａ，４５ｂ，４５ｃ）は、色を決めるための単色のタブ４５Ｍとグラデーションを決めるためのグラデーションのタブ４５Ｇとからなり、マウスなどの操作によってこれらのいずれかが選択された状態にある。図５に示す例では、カラーパレット４５ａに示す「背景」は、「単色」が選択されている。カラーパレット４５ｂに示す「ボタンの背景」は、「グラデーション」が選択されている。カラーパレット４５ｃに示す「文字」は、「単色」が選択されている。

図１２は、図５における単色のタブとグラデーションのタブとの一具体例を示す図である。図１２（ａ）は、単色のタブ４５Ｍの例であり、図１２（ｂ）は、グラデーションのタブ４５Ｇの例である。図１２（ａ）に示す単色のタブ４５Ｍは、設定色表示部１、色相表示部２、表示色調整部３を有している。表示色調整部３は、色合い３ａ、鮮やかさ３ｂ、明るさ３ｃ、不透明度３ｄのスライダを有し、色を調整することができる。マウスなどで色相表示部２の選択枠２ａを移動することにより、その詳細な色マスが色マス表示部２ｃに５×５マス（横５マス、縦５マス）で表示される。色マス表示部２ｃには、選択枠２ａの中心位置が中心位置色マス２ｄとして表示される。なお、図１２（ａ）の場合には、選択枠２ａの中心が左端にあるため、色マス表示部２ｃには、３×３マスだけ表示されている。

図１２（ａ）の例を具体的に説明すると、設定色表示部１から「＃００００００」が選択されていることがわかる。ＨＴＭＬの色指定は、色の三原色（厳密には「光の三原色」）である、ＲＧＢ（赤＝Ｒｅｄ、緑＝Ｇｒｅｅｎ、青＝Ｂｌｕｅ）の混ぜ合わせで指定される。この方法の場合には、まず先頭に「＃」（シャープ記号）を付け、赤、緑、青の順に２桁ずつの英数字を割り当て、それぞれの色を、「００〜ｆｆ」（１桁の数字の順番は、０，１，２，３，４，５，６，７，８，９，ａ，ｂ，ｃ，ｄ，ｅ，ｆ）の範囲で記述される。例えば、「＃ｆｆ００００」は、赤＝ｆｆ、緑＝００、青＝００で、赤になる。さらに、「＃ｆｆｆｆ００」は、赤＝ｆｆ、緑＝ｆｆ、青＝００で、黄になる。

なお、図１２（ａ）において、設定色表示部１の左端の表示が「□」の白で表示されているが、色作成支援ツール３０の本来の画面の背景色は黒であり、符号などの記載を明瞭に表示するため、ネガポジ反転して図示しているためである。同様に、図２から図１０の図面も同様にネガポジ反転して図示している。

図１４は、色作成支援ツールの編集画面の例を示す図である。図１４に示す編集画面は、現在運用サービス中の本来の画面を示す。図５は、図１４の編集画面をネガポジで反転して表示している。デザイナは、図１４の編集画面を利用して、Ｗｅｂブラウザの表示方法に依存せずＵＩ要素の色の作成をすることができる。

図１２（ｂ）に示すグラデーションのタブ４５Ｇには、設定色表示部１、グラデーション角度設定部５、グラデーション分岐点設定部６、グラデーション表示部７、色相表示部２、表示色調整部３を有している。表示色調整部３には、図１２（ａ）で示したものと同様に、色合い３ａ、鮮やかさ３ｂ、明るさ３ｃ、不透明度３ｄが、スライダを調整することによって調整できる。マウスなどで選択枠２ａを色相表示部２内で移動することにより、その詳細な色マスが色マス表示部２ｃに表示される。色マス表示部２ｃには、選択枠２ａの中心位置が中心位置色マス２ｄとして表示される。

グラデーション表示部７について説明すると、横長のグラデーションバー７ａの左側端部に左端側指示体７Ｌが、右側端部に右端側指示体７Ｒが夫々設定されており、必要に応じてこれら左端側指示体７Ｌ、右端側指示体７Ｒ間に１以上の中間部指示体７Ｉが設定される。

ここで、これら左端側指示体７Ｌ、右端側指示体７Ｒ、中間部指示体７Ｉでは夫々、色マス表示部２ｃを用いてグラデーションバー７ａ上のそれが指示する位置（左端部や右端部、それらの中間位置）に、色マス表示部２ｃで表示される色のうちから、選択された色（グレーも含む）を表示させることができるものである。その色の表示方法としては、左端側指示体７Ｌ、右端側指示体７Ｒ、中間部指示体７Ｉ（以下、これらを総称するときには、指示体７Ｓという）のうちで色付けしたい指示体７Ｓを選択し、次いで、色マス表示部２ｃで色付けしたい所望の色を選択することにより、グラデーションバー７ａの該当する指示体７Ｓが指示する位置が色付けされる。そして、このように色付けられると、グラデーションバー７ａでの左端側指示体７Ｌと中間部指示体７Ｉとの間で、これらの位置に設定された色のグラデーションが設定されることになり、また、中間部指示体７Ｉと右端側指示体７Ｒとの間で、これらの位置に設定された色のグラデーションが設定されることになる。

グラデーション分岐点設定部６は以下の３つからなる。第一は、左端側指示体７Ｌで指示されるグラデーションバー７ａの左端部と右端側指示体７Ｒで指示されるグラデーションバー７ａの右端部と中間部指示体７Ｉで指示されるグラデーションバー７ａの中間位置とを分岐点とし、グラデーションバー７ａで設定される分岐点の個数を表わす分岐点数表示部６ａである。第二は、この分岐点の個数を増減する（即ち、中間部指示体７Ｉなどを追加、削減する）ための分岐点増減部６ｂである。第三は、分岐点、即ち、左端側指示体７Ｌと右端側指示体７Ｒと中間部指示体７Ｉとのうちの、選択された指示体７Ｓのグラデーションバー７ａ上での位置をパーセント（％）で表わす選択分岐点位置表示部６ｃである。

ここでは、左端側指示体７Ｌが選択された指示体７Ｓとし、この左端側指示体７Ｌがグラデーションバー７ａの０％の位置にあるものとしており、これ故、選択分岐点位置表示部６ｃには、「０」％が表示されている。なお、選択分岐点位置表示部６ｃでは、同じ指示体７Ｓが選択されている限り、この指示体７Ｓの位置を表わすパーセント（％）が表示される。グラデーションバー７ａでの２個以上の指示体７Ｓは、そのいずれか１つが選択されており、従って、選択分岐点位置表示部６ｃでは、常時選択された指示体７Ｓの位置が表示されている。

なお、選択された指示体７Ｓには、これを囲むようにして所定の色（例えば、青色）の選択枠７ｂが付けられている。ここでは、左端側指示体７Ｌが選択されているものとしている。

また、分岐点数表示部６ａでは、「▼」をカーソル（図示せず）で押下操作することにより、分岐点（即ち、指示体７Ｓ）の一連の番号を表わすプルダウンメニューが展開され、このうちの１つを選択することにより、その番号の分岐点（指示体７Ｓ）が選択されることになる。

また、いずれの指示体７Ｓも、カーソルを用いた操作により、グラデーションバー７ａに沿って移動させることができるが、この場合でも、その移動する指示体７Ｓが指示するグラデーションバー７ａ上での位置の色は変化しない。従って、例えば、中間部指示体７Ｉを移動させると、グラデーションバー７ａ上でのこの中間部指示体７Ｉに対して設定された色が同様にグラデーションバー７ａ上を移動することになる。この結果、この中間部指示体７Ｉと左端側指示体７Ｌ、右端側指示体７Ｒとの間の色のグラデーションの傾向が変化する。例えば、中間部指示体７Ｉを左端側指示体７Ｌに近づけると、この左端側指示体７Ｌから中間部指示体７Ｉへの色のグラデーション（色の変化）が急激となり、また、このとき、中間部指示体７Ｉが右端側指示体７Ｒから離れるので、中間部指示体７Ｉから右端側指示体７Ｒへの色のグラデーションが緩やかとなる。

次に、グラデーション分岐点設定部６の分岐点増減部６ｂの操作について、図１２（ｂ）により説明する。分岐点増減部６ｂは、「＋」ボタンと「−」ボタンとからなり、「＋」ボタンはグラデーションバー７ａで中間指示体７Ｉを増加させるためのものであり、カーソルでの押下操作毎に１つずつ中間指示体７Ｉを増加させる。また、「−」ボタンはグラデーションバー７ａで選択されている中間指示体７Ｉを減少させるためのものであり、カーソルでの押下操作毎に１つずつ中間指示体７Ｉを減少させることができる。

図５に戻り、マーク４２の意味欄４２ｍは、各構成要素のカラーパレット４５間に表示されるマーク４２（例えば、カラーパレット４５ａ，４５ｂ間のマーク４２ａ、カラーパレット４５ｂ，４５ｃ間のマーク４２ａ）の意味を示すものである。マーク４２の意味欄４２ｍの各ボタンをマウスなどでクリックすると、メッセージボックスが表示される。マーク４２の意味は下記である。
○：輝度比が十分であるので、色覚特性に依存せずに識別できる。
×：文字と背景の輝度比が４．５：１を満たしていないため、文字が読みにくい可能性がある。
／：文字以外の隣接する要素（例えば枠線）との輝度比が３：１を満たしていないため、識別できない可能性がある。
？：主に以下２点の理由により、文字と背景の輝度比の機械的な判断が困難である。
１．文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。
２．グラデーションなど、ブラウザによって色の表示の仕方が異なるＣＳＳを使用しているため。

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５で選択されている色が、隣接する要素を識別させるのに輝度比が足りているか否かを判定し、カラーパレット４５間の連系線上に「○」、「×」、「／」、「？」を表示指示する。具体的には、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ａ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であるが、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ａ，４５ｂ間の連系線上にマーク４２ａとして「？」を表示指示する。同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｃの文字は単色であるが、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ａとして「？」を表示指示する。

図６は、非活性時のボタンの編集画面の例を示す図である。図６に示す編集画面は、図５の編集画面と比較して、非活性時の状態タブ４１ｘが選択され、また、ＵＩ要素の構成欄４４において、ボタンの枠線のチェックボックスにチェックが入力されている点が異なる。カラーパレット表示エリア４５Ａには、カラーパレット４５ａ，４５ｂ，４５ｃのほかに、ボタンの枠線のカラーパレット４５ｄが表示されている。なお、前述したが、非活性時とは、例えば、押せない状態のボタンの色を作成する場合に選択される。

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５で選択されている色が、隣接する要素を識別させるのに輝度比が足りているか否かを判定し、カラーパレット４５間の連系線上に「○」、「×」、「／」、「？」を表示指示する。

カラーパレット表示エリア４５Ａにおいて、Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５ａ，４５ｄ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であり、かつ、カラーパレット４５ｄのボタンの枠線は単色であり、輝度比が３：１以上と判定すると、カラーパレット４５ａ，４５ｄ間の連系線上にマーク４２ｂとして「○」を表示指示する。

同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｄ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ｄのボタンの枠線は単色であり、かつ、カラーパレット４５ｂのボタンの背景は単色であり、輝度比が３：１未満と判定すると、カラーパレット４５ｄ，４５ｂ間の連系線上にマーク４２ｃとして「／」を表示指示する。

同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｂのボタンの背景は単色であり、かつ、カラーパレット４５ｃの文字は単色であり、輝度比が４．５：１未満と判定すると、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ｄとして「×」を表示指示する。

図１３は、図６のカラーパレット表示エリアを拡大した図である。カラーパレット４５ａの背景の色マス表示部２ｃには、３×３マス（横３マス、縦３マス）が表示されているが、上側の３つのマスに、「／」の表示がされている。Ｗｅｂサーバ１０（図１参照）の処理部１１は、各マスに表示されている色と、カラーパレット４５ｄで選択されているマスの色との輝度比も判定している。Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ａの背景の場合、輝度比が３：１未満と判定すると、各マス上に「／」の表示指示をする。同様に、カラーパレット４５ｄのボタンの枠線の色マス表示部２ｃには、５×５マス（横５マス、縦５マス）が表示されているが、全てのマスに、「／」の表示がされている。

カラーパレット４５ｂのボタンの背景の色マス表示部２ｃには、５×５マス（横５マス、縦５マス）が表示されているが、全てのマスに、「×」の表示がされている。Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂのボタンの背景の場合、各マスに表示されている色と、カラーパレット４５ｃで選択されている色の輝度比（ボタンの背景と文字との輝度比）を判定している。なお、仮にカラーパレット４５ｃで選択されている色との輝度比が４．５：１であった場合には、「×」の表示はされないが、その際は、カラーパレット４５ｂで選択されている色との輝度比を判定して、３：１未満である場合には「／」の表示がされる。カラーパレット４５ｃで選択されている色との輝度比が４．５：１以上で、カラーパレット４５ｂで選択されている色との輝度比が３：１以上であれば、「×」と「／」のいずれも表示されない。

図６に戻り、ＵＩ要素のプレビュー欄３３のボタンの表示を参照すると、ボタン上の文字が見えにくい状況がわかる。同様に、色覚シミュレーター欄３４のボタン上の文字がみえにくい状況がわかる。また、文字と背景の輝度比の表示欄３３１には、「１．６」として表示されている。この見えにくい状況は、通常、非活性時のボタン表示としては許容範囲か否かについてデザイナが判断することになる。

図７は、マウスオーバー時のボタンの編集画面の例を示す図である。図７に示す編集画面は、図５の編集画面と比較して、マウスオーバー時の状態タブ４１ｍが選択され、また、ＵＩ要素の構成欄４４において、ボタンの装飾のチェックボックスにチェックが入力され、かつ、光彩のラジオボタンが選択されている点で異なる。カラーパレット表示エリア４５Ａには、カラーパレット４５ａ，４５ｂ，４５ｃのほかに、ボタンの装飾のカラーパレット４５ｅが表示されている。なお、前述したが、マウスオーバーとは、マウスのカーソルを画像やリンク、ファイルなどのうえに移動した時に表示され、実行される処理のことをいい、カーソルを合わせた画像やファイルがリンクであることを知らせる視覚効果のことである。

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５ａ，４５ｅ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であり、カラーパレット４５ｅのボタンの装飾−光彩の指定は単色であるが、実際に表示される色は段階的に変化するために輝度比が機械的に算出できない。よって、カラーパレット４５ａ，４５ｅ間の連系線上にマーク４２ａとして「？」を表示指示する。また、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｅ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ｅで指定された色の表示が段階的に変化することと、カラーパレット４５ｂのボタンの背景はグラデーションであることから、最低輝度比の機械的な判断ができないためにカラーパレット４５ｅ，４５ｂ間の連系線上にマーク４２ａとして「？」を表示指示する。さらに、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ａとして「？」を表示指示する。

ＵＩ要素のプレビュー欄３３のボタンの表示を参照すると、ボタンの装飾として光彩がかかっていることがわかる。同様に、色覚シミュレーター欄３４のボタンの表示を参照すると、ボタンの装飾として光彩がかかっていることがわかる。また、文字と背景の輝度比の表示欄３３１には、「判定不能」として表示されている。

図７は、ボタンに光彩をつけ、ボタンの背景にグラデーションをかけた場合である。この場合には、段階的に色が変化するので、隣接する箇所の特定が難しく、また、Ｗｅｂブラウザによって表示の仕方が異なる。このため、色作成支援ツール３０では、初期設定においては、グラデーションをかけた場合の輝度比計算処理をしない設定にしている。なお、サーバ管理者が、オプションとして、グラデーションをかけた場合の輝度比計算処理をする設定にすることもできる。

本実施形態では、文字と背景の輝度比の表示欄３３１に、「判定不能」として表示されていたとしても、「輝度比近似グレースケール」で識別できれば、色覚特性に依存せずに識別可能であるといえる。

図８は、色覚シミュレーターの切替えを示す図である。輝度比近似グレースケール選択欄３４１のプルダウンメニューを開くと、切替えのメニューが表示される。切替えのメニューには、「一型色覚」、「二型色覚」、「三型色覚」、「輝度比近似スケール」がある。デザイナは、メニューを選択することにより、好みの画像を、ＵＩ要素を作成中に見ることができる。

なお、色の認知は三原色（赤、緑、青）の混合による。一型色覚（第一色覚異常、protan）とは、長波長感受性錐体（Ｌ錐体）の障がいを意味し、二型色覚（第二色覚異常、deutan）とは、中波長感受性錐体（Ｍ錐体）の障がいを意味し、三型色覚（第三色覚異常、tritan）とは、短波長感受性錐体（Ｓ錐体）の障がいを意味する。

赤、緑、青などの色相ではなく、白から黒の明暗だけで表現されるグレースケールの画像は、色覚特性に依存せず識別可能と考えられる。このため、色作成支援ツール３０においては、作成中の色の各ピクセルの相対輝度をできる限り同じになるように変換したグレースケール（輝度比近似グレースケール）の画像を、作成中の色と並べて同時に表示する機能を搭載している。この輝度比近似グレースケールの画像を確認しながら元の色を作成すれば、その色は、色覚特性に依存せず識別可能となる。

図９は、「コードを表示」のボタンが押下されたときの出力コードを示す図である。図９は、「コードを表示」のコードを表示ボタン４８（例えば、図５参照）が押下された場合の出力コードの画面５０を示す。画面５０は、ＨＴＭＬのコード表示欄５１と、ＣＳＳのコード表示欄５２から構成されている。

図１０は、色作成支援ツールで作成した色の確認のための画面構成の例を示す図である。図１０は、色作成支援ツール３０において作成した色が、各ブラウザでどう表示されるかを確認するため、所定のＵＲＬにアクセスしたときに表示される画面６０（色確認画面）である。画面６０は、ＨＴＭＬのコード入力欄６１、ＣＳＳのコード入力欄６２から構成されている。

デザイナは、図９において出力されたコードをコピーして、図１０の画面６０に入力する。具体的には、デザイナは、ＨＴＭＬのコード表示欄５１のコードをＨＴＭＬのコード入力欄６１に入力し、ＣＳＳのコード表示欄５２のコードをＣＳＳのコード入力欄６２に入力する。そして、表示確認ボタン６３が押下されると、Ｗｅｂサーバ１０（図１参照）の処理部１１は、プレビュー欄６４に表示結果を表示する。これにより、現在開いているブラウザがどのように表示するかを確認することができる。

本実施形態の色作成支援装置（例えば、Ｗｅｂサーバ１０）は、色作成操作画面（例えば、図９の画面３０Ｗ）により作成された部品のコード出力要求を受理した場合、ＵＩ要素である部品をウェブ画面で表示する際に必要となるＨＴＭＬ用のコードおよびＣＳＳ用のコードを出力し、色確認用の画面要求があると、ＨＴＭＬ用のコードおよびＣＳＳ用のコードを入力するための入力画面を表示し、表示確認要求を受理すると、入力されたＨＴＭＬ用のコードおよびＣＳＳ用のコードに基づき、前記入力画面に部品を表示することができる。

本実施形態のプレビュー欄３３の文字と背景の輝度比の表示欄３３１（図５参照）には、文字と背景との輝度コントラスト比を計算するための部分の特定が困難である場合、判定不能である旨を表示することができる。また、色覚シミュレーターによるＵＩ要素のプレビュー表示欄３４２には、プレビュー表示欄３３２で表示されているデザイナが作成した色を、色覚の特性別に変換した色で表示される。これにより、デザイナの注意喚起につながる効果がある。デザイナは、色覚シミュレーターによるＵＩ要素のプレビュー表示欄３４２に表示されている画像を確認しながら、色の選択をすることができる。

また、プレビュー欄３３の文字と背景の輝度比の表示欄３３１（図５参照）には、文字と背景との輝度コントラスト比の算出理由の説明がある旨を示すヘルプマーク（例えば、「？」マーク）が表示され、ヘルプマークが押下された場合にホップアップのメッセージボックスを表示することができる。これにより、デザイナは、判定不能となっている理由を知ることができる効果がある。

ＵＩ要素である部品（例えば、ボタン本体１００）（図１１参照）は、要素として、文字（例えば、文字１０１）と背景（例えば、ボタンの背景１０２）のほかに、枠線（例えば、ボタンの枠線１０３）を含んで構成される。色作成操作画面（例えば、図６の画面３０Ｗ）の指定された該部品を構成する要素毎に表示された複数の色選択用のカラーパレット（例えば、図６に示すカラーパレット４５ｂ，４５ｃ、または、カラーパレット４５ｄ，４５ｂ）間には、隣接する要素であることを示す連系線が表示される。文字と背景との輝度コントラスト比が第１の比率（例えば、４．５：１）未満となる場合、連系線上に文字が識別できない可能性がある旨のマーク（例えば、マーク４２ｄの「×」マーク）が付される。背景と枠線の輝度コントラスト比が第２の比率（例えば、３：１）未満となる場合、連系線上に文字以外の隣接する要素が識別できない可能性がある旨のマーク（例えば、マーク４２ｃの「／」マーク）が表示される。

色作成操作画面には、背景（例えば、ボタンの背景１０２）がグラデーションの設定がされている場合、連系線上に輝度コントラスト比を算出することが困難である旨のマーク（例えば、図５に示すマーク４２ａの「？」マーク）を付することができる。

本実施形態の色作成支援ツール３０を、デザイナが利用すれば、Ｗｅｂシステムの開発効率をあげることができ、しかも、各Ｗｅｂブラウザの表示方法の確認までもが効率的に行える。

デザイナは、ＵＩ要素を作成する際は、文字と背景の色の輝度コントラスト比を４．５：１以上とするために、多大な時間を一般的に要するが、本色作成支援ツール３０を利用することにより、短時間で色を決定することができる。また、デザイナが作成したＵＩ要素について印刷する際に、カラー表示したものを印刷すると、コストが大幅にかかるのが常である。このため、グレースケール表示で印刷することもあるが、その場合に、印刷してみると、文字などが判別できない状態であることに気付くことがある。よって、本色作成支援ツール３０の輝度比近似グレースケールで、問題なく判別できることを確認したものを印刷することにより、印刷費用を低減できる効果もある。

本実施形態では、図１において、Ｗｅｂサーバ１０とクライアント２０との関係で説明したが、これに限定されるわけではない。色作成支援ツール３０のプログラムをクライアント２０にインストールして使用してもよい。

１ 設定色表示部
２ 色相表示部
３ 表示色調整部（指定部）
３ａ 色合い
３ｂ 鮮やかさ
３ｃ 明るさ
３ｄ 不透明度
１０ Ｗｅｂサーバ（色作成支援装置）
１１ 処理部
１２ 記憶部（データベース）
２０ クライアント
３０ 色作成支援ツール
３１ パーツ一覧
３２ ＵＩ要素一覧表
３３ ＵＩ要素のプレビュー欄
３４ 色覚シミュレーター欄
３５ 新規作成ボタン
３６ 詳細情報／編集ボタン
３７ 削除ボタン
３８ コードを表示ボタン
４０ 編集欄
４１ 状態タブ
４２ マーク
４３ ＵＩ要素の形変更欄
４４ ＵＩ要素の構成欄
４５ カラーパレット
４６ 名前を付けて保存ボタン
４７ 上書き保存ボタン
４８ コードを表示ボタン
５０ 画面
６０ 画面（色確認画面）
５１ ＨＴＭＬのコード表示欄
５２ ＣＳＳのコード表示欄
６１ ＨＴＭＬのコード入力欄
６２ ＣＳＳのコード入力欄
９０ インターネット
１００ ボタン本体（部品１）
１０１ 文字
１０２ ボタンの背景（部品２）
１０３ ボタンの枠線
１０４ ボタンの装飾
２００ 背景
３０Ｗ 画面（色作成支援操作画面）
３２１ リスト表
３３１ 文字と背景の輝度比の表示欄
３３２ ＵＩ要素のプレビュー表示欄
３４１ 輝度比近似グレースケール選択欄
３４２ ＵＩ要素のプレビュー表示欄
４２ｍ マークの意味欄
４５Ａ カラーパレット表示エリア
４５Ｍ 単色のタブ
４５Ｇ グラデーションのタブ

Claims (7)

1. ウェブコンテンツで使用される部品の色の作成を支援する色作成支援装置が、
   クライアントから前記部品の作成要求がある場合、前記ウェブコンテンツ上で使用される部品の色を作成する色作成支援操作画面を表示し、
   前記色作成支援操作画面で、指定された該部品を構成する要素毎に、色作成用のカラーパレットを表示し、
   前記カラーパレットで所望とする色を選択されることにより、選択された該部品の該要素夫々が選択された該色で表示し、
   前記カラーパレットには、色相、明るさ、彩度及び透明度の夫々について指定するための指定部が設けられており、
   前記部品は、前記要素として、少なくとも文字と該文字の背景とから構成され、
   さらに、前記色作成支援装置は、
   前記色作成支援操作画面に、前記カラーパレットとともに、前記部品の色を表示するプレビュー欄および前記部品の色を所定の処理で変換する色を表示する色覚シミュレーター欄を表示し、
   前記色覚シミュレーター欄には、前記プレビュー欄に表示する画像の各ピクセルの相対輝度と、グレースケールに変換された後の各ピクセルの相対輝度とをできる限り同じになるように近似して変換する処理である、輝度比近似グレースケール処理で処理された画像を表示する
   ことを特徴とするウェブコンテンツの色作成支援方法。
2. 前記色作成支援装置は、前記プレビュー欄には、前記文字と前記背景との輝度コントラスト比を計算するための部分の特定が困難である場合、判定不能である旨を表示する
   ことを特徴とする請求項１に記載のウェブコンテンツの色作成支援方法。
3. 前記プレビュー欄には、前記文字と前記背景との輝度コントラスト比の算出理由の説明がある旨を示すヘルプマークが表示され、
   前記色作成支援装置は、前記ヘルプマークが押下された場合にホップアップのメッセージボックスを表示する
   ことを特徴とする請求項１に記載のウェブコンテンツの色作成支援方法。
4. 前記部品は、前記要素として、前記文字と前記背景のほかに、枠線を含んで構成され、
   前記色作成支援操作画面には、前記指定された該部品を構成する要素毎に表示された複数の色作成用のカラーパレット間には、隣接する要素であることを示す連系線が表示され、
   前記色作成支援装置は、
   前記文字と前記背景との輝度コントラスト比が第１の比率未満となる場合、前記連系線上に前記文字が識別できない可能性がある旨のマークを付し、
   前記背景と前記枠線の輝度コントラスト比が第２の比率未満となる場合、前記連系線上に文字以外の隣接する要素が識別できない可能性がある旨のマークを付する
   ことを特徴とする請求項１に記載のウェブコンテンツの色作成支援方法。
5. 前記色作成支援装置は、前記背景にグラデーションの設定がされている場合、前記連系線上に前記輝度コントラスト比を算出することが困難である旨のマークを付する
   ことを特徴とする請求項４に記載のウェブコンテンツの色作成支援方法。
6. 前記第１の比率は４．５：１であり、前記第２の比率は３：１である
   ことを特徴とする請求項４に記載のウェブコンテンツの色作成支援方法。
7. 前記色作成支援装置は、前記色作成支援操作画面により作成された部品のコード出力要求を受理した場合、前記部品をウェブ画面で表示する際に必要となるＨＴＭＬ用のコードおよびＣＳＳ用のコードを出力し、
   色確認用の画面要求があると、前記ＨＴＭＬ用のコードおよびＣＳＳ用のコードを入力するための色確認画面を表示し、
   表示確認要求を受理すると、前記入力された前記ＨＴＭＬ用のコードおよびＣＳＳ用のコードに基づき、前記色確認画面に部品を表示する
   ことを特徴とする請求項１に記載のウェブコンテンツの色作成支援方法。