(57)【要約】【課題】ウェブコンテンツのウェブアクセシビリティを評価する技術を提供する。【解決手段】表示色取得部２０２は、ブラウザにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する。コントラスト比算出部２０３は、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際の文字要素の文字色としての表示文字色と、文字要素の表示背景色と、のコントラスト比を算出する。評価部２０４は、コントラスト比に基づいて、ウェブコンテンツの文字要素のウェブアクセシビリティを評価する。表示色取得部２０２は、ウェブコンテンツのソース文書を文字要素の文字色が透過色又は非表示となるように書き換えた上でウェブコンテンツをブラウザやUIデザインツールなどに表示させ、ブラウザやUIデザインツールなどに表示されたウェブコンテンツの外観画像に基づいて表示背景色を取得する。【選択図】図２
2020160600.tif 000002
【特許請求の範囲】
【請求項１】
ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得部と、
ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出部と、
前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価部と、
を備え、
前記表示色取得部は、前記ウェブコンテンツのソース文書を前記文字要素の文字色が透過色又は非表示となるように書き換えた上で前記ウェブコンテンツをウェブコンテンツ表示部に表示させ、前記ウェブコンテンツ表示部に表示された前記ウェブコンテンツの画像に基づいて前記表示背景色を取得する、
配色診断装置。
【請求項２】
ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得部と、
ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出部と、
前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価部と、
を備え、
前記表示色取得部は、前記文字要素に重複して配置された複数の要素に定義付けられた背景色をアルファブレンドすることにより、前記表示背景色を取得する、
配色診断装置。
【請求項３】
請求項１又は２に記載の配色診断装置であって、
前記文字要素の前記背景領域が、第１の相対輝度を有する第１の背景色を背景色とする第１の領域と、前記第１の相対輝度と異なる第２の相対輝度を有する第２の背景色を背景色とする第２の領域と、を含む場合、
前記コントラスト比算出部は、前記第１の相対輝度と前記第２の相対輝度のうち、前記文字要素の前記表示文字色の相対輝度に対して近い方と、前記文字要素の前記表示文字色の相対輝度と、のコントラスト比を算出する、
配色診断装置。
【請求項４】
請求項１又は２に記載の配色診断装置であって、
前記文字要素の前記背景領域が、第１の相対輝度を有する第１の背景色を背景色とする第１の領域と、前記第１の相対輝度と異なる第２の相対輝度を有する第２の背景色を背景色とする第２の領域と、を含む場合、
前記コントラスト比算出部は、前記第１の領域と前記第２の領域のうち面積が大きい方の相対輝度と、前記文字要素の前記表示文字色の相対輝度と、のコントラスト比を算出する、
配色診断装置。
【請求項５】
請求項３又は４に記載の配色診断装置であって、
前記文字要素の前記背景領域が、第１の相対輝度を有する第１の背景色を背景色とする第１の領域と、前記第１の相対輝度と異なる第２の相対輝度を有する第２の背景色を背景色とする第２の領域と、を含む場合、
前記コントラスト比算出部は、コントラスト比を算出する前に、前記文字要素の前記背景領域をモザイク処理する、
配色診断装置。
【請求項６】
請求項１から５までの何れか１項に記載の配色診断装置であって、
ソース文書において前記文字要素に定義された文字色が半透明色である場合、
前記表示色取得部は、更に、前記文字要素に定義された文字色と、前記表示背景色と、をアルファブレンドすることにより、前記文字要素の前記表示文字色を取得する、
配色診断装置。
【請求項７】
ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得ステップと、
ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出ステップと、
前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価ステップと、
を含み、
前記表示色取得ステップでは、前記ウェブコンテンツのソース文書を前記文字要素の文字色が透過色又は非表示となるように書き換え、前記ウェブコンテンツをウェブコンテンツ表示部に表示させ、前記ウェブコンテンツ表示部に表示された前記ウェブコンテンツの画像に基づいて前記表示背景色を取得する、
配色診断方法。
【請求項８】
ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得ステップと、
ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出ステップと、
前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価ステップと、
を含み、
前記表示色取得ステップでは、前記文字要素に重複して配置された複数の要素に定義付けられた背景色に基づいて、前記表示背景色を取得する、
配色診断方法。
【請求項９】
コンピュータに、請求項７又は８に記載の配色診断方法を実行させるためのプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、配色診断装置、配色診断方法、及び、プログラムに関する。
【背景技術】
【０００２】
近年、高齢者や障害のある人を含む多様な人が、さまざまな端末を利用し、さまざまな状況でウェブコンテンツを利用するため、ウェブアクセシビリティという品質の確保が必要不可欠となっている。「アクセシビリティ」とは、年齢や身体障害の有無に関係なく、誰でも必要とする情報に簡単にたどり着け、利用できることをいう。「ウェブコンテンツ」とは、ブラウザや支援技術などのユーザーエージェントを介して利用者に提供されるあらゆるコンテンツを指す。
【０００３】
World Wide Web Consortium(W3C)がウェブアクセシビリティのガイドラインとして「Web Content Accessibility Guidelines (WCAG) 2.0」を策定した。このガイドラインに従えば、ウェブアクセシビリティの確保が可能となる。日本でも、日本工業規格として「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針−情報通信における機器、ソフトウェア及びサービス−第3 部：ウェブコンテンツ」が策定されているが、WCAG 2.0と同じ内容の規格である。
【０００４】
ウェブアクセシビリティの基準の1つとして、文字の読みやすさがある。文字を読みやすくするためには、文字色と背景色の配色を考慮する必要がある。WCAG 2.0では、文字色と背景色のコントラスト比は、少なくとも4.5:1にすると定められている。
【０００５】
GUIアプリケーションのデザインを作成するとき、ボタンやテキスト、背景などGUIに複数の色が使用されるが、その配色のバランスが整ったデザインを作成する必要がある。配色のバランスを考える作業に加えて、文字色と背景色のコントラスト比の計算を行う必要があるため、作業に手間がかかる。
【０００６】
特許文献１（特開２００２−１９７４０３号公報）は、Ｗｅｂコンテンツの可読性評価システムを開示している。具体的には、Ｗｅｂコンテンツのソース文書に記載されたＨＴＭＬの木構造に基づいて階層情報を取得し、ソース文書に記載されたＨＴＭＬの要素に指定された色情報に基づいて配色情報を取得する。例えば、＜ＢＯＤＹ＞要素を第１階層とし、＜ｐ＞要素を第２階層とする。第１階層の配色情報は、＜ＢＯＤＹ＞要素のbgcolor属性から取得する。＜ｐ＞要素の配色情報は、＜ＢＯＤＹ＞要素のtext属性から取得する。そして、第１階層の配色情報と第２階層の配色情報に基づいて、＜ＢＯＤＹ＞要素と＜ｐ＞要素の間の明度差、色相差、彩度差をそれぞれ算出する。この明度差、色相差、彩度差をそれぞれ独立に多段評価することで、Ｗｅｂコンテンツの可読性を評価している。
【発明の概要】
【０００７】
しかしながら、特許文献１の構成では、文字要素の、ブラウザ上における実際の背景色を取得することができない。
【発明が解決しようとする課題】
【０００８】
本開示の目的は、上述した課題の何れかを解決する技術を提供することにある。
【課題を解決するための手段】
【０００９】
本開示の第１の観点によれば、ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得部と、ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出部と、前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価部と、を備え、前記表示色取得部は、前記ウェブコンテンツのソース文書を前記文字要素の文字色が透過色又は非表示となるように書き換えた上で前記ウェブコンテンツをウェブコンテンツ表示部に表示させ、前記ウェブコンテンツ表示部に表示された前記ウェブコンテンツの画像に基づいて前記表示背景色を取得する、配色診断装置が提供される。
【００１０】
本開示の第２の観点によれば、ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得部と、ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出部と、前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価部と、を備え、前記表示色取得部は、前記文字要素に重複して配置された複数の要素に定義付けられた背景色をアルファブレンドすることにより、前記表示背景色を取得する、配色診断装置が提供される。
【００１１】
本開示の第３の観点によれば、ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得ステップと、ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出ステップと、前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価ステップと、を含み、前記表示色取得ステップでは、前記ウェブコンテンツのソース文書を前記文字要素の文字色が透過色又は非表示となるように書き換え、前記ウェブコンテンツをウェブコンテンツ表示部に表示させ、前記ウェブコンテンツ表示部に表示された前記ウェブコンテンツの画像に基づいて前記表示背景色を取得する、配色診断方法が提供される。
【００１２】
本開示の第４の観点によれば、ウェブコンテンツ表示部にウェブコンテンツを表示させた際の前記ウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する表示色取得ステップと、ウェブコンテンツ表示部に前記ウェブコンテンツを表示させた際の前記文字要素の文字色としての表示文字色と、前記文字要素の前記表示背景色と、のコントラスト比を算出するコントラスト比算出ステップと、前記コントラスト比に基づいて、前記ウェブコンテンツのウェブアクセシビリティを評価する評価ステップと、を含み、前記表示色取得ステップでは、前記文字要素に重複して配置された複数の要素に定義付けられた背景色に基づいて、前記表示背景色を取得する、配色診断方法が提供される。
【発明の効果】
【００１３】
本開示によれば、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを評価できる。
【図面の簡単な説明】
【００１４】
【図１】配色診断装置の機能ブロック図である。（第１実施形態）
【図２】配色診断装置の機能ブロック図である。（第３実施形態）
【図３】配色診断装置の制御フローである。（第３実施形態）
【図４】ブラウザ上に表示されたウェブコンテンツを示す図である。（第３実施形態）
【図５】ウェブコンテンツのソース文書を示す図である。（第３実施形態）
【図６】ウェブコンテンツのソース文書を示す図である。（第３実施形態）
【図７】ウェブコンテンツのソース文書の木構造を示す図である。（第３実施形態）
【図８】ブラウザ上に表示されたウェブコンテンツを示す図である。（第３実施形態）
【図９】テキストノード毎の、親要素の要素ＩＤ及び矩形領域を示す図である。（第３実施形態）
【図１０】ウェブコンテンツの外観画像を示す図である。（第３実施形態）
【図１１】テキストノード毎の、親要素の文字色及び背景色を示す図である。（第３実施形態）
【図１２】ウェブコンテンツの外観画像を示す図である。（第３実施形態）
【図１３】ウェブコンテンツの外観画像を示す図である。（第３実施形態）
【図１４】テキストノード毎の背景色を示す図である。（第３実施形態）
【図１５】テキストノード毎の背景色を示す図である。（第３実施形態）
【図１６】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図１７】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図１８】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図１９】テキストノード毎のコントラスト比を求める方法を示す図である。（第３実施形態）
【図２０】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図２１】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図２２】テキストノード毎の文字色と背景色の相対輝度を示す図である。（第３実施形態）
【図２３】テキストノード毎のコントラスト比を求める方法を示す図である。（第３実施形態）
【図２４】テキストノード毎のコントラスト比を求める方法を示す図である。（第３実施形態）
【図２５】テキストノード毎の文字色と背景色のコントラスト比を示す図である。（第３実施形態）
【図２６】テキストノード毎の文字色と背景色のコントラスト比を示す図である。（第３実施形態）
【図２７】テキストノード毎の文字色と背景色のコントラスト比を示す図である。（第３実施形態）
【図２８】評価結果の表示例を示す図である。（第３実施形態）
【図２９】評価結果の表示例を示す図である。（第３実施形態）
【図３０】評価結果の表示例を示す図である。（第３実施形態）
【図３１】配色診断装置の機能ブロック図である。（第４実施形態）
【図３２】ブラウザ上に表示されたウェブコンテンツを示す図である。（第４実施形態）
【図３３】ウェブコンテンツのソース文書を示す図である。（第４実施形態）
【図３４】ウェブコンテンツのソース文書を示す図である。（第４実施形態）
【図３５】ブラウザ上に表示されたウェブコンテンツを示す図である。（第４実施形態）
【図３６】すべての要素の属性を示す図である。（第４実施形態）
【図３７】要素の重なり順の計算に関する図である。（第４実施形態）
【図３８】要素の重なり順の計算に関する図である。（第４実施形態）
【図３９】要素の重なり順の計算に関する図である。（第４実施形態）
【図４０】要素の重なり順の計算に関する図である。（第４実施形態）
【図４１】要素の重なり領域の計算に関する図である。（第４実施形態）
【図４２】テキストノード毎の親要素で設定された文字色を示す図である。（第４実施形態）
【図４３】背景色のアルファブレンドの計算に関する図である。（第４実施形態）
【図４４】背景色のアルファブレンドの計算に関する図である。（第４実施形態）
【発明を実施するための形態】
【００１５】
（第１実施形態）
以下、図１を参照して、第１実施形態を説明する。図１に示す配色診断装置１００は、中央演算処理器としてのCPU１００ａと、読み書き自由のRAM１００ｂ、読み出し専用のROM１００ｃを備えている。そして、CPU１００ａがROM１００ｃに記憶されている制御プログラムを読み出して実行する。制御プログラムは、CPU１００ａなどのハードウェアを、表示色取得部１０２、コントラスト比算出部１０３、評価部１０４として機能させる。
【００１６】
表示色取得部１０２は、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する。ブラウザやUIデザインツールなどは、ウェブコンテンツ表示部の一具体例である。ウェブコンテンツ表示部の具体例としては、他にも、Adobe XD（登録商標）やSketch（登録商標）などのプロトタイピングツール、Photoshop（登録商標）やIllustrator（登録商標）などのデザインツールが挙げられる。
【００１７】
コントラスト比算出部１０３は、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際の文字要素の文字色としての表示文字色と、文字要素の表示背景色と、のコントラスト比を算出する。端的に言えば、コントラスト比算出部１０３は、ブラウザやUIデザインツールなど上における文字要素の文字色とその背景色とのコントラスト比を算出する。
【００１８】
評価部１０４は、コントラスト比に基づいて、ウェブコンテンツのウェブアクセシビリティを評価する。
【００１９】
そして、表示色取得部１０２は、ウェブコンテンツのソース文書を文字要素の文字色が透過色又は非表示となるように書き換えた上でウェブコンテンツをブラウザやUIデザインツールなどに表示させ、ブラウザやUIデザインツールなどに表示されたウェブコンテンツの画像に基づいて表示背景色を取得する。
【００２０】
以上の構成によれば、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを正当に評価できる。
【００２１】
（第２実施形態）
次に、図１を参照して、第２実施形態を説明する。以下、本実施形態が上記第１実施形態と相違する点を中心に説明し、重複する説明は省略する。
【００２２】
表示色取得部１０２は、文字要素に重複して配置された複数の要素に定義付けられた背景色をアルファブレンドすることにより表示背景色を取得する。
【００２３】
以上の構成によれば、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを正当に評価できる。
【００２４】
（第３実施形態）
次に、図２から図３０を参照して、第３実施形態を説明する。本実施形態は、第１実施形態を更に発展させたものである。
【００２５】
図２に示すように、配色診断装置２００は、中央演算処理器としてのCPU２００ａと、読み書き自由のRAM２００ｂ、読み出し専用のROM２００ｃ、表示装置としてのLCD２００ｄを備えている。そして、CPU２００ａがROM２００ｃに記憶されている制御プログラムを読み出して実行する。制御プログラムは、CPU２００ａなどのハードウェアを、表示色取得部２０２、コントラスト比算出部２０３、評価部２０４、出力部２０５として機能させる。
【００２６】
表示色取得部２０２は、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する。表示背景色とは、端的に言えば、ブラウザやUIデザインツールなど上で実際に表現されている背景色を意味する。
【００２７】
コントラスト比算出部２０３は、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際の文字要素の文字色としての表示文字色と、文字要素の表示背景色と、のコントラスト比を算出する。端的に言えば、コントラスト比算出部２０３は、ブラウザやUIデザインツールなど上における文字要素の文字色とその背景色とのコントラスト比を算出する。
【００２８】
評価部２０４は、コントラスト比に基づいて、ウェブコンテンツのウェブアクセシビリティを評価する。
【００２９】
出力部２０５は、評価部２０４による評価結果をLCD２００ｄに表示させる。
【００３０】
そして、表示色取得部２０２は、ウェブコンテンツのソース文書を文字要素の文字色が透過色又は非表示となるように書き換えた上でウェブコンテンツをブラウザやUIデザインツールなどに表示させ、ブラウザやUIデザインツールなどに表示されたウェブコンテンツの画像に基づいて表示背景色を取得する。
【００３１】
以上の構成によれば、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを正当に評価できる。
【００３２】
図３には、配色診断装置２００の制御フロー（配色診断方法）を示している。以下、図３の制御フローに沿って具体的に説明する。
【００３３】
配色診断装置２００は、典型的には、デスクトップパソコンなどの情報処理端末で動作するGUIアプリケーションとして実現されている。これに代えて、配色診断装置２００は、ブラウザやプロトタイピングツール、デザインツールなどのプラグインとして実現されてもよい。配色診断装置２００がGUIアプリケーションとして実現される場合、例えばSeleniumなどのブザウザ制御ドライバーを利用して、配色診断装置２００がブラウザを制御可能に構成されている。また、配色診断装置２００がUIデザインツールのプラグインとして実現される場合、配色診断装置２００がUIデザインツールを制御できるように構成されている。また、配色診断装置２００がブラウザのプラグインとして実現される場合、配色診断装置２００がブラウザを制御できるように構成されている。
【００３４】
S1:
先ず、表示色取得部２０２は、文字列（文字要素）の矩形領域（背景領域）を取得する。矩形領域は、背景領域の一具体例である。背景領域は、例えば楕円形の領域、円形の領域、三角形の領域など、矩形以外の領域であってもよい。また、背景領域は、文字1個ずつの背景領域でもよい。例えば、ウェブコンテンツに「あいうえお」と表示されていたら、「あ」「い」「う」「え」「お」それぞれの背景領域を取得してもよい。
【００３５】
図４には、ブラウザに表示されたウェブコンテンツを示している。図５及び図６には、ウェブコンテンツのソース文書を示している。図５に示すように、表示色取得部２０２は、ソース文書においてタグ要素に要素ＩＤを付与する。表示色取得部２０２は、タグ要素の要素ＩＤを、タグ要素の並んでいる順番で昇順となるように重複なく付与する。また、表示色取得部２０２は、図６に示すように、タグ要素以外の文字列であるテキストノード（文字要素）にテキストノードＩＤ（文字要素ＩＤ）を付与する。表示色取得部２０２は、テキストノードのテキストノードＩＤを、テキストノードの並んでいる順番通りに昇順となるように重複なく付与する。図７には、ソース文書の木構造を示している。この木構造の葉に位置するノードがテキストノードとなる。
【００３６】
図８には、各テキストノードの矩形領域を破線で示している。テキストノードの矩形領域とは、テキストノードに対応する文字列が描画された領域を意味する。テキストノードの矩形領域とは、テキストノードが占有している領域を意味する。テキストノードの矩形領域とは、テキストノードの親要素が占有している領域を意味する。
【００３７】
表示色取得部２０２は、ソース文書をブラウザに表示させた際の各テキストノードの矩形領域を取得する。各テキストノードの矩形領域の取得方法は、一例として、ブラウザ上でJavaScript（登録商標）を動作させることが挙げられるがこれに限定されない。矩形領域は、典型的には、矩形領域の左上角の座標と、矩形領域の幅及び高さにより定義される。図９には、各テキストノードと、その矩形領域との対応関係を示している。表示色取得部２０２は、各テキストノードＩＤをkey、「対応するテキストノードの親要素の要素ＩＤ」及び「文字列の矩形領域」をvalueとしてRAM２００ｂに記憶する。
【００３８】
S2:
次に、表示色取得部２０２は、ウェブコンテンツの文字抜き画像（外観画像）を取得する。図１０には、ウェブコンテンツの文字列を透明色又は非表示にした上で当該ウェブコンテンツをブラウザ上で表示させた図を示している。即ち、表示色取得部２０２は、ブラウザ上で、ウェブコンテンツのレイアウトを変えずに、文字列を見えないように加工したウェブコンテンツを生成する。表示色取得部２０２は、ブラウザ上で当該ウェブコンテンツを表示させた際の、ブラウザに表示されたウェブコンテンツの画像を取得する。この画像を以下、ウェブコンテンツの外観画像又は文字抜き画像と称する。
【００３９】
なお、ブラウザ上でウェブコンテンツの文字列を非表示にする手法としては、JavaScriptの利用が挙げられる。即ち、JavaScriptを利用すれば、ウェブコンテンツのソース文書を動的に書き換えて、ブラウザに再表示させることができる。そのため、ウェブコンテンツに対して文字列の色を透明に変更する加工をすれば、文字列を見えないようにウェブコンテンツを加工できる。或いは、テキストノードと親要素の間にspanタグなどの任意の要素を挟み込む。その挟み込んだ要素に対してvisibility:hidden属性を与えれば、文字列を見えないようにウェブコンテンツを加工できる。
【００４０】
表示色取得部２０２は、上記の外観画像を取得したら、ウェブコンテンツの文字列を非表示状態から表示状態へ戻す。
【００４１】
このように文字列が透明色又は非表示となるようにウェブコンテンツを加工して外観画像を取得することにより、文字列の矩形領域において複数の要素が重複していたとしても、外観画像から文字列の実際の背景色を取得することができる。文字列の実際の背景色とは、ウェブコンテンツをブラウザに表示させた際の、文字列の矩形領域の背景色を意味する。この背景色は、前述したように表示背景色とも称する。
【００４２】
S3:
次に、表示色取得部２０２は、テキストノード毎に、テキストノードの親要素に指定されている文字色及び背景色を取得する。図１１には、テキストノードの親要素の文字色及び背景色を示している。表示色取得部２０２は、図１１に示すように、テキストノードＩＤをkey、テキストノードの親要素に指定されている文字色及び背景色それぞれをvalueとしてRAM２００ｂに記憶する。
【００４３】
S4:
次に、表示色取得部２０２は、表示背景色を取得する（表示色取得ステップ）。具体的には、表示色取得部２０２は、テキストノード毎に、以下のようにして表示背景色を取得する。
【００４４】
（１）テキストノードの親要素に指定されている背景色が不透明単色ではない色である場合
【００４５】
不透明単色ではない色とは、具体的には、図１１のテキストノードID=1-4,6,7のように、「透明色」「半透明色」「不透明のグラデーション色」「半透明のグラデーション色」「画像」「グラデーション色で加工された画像」がある。
【００４６】
テキストノードの親要素に指定されている背景色が、不透明単色以外の色である場合、文字列の表示背景色が確定しない。そのため、実際の背景色を計算する必要がある。そこで、表示色取得部２０２は、S2で取得したウェブコンテンツの外観画像から、テキストノードの矩形領域内の色の分布を取得する。つまり、表示色取得部２０２は、テキストノードの矩形領域内において、どの色が何ピクセル占めているかを取得する。
【００４７】
図１２には、ウェブコンテンツの外観画像の一例を示す。図１３は、各テキストノードの矩形領域の一例を示す。また、テキストノード1の親要素の背景色は透明色であるとする。そこで、S2で取得したウェブコンテンツの外観画像において、各テキストノードの矩形領域内にどの色が何ピクセル占めているかを取得すると、rgb(229,229,229):392px、rgb(228,228,228):392px、...、rgb(218,218,218):392px、rgb(217,217,217):392pxと取得できる。
【００４８】
そこで、表示色取得部２０２は、図１４に示すように、テキストノードIDをkey、色の分布を「算出した背景色（＝表示背景色）」属性のvalueとしてRAM２００ｂに記憶する。
【００４９】
また、表示色取得部２０２は、S2で取得したウェブコンテンツの外観画像全体に対してモザイク処理を行ってもよい。テキストノード毎に、モザイク処理を施した外観画像から、矩形領域内の色の分布を追加で取得してもよい。この場合、テキストノードIDをkey、取得した色の分布を「モザイク処理を施した外観画像において、算出した背景色」属性をvalueとしてRAM２００ｂに記憶する。
【００５０】
（２）テキストノードの親要素に指定されている背景色が不透明単色である場合
【００５１】
この場合、表示色取得部２０２は、図１５に示すように、テキストノードの親要素に指定されている背景色を、「算出した背景色（＝表示背景色）」属性のvalueに転記する。
【００５２】
図１３に示すように、テキストノード５の親要素の背景色は不透明な単色である白色であるとする。このとき、前のステップS3で、テキストノード5の親要素に指定されている背景色は、不透明な白色であると取得できている。そこで、図１５に示すように、表示色取得部２０２は、テキストノード５において、親要素の背景色を「算出した背景色」属性のvalueに転記する。テキストノードの親要素が不透明の単色であれば、文字列の表示背景色は不透明色と決まっているためである。
【００５３】
S5:
次に、コントラスト比算出部２０３は、表示文字色と表示背景色それぞれの相対輝度を計算する。相対輝度とは、最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさのことである。相対輝度Lの計算式は次のとおりである。下記式は、WCAG 2.0のガイドラインに記載されている式である。
L= 0.2126 * R + 0.7152 * G + 0.0722 * B 
【００５４】
ただし、R、G および B は以下のように定義される:
RsRGB <= 0.03928 の場合R = RsRGB/12.92 、そうでない場合 R = ((RsRGB+0.055)/1.055) ^ 2.4
GsRGB <= 0.03928 の場合G = GsRGB/12.92 、そうでない場合 G = ((GsRGB+0.055)/1.055) ^ 2.4
BsRGB <= 0.03928 の場合B = BsRGB/12.92 、そうでない場合 B = ((BsRGB+0.055)/1.055) ^ 2.4
【００５５】
また、RsRGB、GsRGB、および BsRGB は、次のように定義される:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
ただし、R8bit、G8bit、B8bitはそれぞれ0以上255以下の整数であるとする。
【００５６】
（１）
『算出した背景色』属性のvalueが1色、かつ、『文字色』属性のvalueが不透明色1色である場合。
この場合、コントラスト比算出部２０３は、図１６に示すように、上記Lの計算式を用いて、表示文字色と表示背景色それぞれの相対輝度を算出する。
【００５７】
（２）
『算出した背景色』属性のvalueが1色、かつ、『文字色』属性のvalueが半透明色1色である場合。
この場合、コントラスト比算出部２０３は、先ず、図１７に示すように、文字列の表示文字色（ブラウザ上での文字列の実際の文字色）を算出する。S3では、表示文字色は取得できず、文字色のRGB値および文字色の透過度αしか取得できない。そのため、コントラスト比算出部２０３は、背景色に半透明の文字色を重ねた色を計算して、表示文字色を導き出す必要がある。このように、2つの色を係数（すなわち、前景色の透過度α）により合成することはアルファブレンドと呼ばれる。
【００５８】
アルファブレンドした色を（R8bit、G8bit、B8bit）とすると、計算式は次のとおりである。下記式は、一般的に知られている式である。
R8bit = Rb8bit + (Rf8bit - Rb8bit) * α
G8bit = Gb8bit + (Gf8bit - Gb8bit) * α
B8bit = Bb8bit + (Bf8bit - Bb8bit) * α
ただし、前景色（＝文字色）のRGB値を(Rf8bit,Gf8bit,Bf8bit)、前景色の透過度をα、背景色のRGB値を(Rb8bit,Gb8bit,Bb8bit)とする。また、RGB値はすべて0以上255以下の整数とし、R8bit、G8bit、B8bitそれぞれの計算結果が小数になった場合は、小数点切り捨てとする。さらに、αは、0≦α≦1の実数とする。
【００５９】
次に、コントラスト比算出部２０３は、上記Lの計算式を用いて、表示文字色と表示背景色それぞれの相対輝度を算出する。
【００６０】
（３）『算出した背景色』属性のvalueが2色以上、かつ、『文字色』属性のvalueが不透明色1色である場合
この場合、コントラスト比算出部２０３は、先ず、図１８に示すように、上記Lの計算式を用いて、表示文字色の相対輝度を算出する。
【００６１】
次に、コントラスト比算出部２０３は、背景色の色の分布に基づいて、上記Lの計算式を用いて、各色の相対輝度を算出する。
【００６２】
次に、コントラスト比算出部２０３は、各色の相対輝度の中から、「最大相対輝度（＝最も明るい色）」と「最小相対輝度（＝最も暗い色）」を算出する。これを計算する理由は、表示文字色と表示背景色のコントラスト比の中で、最小のコントラスト比が計算できるためである。最小のコントラスト比が基準を満たしていなければ、最小以上のコントラスト比も当然基準を満たしていないとわかる。
【００６３】
最小のコントラスト比が計算できる理由を説明する。「背景色の最大相対輝度」「背景色の最小相対輝度」「文字色の相対輝度」それぞれの大きさの順番を並び替えた組み合わせは、図１９に示す3パターンに分類される。輝度差が最小になる色同士が、最小のコントラスト比となる。
【００６４】
また、コントラスト比算出部２０３は、図２０に示すように、背景色の中で占める割合が最大の色、すなわちピクセル数が最多である背景色についても、相対輝度を算出してもよい。これを算出する理由は、背景色の色の分布の中で「最大相対輝度」と「最小相対輝度」それぞれを持つ色の面積が非常に小さい場合、正しいコントラスト比を算出できないためである。背景色の中で占める割合が最大の色が複数ある場合は、その複数色の中で、「最大相対輝度」と「最小相対輝度」それぞれを算出する。
【００６５】
また、コントラスト比算出部２０３は、モザイク処理を施した背景色についても、上記Lの計算式を用いて、各色の相対輝度を算出してもよい。次に、コントラスト比算出部２０３は、各色の相対輝度の中から、「最大相対輝度」と「最小相対輝度」それぞれを算出する。これを算出する理由は、背景色（＝モザイク処理を施す前の背景色）の中で「最大相対輝度」と「最小相対輝度」それぞれを持つ色の面積が非常に小さい場合、正しいコントラスト比を算出できないためである。
【００６６】
モザイク処理は、画像の正方形の色の範囲を、同じ色で塗りつぶす処理である。例えば、5×5ドットの正方形の色それぞれの平均値を算出して、その平均値の色で5×5ドットの正方形を塗りつぶす。色の平均値が算出されるため、背景色の中で「最大相対輝度」と「最小相対輝度」それぞれを持つ色の面積が非常に小さいということはない。そのため、誤ったコントラスト比を算出してしまうという結果を防ぐことができる。
【００６７】
（４）
『算出した背景色』属性のvalueが2色以上、かつ、『文字色』属性のvalueが半透明色1色である場合。
この場合、コントラスト比算出部２０３は、先ず、図２１に示すように、上記Lの計算式を用いて、表示背景色の各色の相対輝度を算出する。これに代えて、コントラスト比算出部２０３は、図２２に示すように、表示背景色の中で占める割合が最大の色、すなわちピクセル数が最多である背景色についても、各色の相対輝度を算出してもよい。また、コントラスト比算出部２０３は、モザイク処理を施した表示背景色についても、各色の相対輝度を算出してもよい。
【００６８】
次に、コントラスト比算出部２０３は、図２１に示すように、実際の文字色の計算を行う。即ち、コントラスト比算出部２０３は、表示背景色の各色に対して、半透明の文字色をアルファブレンドした色を計算して表示文字色を導く。そして、コントラスト比算出部２０３は、表示文字色それぞれの相対輝度を算出する。
【００６９】
また、コントラスト比算出部２０３は、図２２に示すように、ピクセル数最多の表示背景色に対して、半透明の文字色をアルファブレンドした色を計算し、ピクセル数最多の表示背景色上にある表示文字色を導いてもよい。また、コントラスト比算出部２０３は、ピクセル数最多の表示背景色上にある表示文字色それぞれに対して、相対輝度を算出してもよい。コントラスト比算出部２０３は、ピクセル数最多の表示背景色が複数ある場合は、複数の表示背景色に対して、半透明の文字色をアルファブレンドした色を計算する。そして、コントラスト比算出部２０３は、そのアルファブレンドした色それぞれに対して、相対輝度を求めてもよい。
【００７０】
また、コントラスト比算出部２０３は、モザイク処理を施した表示背景色に対して、半透明の文字色をアルファブレンドした色を計算し、モザイク処理を施した表示背景色上にある表示文字色を導いてもよい。また、コントラスト比算出部２０３は、モザイク処理を施した表示背景色上にある表示文字色それぞれに対して、相対輝度を算出してもよい。
【００７１】
次に、コントラスト比算出部２０３は、表示文字色と表示背景色のコントラスト比を計算する（コントラスト比算出ステップ）。コントラスト比を算出するときは、次の式を利用する。下記式は、WCAG 2.0のガイドラインに記載されている式である。
C=(L1 + 0.05) / (L2 + 0.05) 
ただし、L1 は、明るい方の色の相対輝度である。また、L2 は、暗い方の色の相対輝度である。
【００７２】
（１）『算出した背景色』属性のvalueが1色である場合
この場合、コントラスト比算出部２０３は、上記式を利用して、表示文字色と表示背景色のコントラスト比を算出する。
（２）『算出した背景色』属性のvalueが2色以上、かつ、『文字色』属性のvalueが不透明色1色である場合
この場合、コントラスト比算出部２０３は、下記（A）を少なくとも算出し、任意で、下記（B）及び（C）を算出する。
【００７３】
（Ａ）コントラスト比算出部２０３は、図１９に示すように、「文字色の相対輝度」「背景色の最大相対輝度」「背景色の最小相対輝度」を、大きさの順に並べる。コントラスト比算出部２０３は、その大きさの順が図１９の3パターンのどれに当てはまるかに応じて、図１９に記載している最小のコントラスト比を算出する。
【００７４】
（Ｂ）コントラスト比算出部２０３は、図２３に示すように、「文字色の相対輝度」「ピクセル数が最多である背景色の最大相対輝度」「ピクセル数が最多である背景色の最小相対輝度」を、大きさの順に並べる。コントラスト比算出部２０３は、その大きさの順が図２３の3パターンのどれに当てはまるかに応じて、図２３に記載している最小のコントラスト比を算出する。
【００７５】
（C）コントラスト比算出部２０３は、図２４に示すように、「文字色の相対輝度」「モザイク処理を施した背景色の最大相対輝度」「モザイク処理を施した背景色の最小相対輝度」を、大きさの順に並べる。コントラスト比算出部２０３は、その大きさの順が図２４の3パターンのどれに当てはまるかに応じて、図２４に記載している最小のコントラスト比を算出する。
【００７６】
（３）『算出した背景色』属性のvalueが2色以上、かつ、『文字色』属性のvalueが半透明色1色である場合
この場合、コントラスト比算出部２０３は、下記（A）を少なくとも算出し、任意で、下記（B）及び（C）を算出する。
【００７７】
（Ａ）コントラスト比算出部２０３は、図２５に示すように、算出した背景色ごとに、「その背景色の相対輝度」と「その背景色上にある実際の文字色の相対輝度」から、コントラスト比をすべて算出する。その後、コントラスト比算出部２０３は、算出したコントラスト比の中で、最小のコントラスト比を算出する。
【００７８】
（Ｂ）コントラスト比算出部２０３は、図２６に示すように、ピクセル数最多の背景色ごとに、「その背景色の相対輝度」と「その背景色上にある実際の文字色の相対輝度」から、コントラスト比をすべて算出する。その後、コントラスト比算出部２０３は、算出したコントラスト比の中で、最小のコントラスト比を算出する。
（Ｃ）コントラスト比算出部２０３は、図２７に示すように、モザイク処理を施した背景色ごとに、「その背景色の相対輝度」と「その背景色上にある実際の文字色の相対輝度」から、コントラスト比をすべて算出する。その後、コントラスト比算出部２０３は、算出したコントラスト比の中で、最小のコントラスト比を算出する。
【００７９】
S6:
次に、評価部２０４は、テキストノード毎に、表示文字色と表示背景色のコントラスト比を所定の基準と対比させることで、当該テキストノードのウェブアクセシビリティを評価する（評価ステップ）。
【００８０】
S7:
そして、出力部２０５は、例えば図２８に示すように、テキストノード毎に、上記（A）で算出した最小のコントラスト比と、コントラスト比が任意の基準をクリアしているか否かと、をLCD２００ｄに出力してブラウザ上に表示する。
【００８１】
遡って、評価部２０４は、上記所定の基準として、WCAG 2.0 AAレベルの基準うち、小さい文字である場合の基準を適用して、コントラスト比が4.51未満であれば不合格としてもよい。
【００８２】
或いは、評価部２０４は、WCAG 2.0 AAAレベルの基準のうち、小さい文字である場合の基準を利用して、7未満であれば不合格としてもよい。
【００８３】
また、評価部２０４は、WCAG 2.0の基準だけでなく、利用者が任意に設定した基準を利用して、合否を判定してもよい。
【００８４】
図２８の例では、出力部２０５は、基準合否結果として、「WCAG 2.0 AAおよびAAAレベルの基準のうち、小さい文字である場合の基準合否結果」、「WCAG 2.0 AAおよびAAAレベルの基準のうち、大きい文字である場合の合否結果」の4つの結果を出力している。出力部２０５は、4つの結果すべてを出力しなくても一部の結果だけ出力してもよい。例えば、出力部２０５は、AAレベルだけ表示できるように、利用者側で設定できるようにしてもよい。また、出力部２０５は、WCAG 2.0の基準だけでなく、利用者側で設定した基準に応じた合否結果を一緒に表示してもよい。
【００８５】
上記（Ｂ）及び（Ｃ）で算出した最小のコントラスト比および基準の合否結果に関しては、出力部２０５は、例えば図２９に示すように表示してもよい。コントラスト比の表示方法に関しては、例えば図３０に示すように、合否結果を最初は折り畳んだ状態で表示させておき、「不合格」のリンクがクリックされたら、図２８に示すように合否結果を通常通り表示するようにしてもよい。
【００８６】
以上に、第３実施形態を説明したが、上記第３実施形態は以下の特徴を有する。
【００８７】
配色診断装置２００は、表示色取得部２０２とコントラスト比算出部２０３、評価部２０４を備える。表示色取得部２０２は、ブラウザにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得する。コントラスト比算出部２０３は、ブラウザにウェブコンテンツを表示させた際の文字要素の文字色としての表示文字色と、文字要素の表示背景色と、のコントラスト比を算出する。評価部２０４は、コントラスト比に基づいて、ウェブコンテンツの文字要素のウェブアクセシビリティを評価する。表示色取得部２０２は、ウェブコンテンツのソース文書を文字要素の文字色が透過色又は非表示となるように書き換えた上でウェブコンテンツをブラウザに表示させる。表示色取得部２０２は、ブラウザに表示されたウェブコンテンツの外観画像（文字抜き画像）に基づいて表示背景色を取得する。以上の構成によれば、ブラウザにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを正当に評価できる。
【００８８】
また、文字要素の矩形領域（背景領域）が、例えばグラデーションであるなど、第１の領域と第２の領域を含む。第１の領域は、第１の相対輝度を有する第１の背景色を背景色とする領域である。第２の領域は、第１の相対輝度と異なる第２の相対輝度を有する第２の背景色を背景色とする領域である。この場合、コントラスト比算出部２０３は、第１の相対輝度と前記第２の相対輝度のうち、文字要素の表示文字色の相対輝度に対して近い方と、文字要素の表示文字色の相対輝度と、のコントラスト比を算出する。以上の構成によれば、最も悪い条件のコントラスト比に基づいてウェブアクセシビリティを評価するので、評価の信頼性が向上する。
【００８９】
また、コントラスト比算出部２０３は、第１の領域と第２の領域のうち面積が大きい方の相対輝度と、文字要素の表示文字色の相対輝度と、のコントラスト比を算出する。以上の構成によれば、矩形領域のうちウェブアクセシビリティに影響のない極めて小さい領域の相対輝度によって評価の信頼性が損なわれる虞がない。
【００９０】
また、コントラスト比算出部２０３は、コントラスト比を算出する前に、文字要素の矩形領域をモザイク処理してもよい。以上の構成によれば、以上の構成によれば、矩形領域のうちウェブアクセシビリティに影響のない極めて小さい領域の相対輝度によって評価の信頼性が損なわれる虞がない。
【００９１】
また、ソース文書において文字要素に定義された文字色が半透明色である場合、表示色取得部２０２は、更に、文字要素に定義された文字色と、表示背景色と、をアルファブレンドすることにより、文字要素の表示文字色を取得する。以上の構成によれば、文字要素のブラウザ上での実際の文字色に基づいて、文字要素のウェブアクセシビリティを正当に評価できる。
【００９２】
（第４実施形態）
次に、図３１から図４４を参照して、第４実施形態を説明する。本実施形態は、第２実施形態を更に発展させたものである。
【００９３】
上記第３実施形態では、表示色取得部２０２は、ウェブコンテンツのレイアウトを変えずに文字を見えないように加工したウェブコンテンツの外観画像を取得することで表示背景色を取得した。これに対し、本実施形態では、表示色取得部２０２は、文字要素に重複して配置された複数の要素に定義付けられた背景色をアルファブレンドすることにより表示背景色を取得する。具体的には以下の通りである。
【００９４】
図３１には、本実施形態の配色診断装置２００の制御フローを示している。図３２には、診断対象としてのウェブコンテンツを例示している。図３３には、このウェブコンテンツのソース文書を示している。
【００９５】
S10：
先ず、表示色取得部２０２は、図３４に示すように、ソース文書においてタグ要素に要素ＩＤを付与する。表示色取得部２０２は、タグ要素の要素ＩＤを、タグ要素の並んでいる順番で昇順となるように重複なく付与する。診断対象であるウェブコンテンツに要素IDを表示すると図３５のようになる。
【００９６】
次に、表示色取得部２０２は、図３６に示すように、すべての要素の属性を取得する。取得する属性としては、背景色、文字色、親要素の要素ID、要素の矩形領域(x, y, width, height)とする。また、他にも次の属性を取得する。
【００９７】
position、z-index、flexbox、opacity、mix-blend-mode、transform、filter、perspective、clip-path、mask、mask-image、mask-border、isolation、-webkit-overflow-scrolling、will-change、contain
【００９８】
表示色取得部２０２は、要素の重なり順の計算に利用するために、上記すべての要素の属性を取得する。
【００９９】
表示色取得部２０２は、図３６に示すように、要素の重なり順を要素IDの昇順でRAM２００ｂに記憶する。注意点としては、後のステップで、重なり順は変更されることである。図３６においてNo.の値が大きいほど、画面上で上方に重なって表示される。例えば、図３５において要素ID=3は要素ID=1より上方に重なっており、従って、要素ID=3は要素ID=1よりNo.の値が大きくなる。
【０１００】
S11:
次に、表示色取得部２０２は、要素の重なり順を計算する。計算方法については、ブラウザで定められている計算方法を利用する。要素の重なり順は、要素の属性の値に応じて決定される。重なり順を決める属性としては、次の属性がある。
【０１０１】
position、z-index、flexbox、opacity、mix-blend-mode、transform、filter、perspective、clip-path、mask、mask-image、mask-border、isolation、-webkit-overflow-scrolling、will-change、contain
【０１０２】
要素の重なり順の計算方法について、詳細は下記のMDN web docsのURLを参照されたい。
MDN web docs  「The stacking context」
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
【０１０３】
以下、診断対象のウェブコンテンツが図３２のものであり、HTML/CSSのソース文書が図３４として具体的に説明する。また、要素の属性および要素の重なり順は、図３６に示すものとする。ただし、transformの右側に「...」と表示されている属性の値についてはすべてブラウザ側で指定されたデフォルト値とする。
【０１０４】
このとき、HTMLの木構造の階層ごとに属性の値を参照し、属性の値に応じて要素の重なり順を入れ替える。1・2階層目は、htmlタグ、bodyタグであるため、3階層目から参照する。
【０１０５】
まず、3階層目の要素それぞれについて、属性の値を参照する。3階層目の要素は、要素ID=3と15である。要素ID=3の要素は、(position,z-index)=(fixed, 1020)であるため、要素ID=3のローカルスタックコンテキスト(スタックレベル1020)に属する。また、要素ID=15は(position,z-index)=(absolute, auto)であるため、ルートスタック（スタックレベル0）に属する。そのため、図３７に示すように、要素ID=3〜14のグループと、要素ID=15〜19のグループを、順序を入れ替える。スタックコンテキストについては、下記のURLを参照すること。
【０１０６】
ほんっとにはじめてのHTML5とCSS3  「要素の重なり順の上下関係を指定する z-indexプロパティ」
http://honttoni.blog74.fc2.com/blog-entry-287.html
【０１０７】
次に、4階層目の要素それぞれについて、属性の値を参照する。4階層目の要素は、要素ID=16と4である。要素ID=16の要素は、(position,z-index)=(absolute, -1)であるため、要素ID=16のローカルスタックコンテキスト（スタックレベル-1）に属する。よって、図３８に示すように、要素ID=16〜19のグループと、要素ID=15の順序を入れ替える。
【０１０８】
また、要素ID=4の要素は、(position,z-index)=(static, auto)であり、要素ID=3のローカルスタックコンテキスト(スタックレベル1020)に属するため、特に順序を入れ替えない。理由は、上記のURLを参照すること。
【０１０９】
5階層目の要素それぞれについて、属性の値を参照する。5階層目の要素は、要素ID=17,18,5,7,9,11,13である。要素ID=17の要素は、(position,z-index)=(absolute, -1)であるため、要素ID=16のローカルスタックコンテキスト（スタックレベル-1）に属する。要素ID=18の要素は、(position,z-index)=(absolute, -2)であるため、要素ID=18のローカルスタックコンテキスト(スタックレベル-2)に属する。よって、図３９に示すように、要素ID=17と、要素ID=18〜19のグループとの順序を入れ替える。
【０１１０】
また、要素ID=5,7,9,11,13の要素は、(position,z-index)=(static, auto)であり、要素ID=3のローカルスタックコンテキスト(スタックレベル1020)に属するため、特に順序を入れ替えない。理由は、上記のURLを参照すること。
【０１１１】
最後に、6階層目の要素それぞれについて、属性の値を参照する。6階層目の要素は、要素ID=19,6,8,10,12,14である。要素ID=19の要素は、(position,z-index)=(static, auto)であり、要素ID=18のローカルスタックコンテキスト(スタックレベル-2)に属するため、特に順序を入れ替えない。
【０１１２】
また、要素ID=6,8,10,12,14の要素は、(position,z-index)=(static, auto)であり、要素ID=3のローカルスタックコンテキスト(スタックレベル1020)に属するため、特に順序を入れ替えない。
【０１１３】
最終的に、要素の重なり順は、図４０に示す通りとなる。
【０１１４】
S12:
次に、表示色取得部２０２は、要素同士の重なり領域を計算する。
【０１１５】
先ず、表示色取得部２０２は、図４１に示すように、要素の重なり順でi番目の要素と、1、2、...、i-2、i-1番目それぞれの要素に対して、要素同士の重なり領域を算出する。ただし、i≧2の整数とする。
【０１１６】
4列目には、2列目の要素IDを持つ要素に対して、下に重なっている要素それぞれとの重なり領域が記載されている。重なり領域(x, y, width, height)が(0,0,0,0)であれば、要素同士は重なっていない。また、(x, y, width, height)それぞれの値が、0より大きければ、要素同士はその領域で重なっている。例えば、要素ID=17の要素の行を見ると、(x, y, width, height)=(100,161,188.484375,21)の領域で、要素が上から順に要素ID=17,16,2,1の順で重なっていると分かる。診断対象の画面は図３５であるが、実際に、要素ID=17,16,2,1の順で重なっている。
【０１１７】
S13:
次に、表示色取得部２０２は、テキストノード毎に親要素で定義付けられている文字色及び背景色を取得する。
【０１１８】
具体的には、表示色取得部２０２は、テキストノード毎に、テキストノードの親要素に指定されている文字色を取得する。例えば、診断対象が図３２、ソース文書が図３４であるとする。このとき、図４２に示すように、テキストノードIDをkey、文字色をvalueとして記憶しておく。
【０１１９】
次に、表示色取得部２０２は、テキストノード毎に背景色の取得を行う。背景色の取得は、前述した第３実施形態と異なる。表示色取得部２０２は、テキストノード毎に、次の1.〜4.の手順で背景要素の背景色を取得する。
【０１２０】
1.テキストノードの親要素をpと定義する。（p=テキストノードの親要素）
2.pの要素ID及び背景色それぞれを取得する。
3.テキストノードIDをkeyとして、キュー番号とともに2.で取得した値を背景要素キューの一番後ろに格納する。
4.pがhtmlタグである場合、pの背景色が不透明色である場合、pの背景色が不透明なグラデーション色である場合、またはpの背景が画像である場合、ここで処理を終了する。それ以外の場合、pの直下に重なっている要素をpと再定義して2.に戻る。（p=pの直下に重なっている要素）
【０１２１】
例えば、診断対象が図３２であり、ソース文書が図３４であるとする。また、要素の属性、要素の重なり順、要素同士の重なり領域は、図４０及び図４１に示す通りとする。このとき、背景色を取得する手順は、図４３の1.〜5.の手順となる。
【０１２２】
S14:
次に、表示色取得部２０２は、テキストノード毎に表示背景色を取得する。表示背景色の取得方法は、上記第３実施形態と異なる。表示色取得部２０２は、テキストノード毎に表示背景色を計算する。表示背景色の計算手順は次の1.〜6.の順とする。
【０１２３】
1.背景要素キューのキュー番号の中で、最大の値をqとする。（q=最大キュー番号）
【０１２４】
2.次の処理を行う。
・「キュー番号qの背景色」が半透明色1色、または透明色1色である場合
この場合、背景色を「不透明の白色」、前景色を「キュー番号qの背景色」として、背景色に対して前景色をアルファブレンドした色を算出する。テキストノードIDをkey、算出した色を「算出した背景色」属性のvalueとして格納する。
アルファブレンドした色を（R8bit、G8bit、B8bit）とすると、背景色に対して前景色をアルファブレンドする計算式は次のとおりである。下記式は、一般的に知られている式である。
R8bit = Rb8bit + (Rf8bit - Rb8bit) * α
G8bit = Gb8bit + (Gf8bit - Gb8bit) * α
B8bit = Bb8bit + (Bf8bit - Bb8bit) * α
ただし、前景色のRGB値を(Rf8bit,Gf8bit,Bf8bit)、前景色の透過度をα、背景色のRGB値を(Rb8bit,Gb8bit,Bb8bit)とする。RGB値はすべて0以上255以下の整数とし、R8bit、G8bit、B8bitそれぞれの計算結果が小数になった場合は、小数点切り捨てとする。αは、0≦α≦1の実数とする。
【０１２５】
「キュー番号qの背景色」が半透明色2色以上である場合
この場合、背景色を「不透明の白色」、前景色を「キュー番号qの背景色」として、背景色に対して前景色をアルファブレンドした色をすべて算出する。ただし、このとき、キュー番号qの複数の背景色ごとに、アルファブレンドした色をすべて算出する。
テキストノードIDをkey、算出した色すべてを「算出した背景色」属性のvalueとして格納する。
【０１２６】
「キュー番号qの背景色」が不透明色である場合
この場合、テキストノードIDをkey、「キュー番号qの背景色」を「算出した背景色」属性のvalueとして格納する。
【０１２７】
3.q=q-1と再定義する。
【０１２８】
4.q=0である場合、ここで処理を終了する。
【０１２９】
5.次の処理を行う。
「『算出した背景色』属性に格納した色」が1色、「キュー番号qの背景色」が1色の場合
この場合、背景色を『算出した背景色』属性に格納した色、前景色をキュー番号qの背景色として、背景色に対して前景色をアルファブレンドした色を算出する。テキストノードIDをkey、算出した色を『算出した背景色』属性のvalueとして格納する。
・「『算出した背景色』属性に格納した色」と「キュー番号qの背景色」どちらか一方またはその両方が2色以上(画像やグラデーション色など)である場合。
背景色を「『算出した背景色』属性に格納した色」、前景色を「キュー番号qの各背景色」として、背景色に対して前景色をアルファブレンドした色をすべて算出する。ただし、「『算出した背景色』属性に格納した色」と「キュー番号qの複数の背景色」のすべての組み合わせについて、アルファブレンドした色をすべて算出する。
テキストノードIDをkey、算出した色すべてを「算出した背景色」属性のvalueとして格納する。
6.3.に戻る。
【０１３０】
例えば、診断対象が図３２、ソース文書が図３４であるとする。また、図４３の4.のように、背景要素キューに値が格納されているとする。
このとき、背景要素の色を取得する手順は、図４４の1.〜5.の手順となる。
1.背景要素キュー4番の背景色は透明色である。htmlタグの親要素の背景色は不透明の白色と決まっている。そのため、次の背景色に対して次の前景色をアルファブレンドした色を計算する。アルファブレンドの式は上記式を利用する。
・背景色：不透明の白色
・前景色：背景要素キュー4番の背景色rgba(0,0,0,0)
アルファブレンドした色は、rgba(255,255,255,1)となる。このアルファブレンドした色を「算出した背景色」に格納する。
2.次の背景色に対して次の前景色をアルファブレンドした色を計算する。
・背景色：算出した背景色rgba(255,255,255,1)
・前景色：背景要素キュー3番の背景色rgba(0,0,0,0)
アルファブレンドした色は、rgba(255,255,255,1)となる。このアルファブレンドした色を「算出した背景色」に格納する。
3.次の背景色に対して次の前景色をアルファブレンドした色を計算する。
・背景色：算出した背景色rgba(255,255,255,1)
・前景色：背景要素キュー2番の背景色rgba(0,255,255,0.5)
アルファブレンドした色は、rgba(127,255,255,1)となる。このアルファブレンドした色を「算出した背景色」に格納する。
4.次の背景色に対して次の前景色をアルファブレンドした色を計算する。
・背景色：算出した背景色rgba(127,255,255,1)
・前景色：背景要素キュー1番の背景色rgba(255,255,0,0.5)
アルファブレンドした色は、rgba(191,255,127,1)となる。このアルファブレンドした色を「算出した背景色」に格納する。
5.背景要素キュー1番に到達したので、計算を終了する。
【０１３１】
S15―S17：
S15-S17の処理は、上記第３実施形態と同様である。
【０１３２】
以上に、第４実施形態を説明したが、上記第４実施形態は以下の特徴を有する。
【０１３３】
即ち、表示色取得部２０２は、文字要素に重複して配置された複数の要素に定義付けられた背景色をアルファブレンドすることにより表示背景色を取得する。以上の構成によれば、ブラウザやUIデザインツールなどにウェブコンテンツを表示させた際のウェブコンテンツに含まれる文字要素の背景領域の背景色としての表示背景色を取得できるので、ウェブコンテンツのウェブアクセシビリティを正当に評価できる。
【０１３４】
上述の例において、プログラムは、様々なタイプの非一時的なコンピュータ可読媒体（non-transitory computer readable medium）を用いて格納され、コンピュータに供給することができる。非一時的なコンピュータ可読媒体は、様々なタイプの実体のある記録媒体（tangible storage medium）を含む。非一時的なコンピュータ可読媒体の例は、磁気記録媒体（例えばフレキシブルディスク、磁気テープ、ハードディスクドライブ）、光磁気記録媒体（例えば光磁気ディスク）を含む。非一時的なコンピュータ可読媒体の例は、更に、ＣＤ−ＲＯＭ（Read Only Memory）、ＣＤ−Ｒ、ＣＤ−Ｒ／Ｗ、半導体メモリ（例えば、マスクＲＯＭを含む。非一時的なコンピュータ可読媒体の例は、更に、ＰＲＯＭ（Programmable ROM）、ＥＰＲＯＭ（Erasable PROM）、フラッシュＲＯＭ、ＲＡＭ（random access memory））を含む。また、プログラムは、様々なタイプの一時的なコンピュータ可読媒体（transitory computer readable medium）によってコンピュータに供給されてもよい。一時的なコンピュータ可読媒体の例は、電気信号、光信号、及び電磁波を含む。一時的なコンピュータ可読媒体は、電線及び光ファイバ等の有線通信路、又は無線通信路を介して、プログラムをコンピュータに供給できる。
【符号の説明】
【０１３５】
２００  配色診断装置
２０２  表示色取得部
２０３  コントラスト比算出部
２０４  評価部
２０５  出力部
【図１】
2020160600.tif 000003
【図２】
2020160600.tif 000004
【図３】
2020160600.tif 000005
【図４】
2020160600.tif 000006
【図５】
2020160600.tif 000007
【図６】
2020160600.tif 000008
【図７】
2020160600.tif 000009
【図８】
2020160600.tif 000010
【図９】
2020160600.tif 000011
【図１０】
2020160600.tif 000012
【図１１】
2020160600.tif 000013
【図１２】
2020160600.tif 000014
【図１３】
2020160600.tif 000015
【図１４】
2020160600.tif 000016
【図１５】
2020160600.tif 000017
【図１６】
2020160600.tif 000018
【図１７】
2020160600.tif 000019
【図１８】
2020160600.tif 000020
【図１９】
2020160600.tif 000021
【図２０】
2020160600.tif 000022
【図２１】
2020160600.tif 000023
【図２２】
2020160600.tif 000024
【図２３】
2020160600.tif 000025
【図２４】
2020160600.tif 000026
【図２５】
2020160600.tif 000027
【図２６】
2020160600.tif 000028
【図２７】
2020160600.tif 000029
【図２８】
2020160600.tif 000030
【図２９】
2020160600.tif 000031
【図３０】
2020160600.tif 000032
【図３１】
2020160600.tif 000033
【図３２】
2020160600.tif 000034
【図３３】
2020160600.tif 000035
【図３４】
2020160600.tif 000036
【図３５】
2020160600.tif 000037
【図３６】
2020160600.tif 000038
【図３７】
2020160600.tif 000039
【図３８】
2020160600.tif 000040
【図３９】
2020160600.tif 000041
【図４０】
2020160600.tif 000042
【図４１】
2020160600.tif 000043
【図４２】
2020160600.tif 000044
【図４３】
2020160600.tif 000045
【図４４】
2020160600.tif 000046