配色診断方法、配色診断装置、配色診断プログラム
【課題】ウェブコンテンツの配色がガイドラインに適った配色か否かを迅速かつ的確に診断する。
【解決手段】ウェブページをインターネット経由で受信する（Ｓ０１）。ウェブページのＨＴＭＬファイルおよびＣＣＣファイルから色コードと要素属性とを抽出した（Ｓ０２）後にＨＴＭＬの行数と要素属性毎に色コードを整理する（Ｓ０３）。ウェブページの全ファイルから外観画像を作成し（Ｓ０４）、画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する（Ｓ０５）。Ｓ０３．Ｓ０５処理データを統合整理し（Ｓ０６）、要素属性の情報を追加して診断すべき配色セットを定める（Ｓ０７）。診断すべき配色セットにおける配色のコントラスト値を計算し（Ｓ０８）、診断結果を生成する（Ｓ０９）。配色情報と診断結果を表示する（Ｓ１０）。
【解決手段】ウェブページをインターネット経由で受信する（Ｓ０１）。ウェブページのＨＴＭＬファイルおよびＣＣＣファイルから色コードと要素属性とを抽出した（Ｓ０２）後にＨＴＭＬの行数と要素属性毎に色コードを整理する（Ｓ０３）。ウェブページの全ファイルから外観画像を作成し（Ｓ０４）、画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する（Ｓ０５）。Ｓ０３．Ｓ０５処理データを統合整理し（Ｓ０６）、要素属性の情報を追加して診断すべき配色セットを定める（Ｓ０７）。診断すべき配色セットにおける配色のコントラスト値を計算し（Ｓ０８）、診断結果を生成する（Ｓ０９）。配色情報と診断結果を表示する（Ｓ１０）。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、ＨＴＭＬなどのマークアップ言語で記述されたコンテンツの配色の見易さを診断する技術に関する。
【背景技術】
【０００２】
近年、インターネットが社会において広く普及し、様々な環境で閲覧されうることから、老人や障害者など様々な特徴を持った利用者がいることを想定したウェブコンテンツの作成・提供が求められている。その中で、ウェブサイトのアクセシビリティを担保するためのチェック項目を記述した「ウェブアクセシビリティガイドライン」が重要視されている。
【０００３】
２００８年には、「Ｗｏｒｌｄ Ｗｉｄｅ Ｗｅｂ Ｃｏｎｓｏｒｔｉｕｍ（以下、Ｗ３Ｃ）」が、非特許文献１の「Ｗｅｂ Ｃｏｎｔｅｎｔ Ａｃｃｅｓｓｉｂｉｌｉｔｙ Ｇｕｉｄｅｌｉｎｅｓ ２．０（以下、ＷＣＡＧ２．０）」を策定した。これを受けて２００９年には、日本規格協会のＪＩＳ Ｘ ８３４１−３：２００９ 「高齢者・障害者等配慮設計指針−情報通信における機器、ソフトウェア、及びサービス」（以下、新ＪＩＳ）も改訂される予定となっている。この新ＪＩＳは、ＷＣＡＧ２．０の日本語訳であり、その内容は同じであるとされている。
【０００４】
このガイドラインのチェック項目の中に、ウェブサイトの配色に関する項目が存在する。これらは電子機器のディスプレイや電子ファイルのカラー化が進んだことでウェブサイトに多くの色が使用されている現状に鑑み、白黒での印刷や、遺伝または疾患により色の見え方が異なる特性を持つ利用者を考慮するというカラーユニバーサルデザインの考え方から規定されている（非特許文献２参照）。
【０００５】
このチェック項目の内容としては、背景色と文字色の２色に対して色や明るさのコントラスト（違いの程度）を計算し、その計算値が基準以上になればその文字は読みやすい、基準に満たなければ文字が読みにくい、とするものである。ここではガイドラインに計算されている数式を用いれば、誰でもチェックすることが可能となっている。
【先行技術文献】
【非特許文献】
【０００６】
【非特許文献１】”Ｗ３Ｃ Ｗｅｂ Ｃｏｎｔｅｎｔ Ａｃｃｅｓｓｉｂｉｌｉｔｙ Ｇｕｉｄｅｌｉｎｅｓ ２．０”，「ｏｎｌｉｎｅ」，Ｗ３Ｃ Ｒｅｃｏｍｍｅｎｄａｔｉｏｎ １１ Ｄｅｃｅｍｂｅｒ ２００８，「平成２１年４月２０日 検索」，インターネット＜ＵＲＬ：ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ＷＣＡＧ２０／＞
【非特許文献２】岡部正隆，伊藤啓 “色覚の多様性と色覚バリアフリーなプレゼンテーション（３）” 細胞工学 Ｖｏｌ．２１ Ｎｏ．９ ２００２ ｐｐ．１０８０−１１０４
【発明の概要】
【発明が解決しようとする課題】
【０００７】
しかしながら、非特許文献２のような背景色と文字色の２色の比較だけでは、ウェブサイト全体の配色のバランスを確認することが難しく、またチェックに時間がかかり易いという問題がある。
【０００８】
そこで、ウェブサイトの外見を画像化し、そこから色を抽出する方法も考えられるが、ただ画像内の色を抽出するだけではウェブサイト内のどの要素（背景、文字など）に使用されている色なのかを自動では判断できない。また、ウェブブラウザの機能として文字などが滑らかに見えるようにアンチエイリアス処理されていることもあるため、画像から色を抽出した際に、ＨＴＭＬファイルやＣＳＳファイルでは定義されていない色がノイズとして抽出されることもある。
【０００９】
一方、ウェブサイトを構成する文書内容や文書構造を記述したＨＴＭＬファイルあるいは、そのデザインを記述したＣＳＳファイルから色のコードおよび要素の属性（背景、文字など）を抽出するという方法も考えられる。しかし、ただ色のコードを抽出しただけでは２色の位置関係が分かりにくく、隣接した色であることを前提としたＷＣＡＧ２．０の基準によるチェックができない。また、ウェブサイトによってはＨＴＭＬファイルやＣＳＳファイル内に背景色、文字色が記述されていないケースも少なくない。
【００１０】
本発明は、上述のような従来技術の問題点を解決するためになされたものであり、配色がウェブアクセシビリティのガイドラインに適った配色か否かを迅速かつ的確に診断することを解決課題としている。
【課題を解決するための手段】
【００１１】
そこで、本発明は、ウェブサイトなどのウェブコンテンツを画像化した生成画像中、色が切り替った部分の配色セット群を抽出し、そのうちマークアップ言語で記述されたファイルの色コードで指定されている配色セットのみに対して、コントラスト診断を行い、診断結果を提示する。
【００１２】
本発明の一態様は、ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示させる配色診断方法であって、色コード抽出手段が、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出ステップと、画像処理手段が、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理ステップと、色コード処理手段が、前記両ステップの処理データを統合整理し、診断すべき配色セットを定める色コード処理ステップと、コントラスト計算手段が、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算ステップと、を有する。
【００１３】
本発明の他の態様は、ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示する配色診断装置であって、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出手段と、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理手段と、前記両手段の処理データを統合整理し、診断すべき配色セットを定める色コード処理手段と、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算手段と、を備える。
【００１４】
なお、本発明は、前記配色診断装置を構成する各手段としてコンピュータを機能させるためのプログラムとしても構成することができる。このプログラムは、ネットワークを通じた態様で提供してもよく、記録媒体に格納した態様で提供してもよい。
【発明の効果】
【００１５】
本発明によれば、ウェブコンテンツの配色がウェブアクセシビリティのガイドラインに適っているか否かを迅速かつ的確に診断することができる。
【図面の簡単な説明】
【００１６】
【図１】本発明の実施形態に係る診断装置の構成図。
【図２】同 処理フロー図。
【図３】（ａ）はＨＴＭＬファイルから抽出される色コードと要素属性の一例を示す図、（ｂ）はＣＳＳファイルから抽出される色コードと要素属性の一例を示す図。
【図４】配色セットを抽出する模式図。
【図５】診断結果の一例を示す図。
【図６】同 診断装置の他例の構成図。
【発明を実施するための形態】
【００１７】
本発明は、ウェブサイト全体の配色、特にウェブサイト中に存在する背景色と文字色の組合せについて、ウェブサイトの外見画像から抽出される配色セットと、ＨＴＭＬファイルやＣＳＳファイルから抽出される色コードとを組み合わせることでその位置関係を求め、ウェブアクセシビリティのガイドライン（例えばＷＣＡＧ２．０のガイドラインなど）に基づいたコントラスト計算を行い、該ガイドラインの基準に適った配色であるかの診断結果を提示する。
【００１８】
≪装置構成例≫
図１に示すように、本発明の実施形態に係る配色診断装置１は、Ｗｅｂ上のコンテンツサーバ３とインターネット（ネットワーク２）経由で通信可能に接続されている。ここでは前記診断装置１は、前記コンテンツサーバ３の管理運営するウェブサイトを構成するウェブページ上の配色の見易さを診断している。
【００１９】
前記診断装置１は、パーソナルコンピュータ（ＰＣ）からなり、通常のコンピュータのハードウェアリソース、例えばＣＰＵ（Ｃｅｎｔｒａｌ Ｐｒｏｃｅｓｓｏｒ Ｕｎｉｔ），ハードディスクドライブ装置，メモリ（ＲＡＭ），通信デバイス，ディスプレイ，マウス・キーボードなどの入出力装置を備え、インターネット通信手段を持ったアプリケーションの診断処理を実行する。ここでは前記診断装置１は、通信部１１，色コード抽出部１２，要素属性データベース１３，画像処理部１４，色コード処理部１５，コントラスト計算部１６，結果表示部１７として機能する。このうち前記通信部１１は、前記通信デバイスをもって実現され、前記要素属性データベース１３は前記ハーディスクドライブ装置上に構築され、前記結果表示部１７は前記ディスプレイをもって構成されている。
【００２０】
具体的には、前記通信部１１は、前記コンテンツサーバ３からインターネット経由で診断対象のウェブページを受信する。ここではウェブページを構成するファイルのうち、マークアップ言語で記述されたファイルのソースコードを前記色コード１２に伝送する。また、前記ファイルのすべてを前記画像処理部１４に伝送する。
【００２１】
前記色コード抽出部１２は、伝送された前記ソースコードに存在するすべての色コードおよび要素属性を抽出する。ここで抽出すべき要素属性は、前記要素属性データベース１３に保持されている。抽出された色コード群は要素属性（背景色、文字色など）に応じて整理される。この整理後に色コードおよび要素属性が前記色コード処理部１５に伝送される。
【００２２】
前記画像処理部１４は、伝送されたファイルに基づき診断対象ウェブページの外観画像を生成する。この生成画像内を任意のピクセル間隔で走査し、隣接する画素の色（ＲＧＢ）が切り替った部分の配色セットを抽出する。ここで抽出された各配色セットは色コードに変換され、該変換後の配色セットが前記色コード処理部１５に伝送される。
【００２３】
前記色コード処理部１５は、前記色コード抽出部１２の抽出した色コード群と、前記画像処理部１４が変換した配色セットの色コード群とを統合整理し、一方の色コードが他方の色コードに存在しない場合には削除される。この統合整理後の配色セットに前記要素属性を追加し、診断すべき配色セットの組合せを定め、前記コントラスト計算部１６に伝送する。
【００２４】
前記コントラスト計算部１６は、伝送された配色セットの色コントラスト値を算出し、十分な色コントラストが保たれているか否かの診断を行う。ここではＷＣＡＧ２．０のガイドラインに従って診断されるものとする。この診断結果は、前記結果表示部１７に表示される。以下、前記診断装置１の処理ステップ（Ｓ０１〜Ｓ１０）を図２に基づき説明する。
【００２５】
≪前記診断装置１の処理ステップ≫
Ｓ０１：前記通信部１１が、診断対象のコンテンツをインターネット上のウェブサーバから取得するための通信を実施する。すなわち、ウェブページのＵＲＬ（Ｕｎｉｆｏｒｍ Ｒｅｓｏｕｒｃｅ Ｌｏｃａｔｏｒ）をブラウザ上から入力・送信すると、前記通信部１１がネットワーク経由で前記コンテンツサーバ３にアクセスし、該ウェブページを受信する。
【００２６】
ここではウェブページを構成するファイル類をすべて取得するものとする。代表例としては、マークアップ言語で記述されたＨＴＭＬファイルやＣＳＳファイル、画像ファイルなどが挙げられる。また、前記通信部１１は、取得した対象コンテンツのうち、ＨＴＭＬファイルとＣＳＳファイルのソースコードを色コード抽出部１２に伝送し、ＨＴＭＬファイルとＣＳＳファイルを含めた全ての取得ファイルを画像処理部１４に伝送する。
【００２７】
Ｓ０２：前記色コード抽出部１２は、Ｓ０１で伝送された対象コンテンツのＨＴＭＬファイル及びＣＳＳファイルの中に記述されている色コードを、その要素属性と併せてすべて抽出する。ここで色コードとは、ＨＴＭＬ及びＣＳＳにおいて色を指定する際の記述形式を意味する。この色コードでは、記号「＃」の後に、左から赤を表すＲ値，緑を表すＧ値，青を表すＢ値の順に１６進数で表現されている。
【００２８】
また、要素とはＨＴＭＬにおいて背景や表などウェブページを構成する単位であり、ＨＴＭＬの＜＞のタグ内に記述される。属性とはそのタグ中に追加される情報である。要素および属性は、共に色がどのような対象に利用されているのか（例えば、背景色なのか文字色なのか）の判断に用いることができる。なお、ＣＳＳではプロパティと呼ばれている。本実施形態では、これらをまとめて要素属性とする。
【００２９】
このように前記色コード抽出１２が抽出する要素属性は、前記要素属性データベース１３に保持され、ＨＴＭＬファイルでは色コードと同じ行で色コードよりも前に記述されている属性または要素を、ＣＳＳファイルでは色コードの前に記述されているプロパティが抽出される。
【００３０】
具体的には、前記要素属性データベース１３には、背景として抽出する要素属性としてＨＴＭＬのｂｏｄｙ要素内の「ｂｇｃｏｌｏｒ」属性、ｔａｂｌｅ要素内の「ｂｇｃｏｌｏｒ」属性、ＣＳＳの「ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ」プロパティなどが保持され、文字として抽出する要素属性として、ＨＴＭＬのｂｏｄｙ要素内の「ｔｅｘｔ」属性、リンク文字の色を指定する「ｌｉｎｋ」属性、ＣＳＳの「ｃｏｌｏｒ」プロパティなどが保持されている。
【００３１】
図３（ａ）は、ＨＴＭＬファイルから色コードと要素属性を抽出した事例を示している。ここでは「＃９９ＣＣＦＦ」の前に「ｂｇｃｏｌｏｒ」という背景色を表す属性が記述されているため、背景色として抽出される。また、「＃００００００」の前に「ｔｅｘｔ」という文字色を表す属性が記述されているため、文字色として抽出される。
【００３２】
図３（ｂ）は、ＣＳＳファイルから色コードと要素属性を抽出した事例を示し、「＃ｆ０ｆｆｆ０」の前に背景色を表す「ｂａｃｋｇｒｏｕｎｄ」プロパティが記述されているため、背景色として抽出される。ここで要素属性データベース１３にｂｏｒｄｅｒ属性が保持されていないものとすると、「ｂｏｒｄｅｒ」属性の色コード「＃６６６６６６」は抽出されないことになる。
【００３３】
Ｓ０３：また、前記色コード抽出部１２は、ＨＴＭＬファイルとＣＳＳファイルから抽出された色コードの整理を実施する。具体的には、まずＣＳＳファイル内に記述されている各ｃｌａｓｓ名がＨＴＭＬのどの行に参照されているかを調べる。
【００３４】
このときＨＴＭＬファイルはソースコードが記述されている行とウェブページの表示位置との間に関連があるが、ＣＳＳファイルはＨＴＭＬのコードに参照された際にその効果を発するため、ＣＳＳファイル内の行と表示位置との間に関連がない。そこで、ＨＴＭＬのコードで何行目に参照されているかによって、ＨＴＭＬファイルとＣＳＳファイルの色コードを関連づける必要がある。
【００３５】
図３（ｂ）のＣＳＳファイルの事例によれば、「．ｃａｌｅｎｄｅｒ」で指定されているが、例えばＨＴＭＬファイルの１５行目に「＜ｄｉｖ ｃｌａｓｓ＝”ｃａｌｅｎｄｅｒ”＞」と指定されていれば、１５行目の記述に影響してくることが判断できる。このようにＨＴＭＬファイルから抽出された色コードと、ＣＳＳファイルから抽出された色コードとをＨＴＭＬファイルの行数および要素属性から整理する。
【００３６】
ここで、ＨＴＭＬファイルおよびＣＳＳファイルの両方で背景色、文字色が記述されていないケースを考慮し、ＨＴＭＬの要素属性として、背景色白（＃ＦＦＦＦＦＦ）、文字色黒（＃００００００）をデフォルト色に設定し、ＨＴＭＬの行数０の部分に挿入する。
【００３７】
【表１】
【００３８】
表１は、上記のように整理された処理結果の一例を示している。ここでは前記処理結果をデータ（Ａ）とする。このデータ（Ａ）は、前記色コード処理部１５に伝送される。
【００３９】
Ｓ０４：前記画像処理部１４は、Ｓ０１で伝送された取得ファイルに基づき診断対象ウェブページの外観を画像化する。ここでは一般のウェブブラウザのようにウェブページの外観を各コンテンツファイルより再現し、画像化する機能があればよい。
【００４０】
Ｓ０５：前記画像処理部１４は、Ｓ０４で作成した画像において、画像の縦方向の１０ピクセル間隔ごとに、隣接している色の情報を取得する。方法としては、作成された画像の縦のサイズをＨピクセルとおくと、縦の１０ｎ（ｎ＝１，２，３，…，Ｈ）ピクセルの位置において、横方向に２ピクセルずつ走査し、図４に示すように、異なる２色となる部分、即ち色が切り替わった部分の２色のセットを抽出していく。この２色のセットを配色セットと定義する。
【００４１】
このとき走査を１０ピクセルの間隔とするのは、ウェブページ上に文字が存在する時に「一」という文字だけが横一列に並んでいることは現実的に考えにくく、また、単なる罫線であれば、背景色と文字色のコントラスト基準を適用する必要はないためである。画像の縦のサイズが１２００ピクセルであったとしても、走査の作業は１２０回で済むことになる。
【００４２】
また、前記画像処理部１４は、前記作成画像より抽出されたすべての配色セットを１６進数の色コードに変換する。すなわち、Ｒ値，Ｇ値，Ｂ値をそれぞれ１０進数から１６進数に変換し、記号「＃」の後にＲ値，Ｇ値，Ｂ値の順に左から並べるものとする。このように全ての配色セットを色コードに変換したデータ（Ｂ）を表２に示す。このデータ（Ｂ）は、前記色コード処理部１５に伝送される。
【００４３】
【表２】
【００４４】
Ｓ０６：前記色コード処理部１５は、Ｓ０３で伝送されたデータ（Ａ）と、Ｓ０５で伝送されたデータ（Ｂ）とを統合させ整理する。具体的には、データ（Ａ）中の色コードのうち、データ（Ｂ）に存在しない色コードを削除する。これはＨＴＭＬファイルなどのソースコードに記述されているが、実際のウェブページには使用されていないか、あるいは表示されていない色を省略するためである。
【００４５】
また、データ（Ｂ）に存在する色コードのうち、データ（Ａ）には存在しない色コードも削除するものとする。なお、データ（Ｂ）の配色セットにおいて、一方の色コードが削除された場合には、該配色セットを削除するものとする。
【００４６】
Ｓ０７：また、前記色コード処理部１５は、データ（Ａ）に基づきデータ（Ｂ）に要素属性の情報を追加する。ここでは要素属性を、データ（Ａ）のＨＴＭＬにおける同じ行に存在する色コードに対して追加していく。
【００４７】
【表３】
【００４８】
表３は、データ（Ｂ）に表素属性を追加した処理結果を示している。ここではデータ（Ｂ）の配色セットは、「背景―背景」、「背景―文字／文字―背景」、「文字―文字」、「背景―なし／なし―背景」、「文字―なし／なし―文字」の組合せに分類されている（なお、表３中では、「文字―なし／なし―文字」の組合せが省略されている。）。
【００４９】
このうち「背景―なし／なし―背景」の組合せについては、データ（Ａ）内を探索し、該当行より前に位置するＨＴＭＬ文字色の色コード群中に、もう一方（なし）の色コードが存在するか否かを確認する。存在した場合には、もう一方（なし）の色は文字色であると定義する。逆に存在しない場合には背景色の色コードで再度確認する。存在した場合には背景色と定義する。いずれにも存在しない場合には「確認」項目を付与する。
【００５０】
また、「文字―なし／なし―文字」の組合せについては、データ（Ａ）内を探索し、該当行より前に位置するＨＴＭＬ背景色の色コード群中、もう一方（なし）の色コードが存在するか否かを確認する。存在した場合には、もう一方（なし）の色は背景色であると定義する。逆に存在しない場合には文字色の色コードで再確認する。存在した場合には文字色と定義する。いずれにも存在しない場合には「注意１」項目を付与する。
【００５１】
このように整理された配色セットのうち、「背景―文字／文字―背景」の組合せに「通常」項目を付与し、「文字―文字」の組合せに「注意２」項目を付与し、「背景―背景」の組合せに「不要」項目を付与する。この後に表３のデータＢが前記コントラスト計算部１６に伝送される。
【００５２】
Ｓ０８：前記コントラスト計算部１６では、Ｓ０７で伝送された表３のデータ（Ｂ）に基づき色コントラストの計算を行う。ここでは伝送データ中、「通常」「注意１」「注意２」「確認」項目の配色セットに対して、２色の色コントラスト計算を行う。「不要」項目の配色セットに対しては、色コントラスト計算を行わない。具体的な計算方法は、ＷＣＡＧ２．０のガイドライン従うものとし、以下の算出方法を実行する。
【００５３】
まず、１６進数の色コードをＲＧＢ値に戻す。その後に明るさを表すＬ値を、各配色セットのそれぞれの色に対して、数式１を用いて算出する。この数式１はプログラムに定義されているものとする。
数式１：Ｌ＝０．２１２６＊（（Ｒ／２５５）＾２．２）＋０．７１５２＊（（Ｇ／２５５）＾２．２）＋０．０７２２＊（（Ｂ／２５５）＾２．２）
つぎに、Ｌ値の大きい色（明るい方の色）をＬ１、Ｌ値の小さい色（暗い方の色）をＬ２とし、色コントラスト値Ｃを数式２で算出する。この数式２もプログラムに定義されているものとする。
数式２：Ｃ＝（Ｌ１＋０．０５）／（Ｌ２＋０．０５）
Ｓ０９：また、前記コントラスト計算部１６は、Ｓ０８で算出した色コントラスト値Ｃを用いて、各配色セットに十分な色コントラスト値が保たれているか否かを診断する。ここではＷＣＡＧ２．０のガイドラインに従って診断するものとする。
【００５４】
ＷＣＡＧ２．０のガイドラインによれば、Ｃ値が５以上（２色のコントラスト比が５：１以上）の時にレベルＡＡ、１０以上（コントラスト比１０：１以上）の時にレベルＡＡＡでより良い結果とされている。ここでは色コントラスト値が５未満、５以上１０未満、１０以上の基準で配色セットを分類する。この分類結果を前記配色セットのデータに含めて前記結果表示部１７に伝送する。
【００５５】
Ｓ１０：前記結果表示部１７は、図５（ａ）（ｂ）に示すように、Ｓ０９の伝送データに基づき配色情報および診断結果の表示を行う。ここでは色と色コードの表示を背景と文字に分類し、その配色セットについて、Ｓ０９で計算した色コントラスト値の評価をＰ．Ｑ欄に表示する。
【００５６】
Ｐ欄には、色コントラスト値が「５以上（コントラスト比５：１以上）」か否かの評価が示され、Ｑ欄には、色コントラスト値が「１０以上（コントラスト比１０：１以上）」か否かの評価が示される。このうちＰ，Ｑ欄の評価は「○×」表示で示され、共に「○」表示の場合には、コメント欄Ｒに「非常に見易い配色です」と文書表示される。
【００５７】
Ｐ欄の評価「○」およびＱ欄の評価「×」の場合には、コメント欄Ｒには「見易い配色です」と文書表示される。Ｐ．Ｑ欄共に「×」の場合には、コメント欄Ｒには「見えにくい配色です」と文書表示される。
【００５８】
そして、Ｓ０７で「通常」項目を付与された配色セットは、図５（ａ）に示すように、タイトル欄Ｓに「背景と文字」と表示される。一方、「注意２」項目を付与された配色セットは、図５（ｂ）のタイトル欄Ｓに示すように、文字と文字の組合せであり、色コントラストは十分であるか、見えにくい配色となっていないかの確認が特に必要であることを文書で表示するものとする。
【００５９】
同様に「注意１」項目を付与された配色セットは、タイトル欄Ｓに文字色に対する周囲の色が背景色であるか否かの確認が必要であることを文書で表示するものとする。また、「確認」項目を付与された配色セットも、色の組合せが背景色と文字色であるか否かをまず確認する必要があることを文書で表示するものとする。
【００６０】
このようにウェブページ上の配色について、ＨＴＭＬファイル、ＣＳＳファイルのソースコードと、ウェブページの外観を画像化した生成画像とから色コード，要素属性情報，表示位置を抽出し、かつ不要な色コードを整理削除していることから、背景色と文字色の見やすさを迅速かつ的確に診断することできる。
【００６１】
特に、所定のピクセル間隔で走査したときに色が切り替った配色セット群の色コードを利用しているため（Ｓ０４〜Ｓ０７）、ＷＣＡＧ２．０のガイドラインに基づきウェブページ全体の配色バランスを考慮した診断結果が得られる。このときＨＴＭＬファイルのソースコードから抽出した要素属性を追記していることから（Ｓ０７）、ウェブページ内で使用される要素を自動的に判断できる。
【００６２】
また、ＨＴＭＬファイルやＣＳＳファイル内に背景色、文字色が記述されていないケースを考慮して、Ｓ０３でＨＴＭＬの要素属性のデフォルト色が設定されていることから、かかるケースにも対応することもできる。さらに、「注意１」，「注意２」，「確認」項目の付与された配色セットには、コメント欄Ｓにコメントが記述されるため、ユーザの注意が喚起され、この点で誤操作などが抑制される。
【００６３】
≪他の構成例等≫
図６は、本発明の配色診断装置を、ウェブ上のサーバ２０で実現した構成例を示している。ここではユーザ端末２１のブラウザ上で入力された診断対象ウェブページのＵＲＬを前記通信部１１にて受信し、かかるウェブページを構成する全ファイルを前記コンテンツサーバ３から取得する。この取得ファイルに基づきＳ０２〜Ｓ０９の処理ステップが実行される。この各ステップの処理結果、即ち診断結果は前記ユーザ端末２１に送信され、Ｓ１０の表示結果が前記ユーザ端末２１のブラウザ上に表示される。
【００６４】
なお、本発明は、上記実施形態に限定されるものではなく、例えばＳ０５において走査は縦を１０ピクセル間隔で、横を２ピクセルずつで行っているが、間隔は必ずしもこの値でなくてもよく、任意の値を用いてよい。また、Ｓ０６において色コントラストの計算方法および基準値はＷＣＡＧ２．０で規定されているものを使用しているが、他の計算方法、基準値を用いてもよい。特に基準値は、より基準を厳しくするために値を変えることも可能である。
【００６５】
さらに、Ｓ０７で「文字―なし」あるいは「背景―なし」の配色セットに対して、他方のＨＴＭＬ要素属性（なし）は行数がより少ない方向に含まれる色コードとの照合を行っているが、本来、背景色と文字色はセットで記述されるべきものである。したがって、この処理を行わず、「警告」項目であるとして、結果表示部１７において「両要素の色を指定して下さい」といった文章をコメント欄Ｓに表示することも可能である。
【００６６】
Ｓ１０の結果表示は、図５（ａ）（ｂ）の表示例だけでなく、他の表示方法を用いてもよい。例えばＳ０３で生成したウェブページの外観画像内の位置を示す印を表示することも可能である。また、前記要素属性データベース１３に保持される情報は、前述の属性情報に限らず、他の要素，属性，プロパティを追加することも可能である。
【００６７】
≪プログラム等≫
本発明は、前記診断装置１．２０の各手段１１〜１７の一部もしくは全部としてコンピュータを機能させるためのプログラムとして構成することもできる。この場合には、Ｓ０１〜Ｓ１０の全ステップあるいはその一部のステップをコンピュータに実行させる。
【００６８】
このプログラムは、Ｗｅｂサイトや電子メールなどネットワークを通じて提供することができる。また、前記プログラムは、ＣＤ−ＲＯＭ，ＤＶＤ−ＲＯＭ，ＣＤ−Ｒ，ＣＤ−ＲＷ，ＤＶＤ−Ｒ，ＤＶＤ−ＲＷ，ＭＯ，ＨＤＤ，Ｂｌｕ−ｒａｙ Ｄｉｓｋ（登録商標）などの記録媒体１０に記録して、保存・配布することも可能である。この記録媒体は、記録媒体駆動装置を利用して読み出され、そのプログラムコード自体が前記実施形態の処理を実現するので、該記録媒体も本発明を構成する。
【符号の説明】
【００６９】
１．２０…配色診断装置
２…ネットワーク（インターネット）
３…コンテンツサーバ
１１…通信部
１２…色コード抽出部（色コード抽出手段）
１３…要素属性データベース
１４…画像処理部（画像処理手段）
１５…色コード処理部（色コード処理手段）
１６…コントラスト計算部（コントラスト計算手段）
１７…結果表示部
２１…ユーザ端末
【技術分野】
【０００１】
本発明は、ＨＴＭＬなどのマークアップ言語で記述されたコンテンツの配色の見易さを診断する技術に関する。
【背景技術】
【０００２】
近年、インターネットが社会において広く普及し、様々な環境で閲覧されうることから、老人や障害者など様々な特徴を持った利用者がいることを想定したウェブコンテンツの作成・提供が求められている。その中で、ウェブサイトのアクセシビリティを担保するためのチェック項目を記述した「ウェブアクセシビリティガイドライン」が重要視されている。
【０００３】
２００８年には、「Ｗｏｒｌｄ Ｗｉｄｅ Ｗｅｂ Ｃｏｎｓｏｒｔｉｕｍ（以下、Ｗ３Ｃ）」が、非特許文献１の「Ｗｅｂ Ｃｏｎｔｅｎｔ Ａｃｃｅｓｓｉｂｉｌｉｔｙ Ｇｕｉｄｅｌｉｎｅｓ ２．０（以下、ＷＣＡＧ２．０）」を策定した。これを受けて２００９年には、日本規格協会のＪＩＳ Ｘ ８３４１−３：２００９ 「高齢者・障害者等配慮設計指針−情報通信における機器、ソフトウェア、及びサービス」（以下、新ＪＩＳ）も改訂される予定となっている。この新ＪＩＳは、ＷＣＡＧ２．０の日本語訳であり、その内容は同じであるとされている。
【０００４】
このガイドラインのチェック項目の中に、ウェブサイトの配色に関する項目が存在する。これらは電子機器のディスプレイや電子ファイルのカラー化が進んだことでウェブサイトに多くの色が使用されている現状に鑑み、白黒での印刷や、遺伝または疾患により色の見え方が異なる特性を持つ利用者を考慮するというカラーユニバーサルデザインの考え方から規定されている（非特許文献２参照）。
【０００５】
このチェック項目の内容としては、背景色と文字色の２色に対して色や明るさのコントラスト（違いの程度）を計算し、その計算値が基準以上になればその文字は読みやすい、基準に満たなければ文字が読みにくい、とするものである。ここではガイドラインに計算されている数式を用いれば、誰でもチェックすることが可能となっている。
【先行技術文献】
【非特許文献】
【０００６】
【非特許文献１】”Ｗ３Ｃ Ｗｅｂ Ｃｏｎｔｅｎｔ Ａｃｃｅｓｓｉｂｉｌｉｔｙ Ｇｕｉｄｅｌｉｎｅｓ ２．０”，「ｏｎｌｉｎｅ」，Ｗ３Ｃ Ｒｅｃｏｍｍｅｎｄａｔｉｏｎ １１ Ｄｅｃｅｍｂｅｒ ２００８，「平成２１年４月２０日 検索」，インターネット＜ＵＲＬ：ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ＷＣＡＧ２０／＞
【非特許文献２】岡部正隆，伊藤啓 “色覚の多様性と色覚バリアフリーなプレゼンテーション（３）” 細胞工学 Ｖｏｌ．２１ Ｎｏ．９ ２００２ ｐｐ．１０８０−１１０４
【発明の概要】
【発明が解決しようとする課題】
【０００７】
しかしながら、非特許文献２のような背景色と文字色の２色の比較だけでは、ウェブサイト全体の配色のバランスを確認することが難しく、またチェックに時間がかかり易いという問題がある。
【０００８】
そこで、ウェブサイトの外見を画像化し、そこから色を抽出する方法も考えられるが、ただ画像内の色を抽出するだけではウェブサイト内のどの要素（背景、文字など）に使用されている色なのかを自動では判断できない。また、ウェブブラウザの機能として文字などが滑らかに見えるようにアンチエイリアス処理されていることもあるため、画像から色を抽出した際に、ＨＴＭＬファイルやＣＳＳファイルでは定義されていない色がノイズとして抽出されることもある。
【０００９】
一方、ウェブサイトを構成する文書内容や文書構造を記述したＨＴＭＬファイルあるいは、そのデザインを記述したＣＳＳファイルから色のコードおよび要素の属性（背景、文字など）を抽出するという方法も考えられる。しかし、ただ色のコードを抽出しただけでは２色の位置関係が分かりにくく、隣接した色であることを前提としたＷＣＡＧ２．０の基準によるチェックができない。また、ウェブサイトによってはＨＴＭＬファイルやＣＳＳファイル内に背景色、文字色が記述されていないケースも少なくない。
【００１０】
本発明は、上述のような従来技術の問題点を解決するためになされたものであり、配色がウェブアクセシビリティのガイドラインに適った配色か否かを迅速かつ的確に診断することを解決課題としている。
【課題を解決するための手段】
【００１１】
そこで、本発明は、ウェブサイトなどのウェブコンテンツを画像化した生成画像中、色が切り替った部分の配色セット群を抽出し、そのうちマークアップ言語で記述されたファイルの色コードで指定されている配色セットのみに対して、コントラスト診断を行い、診断結果を提示する。
【００１２】
本発明の一態様は、ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示させる配色診断方法であって、色コード抽出手段が、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出ステップと、画像処理手段が、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理ステップと、色コード処理手段が、前記両ステップの処理データを統合整理し、診断すべき配色セットを定める色コード処理ステップと、コントラスト計算手段が、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算ステップと、を有する。
【００１３】
本発明の他の態様は、ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示する配色診断装置であって、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出手段と、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理手段と、前記両手段の処理データを統合整理し、診断すべき配色セットを定める色コード処理手段と、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算手段と、を備える。
【００１４】
なお、本発明は、前記配色診断装置を構成する各手段としてコンピュータを機能させるためのプログラムとしても構成することができる。このプログラムは、ネットワークを通じた態様で提供してもよく、記録媒体に格納した態様で提供してもよい。
【発明の効果】
【００１５】
本発明によれば、ウェブコンテンツの配色がウェブアクセシビリティのガイドラインに適っているか否かを迅速かつ的確に診断することができる。
【図面の簡単な説明】
【００１６】
【図１】本発明の実施形態に係る診断装置の構成図。
【図２】同 処理フロー図。
【図３】（ａ）はＨＴＭＬファイルから抽出される色コードと要素属性の一例を示す図、（ｂ）はＣＳＳファイルから抽出される色コードと要素属性の一例を示す図。
【図４】配色セットを抽出する模式図。
【図５】診断結果の一例を示す図。
【図６】同 診断装置の他例の構成図。
【発明を実施するための形態】
【００１７】
本発明は、ウェブサイト全体の配色、特にウェブサイト中に存在する背景色と文字色の組合せについて、ウェブサイトの外見画像から抽出される配色セットと、ＨＴＭＬファイルやＣＳＳファイルから抽出される色コードとを組み合わせることでその位置関係を求め、ウェブアクセシビリティのガイドライン（例えばＷＣＡＧ２．０のガイドラインなど）に基づいたコントラスト計算を行い、該ガイドラインの基準に適った配色であるかの診断結果を提示する。
【００１８】
≪装置構成例≫
図１に示すように、本発明の実施形態に係る配色診断装置１は、Ｗｅｂ上のコンテンツサーバ３とインターネット（ネットワーク２）経由で通信可能に接続されている。ここでは前記診断装置１は、前記コンテンツサーバ３の管理運営するウェブサイトを構成するウェブページ上の配色の見易さを診断している。
【００１９】
前記診断装置１は、パーソナルコンピュータ（ＰＣ）からなり、通常のコンピュータのハードウェアリソース、例えばＣＰＵ（Ｃｅｎｔｒａｌ Ｐｒｏｃｅｓｓｏｒ Ｕｎｉｔ），ハードディスクドライブ装置，メモリ（ＲＡＭ），通信デバイス，ディスプレイ，マウス・キーボードなどの入出力装置を備え、インターネット通信手段を持ったアプリケーションの診断処理を実行する。ここでは前記診断装置１は、通信部１１，色コード抽出部１２，要素属性データベース１３，画像処理部１４，色コード処理部１５，コントラスト計算部１６，結果表示部１７として機能する。このうち前記通信部１１は、前記通信デバイスをもって実現され、前記要素属性データベース１３は前記ハーディスクドライブ装置上に構築され、前記結果表示部１７は前記ディスプレイをもって構成されている。
【００２０】
具体的には、前記通信部１１は、前記コンテンツサーバ３からインターネット経由で診断対象のウェブページを受信する。ここではウェブページを構成するファイルのうち、マークアップ言語で記述されたファイルのソースコードを前記色コード１２に伝送する。また、前記ファイルのすべてを前記画像処理部１４に伝送する。
【００２１】
前記色コード抽出部１２は、伝送された前記ソースコードに存在するすべての色コードおよび要素属性を抽出する。ここで抽出すべき要素属性は、前記要素属性データベース１３に保持されている。抽出された色コード群は要素属性（背景色、文字色など）に応じて整理される。この整理後に色コードおよび要素属性が前記色コード処理部１５に伝送される。
【００２２】
前記画像処理部１４は、伝送されたファイルに基づき診断対象ウェブページの外観画像を生成する。この生成画像内を任意のピクセル間隔で走査し、隣接する画素の色（ＲＧＢ）が切り替った部分の配色セットを抽出する。ここで抽出された各配色セットは色コードに変換され、該変換後の配色セットが前記色コード処理部１５に伝送される。
【００２３】
前記色コード処理部１５は、前記色コード抽出部１２の抽出した色コード群と、前記画像処理部１４が変換した配色セットの色コード群とを統合整理し、一方の色コードが他方の色コードに存在しない場合には削除される。この統合整理後の配色セットに前記要素属性を追加し、診断すべき配色セットの組合せを定め、前記コントラスト計算部１６に伝送する。
【００２４】
前記コントラスト計算部１６は、伝送された配色セットの色コントラスト値を算出し、十分な色コントラストが保たれているか否かの診断を行う。ここではＷＣＡＧ２．０のガイドラインに従って診断されるものとする。この診断結果は、前記結果表示部１７に表示される。以下、前記診断装置１の処理ステップ（Ｓ０１〜Ｓ１０）を図２に基づき説明する。
【００２５】
≪前記診断装置１の処理ステップ≫
Ｓ０１：前記通信部１１が、診断対象のコンテンツをインターネット上のウェブサーバから取得するための通信を実施する。すなわち、ウェブページのＵＲＬ（Ｕｎｉｆｏｒｍ Ｒｅｓｏｕｒｃｅ Ｌｏｃａｔｏｒ）をブラウザ上から入力・送信すると、前記通信部１１がネットワーク経由で前記コンテンツサーバ３にアクセスし、該ウェブページを受信する。
【００２６】
ここではウェブページを構成するファイル類をすべて取得するものとする。代表例としては、マークアップ言語で記述されたＨＴＭＬファイルやＣＳＳファイル、画像ファイルなどが挙げられる。また、前記通信部１１は、取得した対象コンテンツのうち、ＨＴＭＬファイルとＣＳＳファイルのソースコードを色コード抽出部１２に伝送し、ＨＴＭＬファイルとＣＳＳファイルを含めた全ての取得ファイルを画像処理部１４に伝送する。
【００２７】
Ｓ０２：前記色コード抽出部１２は、Ｓ０１で伝送された対象コンテンツのＨＴＭＬファイル及びＣＳＳファイルの中に記述されている色コードを、その要素属性と併せてすべて抽出する。ここで色コードとは、ＨＴＭＬ及びＣＳＳにおいて色を指定する際の記述形式を意味する。この色コードでは、記号「＃」の後に、左から赤を表すＲ値，緑を表すＧ値，青を表すＢ値の順に１６進数で表現されている。
【００２８】
また、要素とはＨＴＭＬにおいて背景や表などウェブページを構成する単位であり、ＨＴＭＬの＜＞のタグ内に記述される。属性とはそのタグ中に追加される情報である。要素および属性は、共に色がどのような対象に利用されているのか（例えば、背景色なのか文字色なのか）の判断に用いることができる。なお、ＣＳＳではプロパティと呼ばれている。本実施形態では、これらをまとめて要素属性とする。
【００２９】
このように前記色コード抽出１２が抽出する要素属性は、前記要素属性データベース１３に保持され、ＨＴＭＬファイルでは色コードと同じ行で色コードよりも前に記述されている属性または要素を、ＣＳＳファイルでは色コードの前に記述されているプロパティが抽出される。
【００３０】
具体的には、前記要素属性データベース１３には、背景として抽出する要素属性としてＨＴＭＬのｂｏｄｙ要素内の「ｂｇｃｏｌｏｒ」属性、ｔａｂｌｅ要素内の「ｂｇｃｏｌｏｒ」属性、ＣＳＳの「ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ」プロパティなどが保持され、文字として抽出する要素属性として、ＨＴＭＬのｂｏｄｙ要素内の「ｔｅｘｔ」属性、リンク文字の色を指定する「ｌｉｎｋ」属性、ＣＳＳの「ｃｏｌｏｒ」プロパティなどが保持されている。
【００３１】
図３（ａ）は、ＨＴＭＬファイルから色コードと要素属性を抽出した事例を示している。ここでは「＃９９ＣＣＦＦ」の前に「ｂｇｃｏｌｏｒ」という背景色を表す属性が記述されているため、背景色として抽出される。また、「＃００００００」の前に「ｔｅｘｔ」という文字色を表す属性が記述されているため、文字色として抽出される。
【００３２】
図３（ｂ）は、ＣＳＳファイルから色コードと要素属性を抽出した事例を示し、「＃ｆ０ｆｆｆ０」の前に背景色を表す「ｂａｃｋｇｒｏｕｎｄ」プロパティが記述されているため、背景色として抽出される。ここで要素属性データベース１３にｂｏｒｄｅｒ属性が保持されていないものとすると、「ｂｏｒｄｅｒ」属性の色コード「＃６６６６６６」は抽出されないことになる。
【００３３】
Ｓ０３：また、前記色コード抽出部１２は、ＨＴＭＬファイルとＣＳＳファイルから抽出された色コードの整理を実施する。具体的には、まずＣＳＳファイル内に記述されている各ｃｌａｓｓ名がＨＴＭＬのどの行に参照されているかを調べる。
【００３４】
このときＨＴＭＬファイルはソースコードが記述されている行とウェブページの表示位置との間に関連があるが、ＣＳＳファイルはＨＴＭＬのコードに参照された際にその効果を発するため、ＣＳＳファイル内の行と表示位置との間に関連がない。そこで、ＨＴＭＬのコードで何行目に参照されているかによって、ＨＴＭＬファイルとＣＳＳファイルの色コードを関連づける必要がある。
【００３５】
図３（ｂ）のＣＳＳファイルの事例によれば、「．ｃａｌｅｎｄｅｒ」で指定されているが、例えばＨＴＭＬファイルの１５行目に「＜ｄｉｖ ｃｌａｓｓ＝”ｃａｌｅｎｄｅｒ”＞」と指定されていれば、１５行目の記述に影響してくることが判断できる。このようにＨＴＭＬファイルから抽出された色コードと、ＣＳＳファイルから抽出された色コードとをＨＴＭＬファイルの行数および要素属性から整理する。
【００３６】
ここで、ＨＴＭＬファイルおよびＣＳＳファイルの両方で背景色、文字色が記述されていないケースを考慮し、ＨＴＭＬの要素属性として、背景色白（＃ＦＦＦＦＦＦ）、文字色黒（＃００００００）をデフォルト色に設定し、ＨＴＭＬの行数０の部分に挿入する。
【００３７】
【表１】
【００３８】
表１は、上記のように整理された処理結果の一例を示している。ここでは前記処理結果をデータ（Ａ）とする。このデータ（Ａ）は、前記色コード処理部１５に伝送される。
【００３９】
Ｓ０４：前記画像処理部１４は、Ｓ０１で伝送された取得ファイルに基づき診断対象ウェブページの外観を画像化する。ここでは一般のウェブブラウザのようにウェブページの外観を各コンテンツファイルより再現し、画像化する機能があればよい。
【００４０】
Ｓ０５：前記画像処理部１４は、Ｓ０４で作成した画像において、画像の縦方向の１０ピクセル間隔ごとに、隣接している色の情報を取得する。方法としては、作成された画像の縦のサイズをＨピクセルとおくと、縦の１０ｎ（ｎ＝１，２，３，…，Ｈ）ピクセルの位置において、横方向に２ピクセルずつ走査し、図４に示すように、異なる２色となる部分、即ち色が切り替わった部分の２色のセットを抽出していく。この２色のセットを配色セットと定義する。
【００４１】
このとき走査を１０ピクセルの間隔とするのは、ウェブページ上に文字が存在する時に「一」という文字だけが横一列に並んでいることは現実的に考えにくく、また、単なる罫線であれば、背景色と文字色のコントラスト基準を適用する必要はないためである。画像の縦のサイズが１２００ピクセルであったとしても、走査の作業は１２０回で済むことになる。
【００４２】
また、前記画像処理部１４は、前記作成画像より抽出されたすべての配色セットを１６進数の色コードに変換する。すなわち、Ｒ値，Ｇ値，Ｂ値をそれぞれ１０進数から１６進数に変換し、記号「＃」の後にＲ値，Ｇ値，Ｂ値の順に左から並べるものとする。このように全ての配色セットを色コードに変換したデータ（Ｂ）を表２に示す。このデータ（Ｂ）は、前記色コード処理部１５に伝送される。
【００４３】
【表２】
【００４４】
Ｓ０６：前記色コード処理部１５は、Ｓ０３で伝送されたデータ（Ａ）と、Ｓ０５で伝送されたデータ（Ｂ）とを統合させ整理する。具体的には、データ（Ａ）中の色コードのうち、データ（Ｂ）に存在しない色コードを削除する。これはＨＴＭＬファイルなどのソースコードに記述されているが、実際のウェブページには使用されていないか、あるいは表示されていない色を省略するためである。
【００４５】
また、データ（Ｂ）に存在する色コードのうち、データ（Ａ）には存在しない色コードも削除するものとする。なお、データ（Ｂ）の配色セットにおいて、一方の色コードが削除された場合には、該配色セットを削除するものとする。
【００４６】
Ｓ０７：また、前記色コード処理部１５は、データ（Ａ）に基づきデータ（Ｂ）に要素属性の情報を追加する。ここでは要素属性を、データ（Ａ）のＨＴＭＬにおける同じ行に存在する色コードに対して追加していく。
【００４７】
【表３】
【００４８】
表３は、データ（Ｂ）に表素属性を追加した処理結果を示している。ここではデータ（Ｂ）の配色セットは、「背景―背景」、「背景―文字／文字―背景」、「文字―文字」、「背景―なし／なし―背景」、「文字―なし／なし―文字」の組合せに分類されている（なお、表３中では、「文字―なし／なし―文字」の組合せが省略されている。）。
【００４９】
このうち「背景―なし／なし―背景」の組合せについては、データ（Ａ）内を探索し、該当行より前に位置するＨＴＭＬ文字色の色コード群中に、もう一方（なし）の色コードが存在するか否かを確認する。存在した場合には、もう一方（なし）の色は文字色であると定義する。逆に存在しない場合には背景色の色コードで再度確認する。存在した場合には背景色と定義する。いずれにも存在しない場合には「確認」項目を付与する。
【００５０】
また、「文字―なし／なし―文字」の組合せについては、データ（Ａ）内を探索し、該当行より前に位置するＨＴＭＬ背景色の色コード群中、もう一方（なし）の色コードが存在するか否かを確認する。存在した場合には、もう一方（なし）の色は背景色であると定義する。逆に存在しない場合には文字色の色コードで再確認する。存在した場合には文字色と定義する。いずれにも存在しない場合には「注意１」項目を付与する。
【００５１】
このように整理された配色セットのうち、「背景―文字／文字―背景」の組合せに「通常」項目を付与し、「文字―文字」の組合せに「注意２」項目を付与し、「背景―背景」の組合せに「不要」項目を付与する。この後に表３のデータＢが前記コントラスト計算部１６に伝送される。
【００５２】
Ｓ０８：前記コントラスト計算部１６では、Ｓ０７で伝送された表３のデータ（Ｂ）に基づき色コントラストの計算を行う。ここでは伝送データ中、「通常」「注意１」「注意２」「確認」項目の配色セットに対して、２色の色コントラスト計算を行う。「不要」項目の配色セットに対しては、色コントラスト計算を行わない。具体的な計算方法は、ＷＣＡＧ２．０のガイドライン従うものとし、以下の算出方法を実行する。
【００５３】
まず、１６進数の色コードをＲＧＢ値に戻す。その後に明るさを表すＬ値を、各配色セットのそれぞれの色に対して、数式１を用いて算出する。この数式１はプログラムに定義されているものとする。
数式１：Ｌ＝０．２１２６＊（（Ｒ／２５５）＾２．２）＋０．７１５２＊（（Ｇ／２５５）＾２．２）＋０．０７２２＊（（Ｂ／２５５）＾２．２）
つぎに、Ｌ値の大きい色（明るい方の色）をＬ１、Ｌ値の小さい色（暗い方の色）をＬ２とし、色コントラスト値Ｃを数式２で算出する。この数式２もプログラムに定義されているものとする。
数式２：Ｃ＝（Ｌ１＋０．０５）／（Ｌ２＋０．０５）
Ｓ０９：また、前記コントラスト計算部１６は、Ｓ０８で算出した色コントラスト値Ｃを用いて、各配色セットに十分な色コントラスト値が保たれているか否かを診断する。ここではＷＣＡＧ２．０のガイドラインに従って診断するものとする。
【００５４】
ＷＣＡＧ２．０のガイドラインによれば、Ｃ値が５以上（２色のコントラスト比が５：１以上）の時にレベルＡＡ、１０以上（コントラスト比１０：１以上）の時にレベルＡＡＡでより良い結果とされている。ここでは色コントラスト値が５未満、５以上１０未満、１０以上の基準で配色セットを分類する。この分類結果を前記配色セットのデータに含めて前記結果表示部１７に伝送する。
【００５５】
Ｓ１０：前記結果表示部１７は、図５（ａ）（ｂ）に示すように、Ｓ０９の伝送データに基づき配色情報および診断結果の表示を行う。ここでは色と色コードの表示を背景と文字に分類し、その配色セットについて、Ｓ０９で計算した色コントラスト値の評価をＰ．Ｑ欄に表示する。
【００５６】
Ｐ欄には、色コントラスト値が「５以上（コントラスト比５：１以上）」か否かの評価が示され、Ｑ欄には、色コントラスト値が「１０以上（コントラスト比１０：１以上）」か否かの評価が示される。このうちＰ，Ｑ欄の評価は「○×」表示で示され、共に「○」表示の場合には、コメント欄Ｒに「非常に見易い配色です」と文書表示される。
【００５７】
Ｐ欄の評価「○」およびＱ欄の評価「×」の場合には、コメント欄Ｒには「見易い配色です」と文書表示される。Ｐ．Ｑ欄共に「×」の場合には、コメント欄Ｒには「見えにくい配色です」と文書表示される。
【００５８】
そして、Ｓ０７で「通常」項目を付与された配色セットは、図５（ａ）に示すように、タイトル欄Ｓに「背景と文字」と表示される。一方、「注意２」項目を付与された配色セットは、図５（ｂ）のタイトル欄Ｓに示すように、文字と文字の組合せであり、色コントラストは十分であるか、見えにくい配色となっていないかの確認が特に必要であることを文書で表示するものとする。
【００５９】
同様に「注意１」項目を付与された配色セットは、タイトル欄Ｓに文字色に対する周囲の色が背景色であるか否かの確認が必要であることを文書で表示するものとする。また、「確認」項目を付与された配色セットも、色の組合せが背景色と文字色であるか否かをまず確認する必要があることを文書で表示するものとする。
【００６０】
このようにウェブページ上の配色について、ＨＴＭＬファイル、ＣＳＳファイルのソースコードと、ウェブページの外観を画像化した生成画像とから色コード，要素属性情報，表示位置を抽出し、かつ不要な色コードを整理削除していることから、背景色と文字色の見やすさを迅速かつ的確に診断することできる。
【００６１】
特に、所定のピクセル間隔で走査したときに色が切り替った配色セット群の色コードを利用しているため（Ｓ０４〜Ｓ０７）、ＷＣＡＧ２．０のガイドラインに基づきウェブページ全体の配色バランスを考慮した診断結果が得られる。このときＨＴＭＬファイルのソースコードから抽出した要素属性を追記していることから（Ｓ０７）、ウェブページ内で使用される要素を自動的に判断できる。
【００６２】
また、ＨＴＭＬファイルやＣＳＳファイル内に背景色、文字色が記述されていないケースを考慮して、Ｓ０３でＨＴＭＬの要素属性のデフォルト色が設定されていることから、かかるケースにも対応することもできる。さらに、「注意１」，「注意２」，「確認」項目の付与された配色セットには、コメント欄Ｓにコメントが記述されるため、ユーザの注意が喚起され、この点で誤操作などが抑制される。
【００６３】
≪他の構成例等≫
図６は、本発明の配色診断装置を、ウェブ上のサーバ２０で実現した構成例を示している。ここではユーザ端末２１のブラウザ上で入力された診断対象ウェブページのＵＲＬを前記通信部１１にて受信し、かかるウェブページを構成する全ファイルを前記コンテンツサーバ３から取得する。この取得ファイルに基づきＳ０２〜Ｓ０９の処理ステップが実行される。この各ステップの処理結果、即ち診断結果は前記ユーザ端末２１に送信され、Ｓ１０の表示結果が前記ユーザ端末２１のブラウザ上に表示される。
【００６４】
なお、本発明は、上記実施形態に限定されるものではなく、例えばＳ０５において走査は縦を１０ピクセル間隔で、横を２ピクセルずつで行っているが、間隔は必ずしもこの値でなくてもよく、任意の値を用いてよい。また、Ｓ０６において色コントラストの計算方法および基準値はＷＣＡＧ２．０で規定されているものを使用しているが、他の計算方法、基準値を用いてもよい。特に基準値は、より基準を厳しくするために値を変えることも可能である。
【００６５】
さらに、Ｓ０７で「文字―なし」あるいは「背景―なし」の配色セットに対して、他方のＨＴＭＬ要素属性（なし）は行数がより少ない方向に含まれる色コードとの照合を行っているが、本来、背景色と文字色はセットで記述されるべきものである。したがって、この処理を行わず、「警告」項目であるとして、結果表示部１７において「両要素の色を指定して下さい」といった文章をコメント欄Ｓに表示することも可能である。
【００６６】
Ｓ１０の結果表示は、図５（ａ）（ｂ）の表示例だけでなく、他の表示方法を用いてもよい。例えばＳ０３で生成したウェブページの外観画像内の位置を示す印を表示することも可能である。また、前記要素属性データベース１３に保持される情報は、前述の属性情報に限らず、他の要素，属性，プロパティを追加することも可能である。
【００６７】
≪プログラム等≫
本発明は、前記診断装置１．２０の各手段１１〜１７の一部もしくは全部としてコンピュータを機能させるためのプログラムとして構成することもできる。この場合には、Ｓ０１〜Ｓ１０の全ステップあるいはその一部のステップをコンピュータに実行させる。
【００６８】
このプログラムは、Ｗｅｂサイトや電子メールなどネットワークを通じて提供することができる。また、前記プログラムは、ＣＤ−ＲＯＭ，ＤＶＤ−ＲＯＭ，ＣＤ−Ｒ，ＣＤ−ＲＷ，ＤＶＤ−Ｒ，ＤＶＤ−ＲＷ，ＭＯ，ＨＤＤ，Ｂｌｕ−ｒａｙ Ｄｉｓｋ（登録商標）などの記録媒体１０に記録して、保存・配布することも可能である。この記録媒体は、記録媒体駆動装置を利用して読み出され、そのプログラムコード自体が前記実施形態の処理を実現するので、該記録媒体も本発明を構成する。
【符号の説明】
【００６９】
１．２０…配色診断装置
２…ネットワーク（インターネット）
３…コンテンツサーバ
１１…通信部
１２…色コード抽出部（色コード抽出手段）
１３…要素属性データベース
１４…画像処理部（画像処理手段）
１５…色コード処理部（色コード処理手段）
１６…コントラスト計算部（コントラスト計算手段）
１７…結果表示部
２１…ユーザ端末
【特許請求の範囲】
【請求項１】
ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示させる配色診断方法であって、
色コード抽出手段が、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出ステップと、
画像処理手段が、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理ステップと、
色コード処理手段が、前記両ステップの処理データを統合整理し、診断すべき配色セットを定める色コード処理ステップと、
コントラスト計算手段が、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算ステップと、
を有することを特徴とする配色診断方法。
【請求項２】
前記色コード抽出ステップにおいて、データベースに保持された要素属性に応じた色コードを抽出するときに、
前記コンテンツのソースコードに前記データベースに保持された要素属性の色コードが記述されていなければ、デフォルト色の色コードを適用するステップをさらに有する
ことを特徴とする請求項１記載の配色診断方法。
【請求項３】
前記色コード処理ステップにおいて、前記画像処理ステップの処理データと前記色コード抽出ステップの処理データとを色コードの対応状況から統合整理し、
該統合整理後の配色セットに前記要素属性を追加して、診断すべき配色セットを定める
ことを特徴とする請求項１または２のいずれか１項に記載の配色診断方法。
【請求項４】
前記色コード処理ステップにおいて、診断結果に表示する要素属性の配色に対するコメントを表示するためのデータを、診断すべき配色セットに追加された前記要素属性に応じて付与する
ことを特徴とする請求項３記載の配色診断方法。
【請求項５】
ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示する配色診断装置であって、
前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出手段と、
前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理手段と、
前記両手段の処理データを統合整理し、診断すべき配色セットを定める色コード処理手段と、
診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算手段と、
を備えることを特徴とする配色診断装置。
【請求項６】
前記色コード抽出手段が抽出すべき要素属性の情報を保持するデータベースをさらに備え、
前記色コード抽出手段は、前記コンテンツのソースコードに前記データベースに保持された要素属性の色コードが記述されていなければ、デフォルト色の色コードを適用する
ことを特徴とする請求項５記載の配色診断装置。
【請求項７】
前記色コード処理手段は、前記画像処理手段の処理データと前記色コード抽出手段の処理データとを色コードの対応状況から統合整理し、
該統合整理された配色セットに前記要素属性を追加して、診断すべき配色セットを定めることを特徴とする請求項５または６のいずれか１項に記載の配色診断装置。
【請求項８】
前記色コード処理手段は、診断結果に表示する要素属性の配色に対するコメントを表示するためのデータを、診断すべき配色セットに追加された前記要素属性に応じて付与する
ことを特徴とする請求項７記載の配色診断装置。
【請求項９】
請求項５〜８のいずれか１項に記載の配色診断装置を構成する各手段として、コンピュータを機能させるためのプログラム。
【請求項１】
ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示させる配色診断方法であって、
色コード抽出手段が、前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出ステップと、
画像処理手段が、前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理ステップと、
色コード処理手段が、前記両ステップの処理データを統合整理し、診断すべき配色セットを定める色コード処理ステップと、
コントラスト計算手段が、診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算ステップと、
を有することを特徴とする配色診断方法。
【請求項２】
前記色コード抽出ステップにおいて、データベースに保持された要素属性に応じた色コードを抽出するときに、
前記コンテンツのソースコードに前記データベースに保持された要素属性の色コードが記述されていなければ、デフォルト色の色コードを適用するステップをさらに有する
ことを特徴とする請求項１記載の配色診断方法。
【請求項３】
前記色コード処理ステップにおいて、前記画像処理ステップの処理データと前記色コード抽出ステップの処理データとを色コードの対応状況から統合整理し、
該統合整理後の配色セットに前記要素属性を追加して、診断すべき配色セットを定める
ことを特徴とする請求項１または２のいずれか１項に記載の配色診断方法。
【請求項４】
前記色コード処理ステップにおいて、診断結果に表示する要素属性の配色に対するコメントを表示するためのデータを、診断すべき配色セットに追加された前記要素属性に応じて付与する
ことを特徴とする請求項３記載の配色診断方法。
【請求項５】
ウェブ上から取得したコンテンツの配色を診断し、診断結果を表示する配色診断装置であって、
前記コンテンツのソースコードから色コードおよび要素属性を抽出する色コード抽出手段と、
前記コンテンツの外観を画像化し、作成した画像内を任意のピクセル間隔で走査して、色の切り替った部分の配色セットを色コードに変換する画像処理手段と、
前記両手段の処理データを統合整理し、診断すべき配色セットを定める色コード処理手段と、
診断すべき配色セットの色コントラスト値を算出し、算出値を任意の診断基準に従って診断して、前記診断結果を求めるコントラスト計算手段と、
を備えることを特徴とする配色診断装置。
【請求項６】
前記色コード抽出手段が抽出すべき要素属性の情報を保持するデータベースをさらに備え、
前記色コード抽出手段は、前記コンテンツのソースコードに前記データベースに保持された要素属性の色コードが記述されていなければ、デフォルト色の色コードを適用する
ことを特徴とする請求項５記載の配色診断装置。
【請求項７】
前記色コード処理手段は、前記画像処理手段の処理データと前記色コード抽出手段の処理データとを色コードの対応状況から統合整理し、
該統合整理された配色セットに前記要素属性を追加して、診断すべき配色セットを定めることを特徴とする請求項５または６のいずれか１項に記載の配色診断装置。
【請求項８】
前記色コード処理手段は、診断結果に表示する要素属性の配色に対するコメントを表示するためのデータを、診断すべき配色セットに追加された前記要素属性に応じて付与する
ことを特徴とする請求項７記載の配色診断装置。
【請求項９】
請求項５〜８のいずれか１項に記載の配色診断装置を構成する各手段として、コンピュータを機能させるためのプログラム。
【図１】
【図２】
【図３】
【図４】
【図５】
【図６】
【図２】
【図３】
【図４】
【図５】
【図６】
【公開番号】特開２０１０−２６２３９８（Ｐ２０１０−２６２３９８Ａ）
【公開日】平成２２年１１月１８日（２０１０．１１．１８）
【国際特許分類】
【出願番号】特願２００９−１１１３７７（Ｐ２００９−１１１３７７）
【出願日】平成２１年４月３０日（２００９．４．３０）
【出願人】（０００００４２２６）日本電信電話株式会社 (13,992)
【Ｆターム（参考）】
【公開日】平成２２年１１月１８日（２０１０．１１．１８）
【国際特許分類】
【出願日】平成２１年４月３０日（２００９．４．３０）
【出願人】（０００００４２２６）日本電信電話株式会社 (13,992)
【Ｆターム（参考）】
[ Back to top ]