JP2012133195A - 高視認色提示装置、高視認色提示方法および高視認色提示プログラム - Google Patents

Abstract

【課題】複数の色からなる背景に対して視認性の高い文字の色を提示する。
【解決手段】視認性の高い色を提示する高視認色提示装置であって、画像の背景を構成する複数の背景色を取得する背景色取得手段１１と、前記複数の背景色の相対輝度をそれぞれ算出する相対輝度算出手段１２と、前記複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記画像に用いる文字の相対輝度範囲として算出する文字輝度範囲算出手段１３と、前記文字の相対輝度範囲に含まれる文字色を算出する文字色算出手段１４と、前記文字色を表示する表示手段１５とを有する。
【選択図】図１

Description

本発明は、画像の配色を行う際に、複数の色からなる背景に対して視認性の高い文字の色を提示する高視認色提示装置、高視認色提示方法および高視認色提示プログラムに関する。

近年、インターネットが社会において広く普及し、様々な環境で閲覧されうること、また、様々な特徴を持った利用者がいることを想定したウェブコンテンツの作成および提供が求められている。その中で、ウェブサイトのアクセシビリティを担保するためのチェック項目を記述した「ウェブアクセシビリティガイドライン」が重要視されており、2010年には非特許文献１のガイドラインが策定された。

このガイドラインのチェック項目の中にウェブサイトの配色に関する項目があり、背景色と文字色との2色に対して輝度のコントラスト（明るさの違い）比の計算式と、視認性に関する基準が設けられている。概要は以下のとおりである。

sRGB空間において、色の相対輝度値Lを以下の式で求める。

L = 0.2126＊R＋0.7152＊G＋0.0722＊B
コントラスト比を以下の式で求める。

（L1＋0.05）／（L2＋0.05）
なお、L1は明るい方の色の相対輝度値、L2は暗い方の色の相対輝度値である。

そして、視認性の保持のために、相対輝度値のコントラスト比は少なくとも4.5 : 1がなければならないとし、この基準を満たしていれば背景に対して文字が見えやすいとしている。ただし、文字サイズが大きい場合には3 : 1でも可としている。

「高齢者・障害者等配慮設計指針−情報通信における機器、ソフトウェア及びサービス −第3部：ウェブコンテンツJIS X 8341-3:2010」、財団法人 日本規格協会、平成22年8月20日、p.7-8,17-18

しかしながら、非特許文献１の基準は、1色の背景と文字との輝度コントラスト比に関するものであり、背景が2色以上ある場合については考慮していないという問題がある。

そこで、例えば輝度差が最大となる組み合わせである、白（R:G:B =255:255:255）と黒（R:G:B =0:0:0）の2色で構成されるグラデーションの背景に載せる文字について考察する。相対輝度コントラスト比の基準を4.5 : 1に設定すると、相対輝度値が1である白に対して、基準を満たす相対輝度値は0.1750、相対輝度値が0である黒に対して基準を満たす相対輝度値は0.1833となる。そのため，相対輝度コントラスト比の基準を満たす文字の相対輝度値は0.1750〜0.1833の狭い範囲となり、その差がごくわずかとなってしまう。仮にカラーモニタの最大輝度値を180 cd/m²と仮定すると、およそ1 cd/m²程度の差しかない。そのため、使用できる文字色が限られてしまうという問題がある。

本発明は、上記事情に鑑みてなされたものであり、本発明の目的は、複数の色からなる背景に対して視認性の高い文字の色を提示する視認色提案装置、視認色提案方法および視認色提案プログラムを提供することにある。

上記目的を達成するため、本発明は、視認性の高い色を提示する高視認色提示装置であって、画像の背景を構成する複数の背景色を取得する背景色取得手段と、前記複数の背景色の相対輝度をそれぞれ算出する相対輝度算出手段と、前記複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記画像に用いる文字の相対輝度範囲として算出する文字輝度範囲算出手段と、前記文字の相対輝度範囲に含まれる文字色を算出する文字色算出手段と、前記文字色を表示する表示手段と、を有する。

また、本発明は、視認性の高い色を提示する高視認色提示方法であって、コンピュータ装置は、画像の背景を構成する複数の背景色を取得する背景色取得ステップと、前記複数の背景色の相対輝度をそれぞれ算出する相対輝度算出ステップと、前記複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記画像に用いる文字の相対輝度範囲として算出する文字輝度範囲算出ステップと、前記文字の相対輝度範囲に含まれる文字色を算出する文字色算出ステップと、前記文字色を表示する表示ステップと、を行う。

また、本発明は、前記高視認色提示装置としてコンピュータを機能させるための高視認色提示プログラムである。

本発明によれば、複数の色からなる背景に対して視認性の高い文字の色を提示する視認色提案装置、視認色提案方法および視認色提案プログラムを提供することができる。

本発明の実施形態に係る高視認色提示装置のブロック図である。 高視認色提示装置の処理の流れを示すフローチャートである。 所定のコントラス比の基準を満たす文字の相対輝度範囲の具体例である。 所定のコントラス比の基準を満たす文字の相対輝度範囲の他の具体例である。 所定のコントラス比の基準を満たす文字の相対輝度範囲が存在しない具体例である。 使用可能な文字色の表示例である。

以下、本発明の実施の形態について、図面を参照して説明する。
図１は、本発明の実施形態に係る高視認色提示装置１０の構成を示すブロック図である。高視認色提示装置１０は、電子画像、電子コンテンツなどの画像の配色を行う際に、複数の色からなる背景に対して視認性の高い文字の色を提示する。なお、複数の色からなる背景には、これらの複数の色が混合され、連続的・段階的に変化するグラデーションのような背景が含まれる。また、視認性は、背景に対して文字が読みやすいという意味では可読性とも呼ばれる。

図示する高視認色提示装置１０は、背景色取得部１１と、相対輝度算出部１２と、文字輝度範囲算出部１３と、文字色算出部１４と、表示部１５と、背景色変換部１６と、記憶部１７とを備える。

背景色取得部１１は、画像の背景を構成する複数の背景色を取得する。相対輝度算出部１２は、背景色取得部１１が取得した複数の背景色の相対輝度をそれぞれ算出する。文字輝度範囲算出部１３は、背景色取得部１１が算出した複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、画像に用いる文字の相対輝度範囲として算出する。文字色算出部１４は、文字輝度範囲算出部１３が算出した文字の相対輝度範囲に含まれる文字色を算出する。表示部１５は、文字色算出部１４が算出した文字色を表示する。記憶部１７には、各部１１〜１４、１６が取得または算出した情報が記憶される。

高視認色提示装置１０には、例えば、ＣＰＵと、メモリと、ＨＤＤ等の外部記憶装置と、入力装置と、出力装置とを備えた汎用的なコンピュータシステム（例えば、ＰＣ等）を用いることができる。このコンピュータシステムにおいて、ＣＰＵがメモリ上にロードされた高視認色提示装置１０用のプログラムを実行することにより、高視認色提示装置１０の各機能が実現される。また、高視認色提示装置１０用のプログラムは、ハードディスク、フレキシブルディスク、ＣＤ−ＲＯＭ、ＭＯ、ＤＶＤ−ＲＯＭなどのコンピュータ読取り可能な記録媒体に記憶することも、ネットワークを介して配信することもできる。

次に、本実施形態の動作について説明する。

図２は、高視認色提示装置１０の処理の流れを示すフローチャートである。

ステップS1では、背景色取得部１１が、対象となる画像の背景のグラデーションを構成する両端の2色を背景色として取得する。例えば、背景色取得部１１は、高視認色提示装置１０を使用するユーザが指定（入力）した任意の2色を背景色として取得してもよい。また、背景色取得部１１は、入力された、対象画像を画像解析し、背景のグラデーションを構成する両端の2色を背景色として取得してもよい。背景色取得部１１は、取得した2色の背景色の情報を、記憶部１７に記憶するとともに、相対輝度算出部１２に送出する。

ステップS2では、相対輝度算出部１２が、ステップS1で取得した2色の背景色のそれぞれの相対輝度値Lを、式１を用いて算出する。相対輝度算出部１２は算出した各相対輝度値を、記憶部１７に記憶するとともに、文字輝度範囲算出部１３に送出する。

L = 0.2126＊R＋0.7152＊G＋0.0722＊B ・・・式１
式1でのRGB値は、sRGB色空間のsRGB値である。sRGB値の算出については、非特許文献１に記載されている。

ステップS3では、文字輝度範囲算出部１３が、ステップS2で算出した2色の背景色の各相対輝度値Lに対して、所定のコントラスト比の基準を満たす文字の相対輝度範囲を、それぞれ算出する。ここでは、式２を用いてコントラスト比が3 : 1以上となる相対輝度範囲を求めるものとする。

（L1＋0.05）／（L2＋0.05） ・・・式２
なお、L1は明るい方の色の相対輝度値、L2は暗い方の色の相対輝度値である。

相対輝度範囲は、2色の背景色よりも明るい範囲（L_high）と、暗い範囲（L_low）と、2色の背景色の間の範囲（L_middle）の3種類を算出する。文字輝度範囲算出部１３は、算出した相対輝度範囲を、記憶部１７に記憶する。

図３は、背景が黒（R:G:B =0:0:0）と緑（R:G:B =0:255:0）との2色で構成されるグラデーションの場合に、各々の背景色に対して所定のコントラス比（ここでは3：1）の基準を満たす文字の相対輝度範囲の具体例である。この場合、文字の相対輝度範囲として、0.1〜0.2051 （L_middle）が算出される。なお、グラフの横軸の変化ステップ数は、グラデーションを構成する2色の割合の変化を示すものである。

図４は、背景が青（R:G:B =10:120:250）と緑（R:G:B =10:120:15）との2色で構成されるグラデーションの場合に、各々の背景色に対して所定のコントラス比（ここでは3：1）の基準を満たす文字の相対輝度範囲の具体例である。この場合、文字の相対輝度範囲として、0.7120〜1 （L_high）と、0〜0.0118 （L_low）の2つが算出される。

図５は、背景が緑（R:G:B =0:100:0）と緑（R:G:B =0:255:0）との2色で構成されるグラデーションの場合に、各々の背景色に対して所定のコントラス比（ここでは3：1）の基準を満たす文字の相対輝度範囲の具体例である。この場合、文字の相対輝度範囲は、L_high、L_middle 、L_lowの全てが存在しない。

なお、本実施形態では基準となる相対輝度コントラスト比を3 : 1としたが、これに限定されるものではなく、例えば背景と文字の輝度コントラスト比を定めるガイドライン等に則って設定するものとする。

ステップS4では、ステップS3で求めた3種類の相対輝度範囲の有無によって処理を分岐する。L_high、L_low、L_middleのそれぞれについて、2色の背景色の相対輝度によっては解が存在しない場合がある。L_high、L_low、L_middleのうちどれか一つでも相対輝度範囲が存在する場合は、ステップS5に進む。一つも存在しない場合はステップS7に進む。

ステップS5では、文字色算出部１４が、ステップS4で算出した相対輝度範囲から文字として利用可能な文字色の算出を行う。ここでは、候補となりうる文字色の範囲を求めるものとする。ｓRGB色空間において、各sRGB値を0から1（通常のRGB色空間の0から255に対応する）まで、0.01ずつ増加させていき、相対輝度値を前記式１によって求める。そして、ステップS4で求めた相対輝度範囲内に収まる組み合わせを全て抽出する。文字色算出部１４は、抽出したsRGB値の情報を、記憶部１７に記憶するとともに、表示部１５に送出する。

ステップS6では、表示部１５が、ステップS5で算出したsRGB値を用いて、文字として使用可能な文字色の表示を行う。ここではステップS5で抽出した全てのsRGB値の色を表示するものとする。なお、表示部１５は、文字色の表示を行う他に、ユーザが表示されたいずれかの文字色を選択した際に、当該文字色のRGB値や、HTMLの記述に使用する16進数などの表示を行うなどのインタフェースを有することとしてもよい。RGB値やHTMLの記述に使用する16進数を表示する場合、sRGB値からRGB値および16進数に変換するための数式または変換テーブルなどが記憶部１７に記憶されているものとする。

図６は、高視認色提示装置１０のディスプレイ（出力装置）に表示される使用可能な文字色の表示例である。図示する例では、RGB値を様々に変化させて生成した複数の色をそれぞれ配置し、これらの色の中からステップS5で抽出したsRGB値に相当する色のみをそのまま表示し、それ以外の色については、ハッチング６１を設定したり、黒く塗りつぶすなどして表示されないようにする。

ステップS7は、ステップS4で相対輝度範囲が存在しなかった場合（S4：NO）のステップである。例えば、背景色がやや暗い緑（R : G : B）=（0 : 120 : 0）と、白（R : G : B）=（255 : 255 : 255）で構成されるグラデーションの場合、文字として適した相対輝度範囲が存在しない。この場合、背景色変換部１６は、以下の第１の方法および第２の方法により、背景色を変更する。

第１の方法は、背景をより明るいグラデーションに変える方法である。元の背景のグラデーションを構成する2色のうち、相対輝度の低い色について、RGB値から色相、彩度、明度の軸による色空間であるHSV色空間に変換する。このうち、S値は彩度（鮮やかさ）を表す値である。また、H値は、色相（色あい）を表す値であり、角度（0°〜360°）で表現される。このS値およびH値について、元の色のS値が所定の値（例えば30など）以上の場合、新しい色はS値が10以上であって、かつH値の±5°の範囲を候補とする。そして、その範囲において明るさを表すV値を高くしていき、相対輝度範囲が出現するまで繰り返し、相対輝度範囲が出現したところで終了する。

この第１の方法では、H値を元のH値から±5°の範囲で限定することで、変更する背景色の色の色あいを保ちつつ、明るさのみを変えることができる。なお、元の色のS値が所定の値（例えば30など）未満の場合は、S値 = 0、すなわち灰色と定義して、V値のみを変化させるものとする。

なお、ここではHSV色空間におけるS値の所定値として30を、またH値の範囲として±5°を例示したが、これに限定されるものではない。視認性の高い文字色の候補を提示するために、他の範囲であっても良い。また、色空間についても、HSV色空間に限らず、同様に色相、彩度、明度を求めることのできるL*a*b*色空間などを使用しても良い。

第２の方法は、背景をより暗いグラデーションに変える方法である。これは、上記とは逆に、元の背景を構成する2色のうち、相対輝度の高い色を調整するものである。第２の方法は、第１の方法と同様に、S値およびH値について、元の色のS値が所定の値（例えば30など）以上の場合、新しい色はS値が10以上であって、かつH値の±5°の範囲を候補とする。そして、その範囲において明るさを表すV値を低くしていくものとする。元の色のS値が所定の値（例えば30など）未満の場合は、S値 = 0、すなわち灰色と定義して、V値のみを変化させるものとする。

背景色変換部１６は、生成した相対輝度範囲の値については記憶部１７に記憶するとともに、文字色算出部１４に送出し、変換された背景色の情報については記憶部１７に記憶するとともに、表示務１５に送出する。

ステップS8では、文字色算出部１４が、ステップS7で算出された相対輝度範囲により、文字色の候補を算出する。文字色の算出方法については、ステップS5と同様である。文字色算出部１４は、算出された文字色の情報を、記憶部１７に記憶するとともに、表示部１５に送出する。

ステップS9では、表示部１５が、ステップS7で求めた背景色と、ステップS8で求めた文字色の候補とを表示する。ステップS7では、背景色として、第１の方法と第２の方法の２つの方法で2つの背景色の候補を算出したが、それぞれを個別に表示することとしてもよい。また、変換した背景色と、変換されない他方の背景色とで新たなグラデーションを構成して表示することとしてもよい。また、変換した背景色の表示を行う他に、ユーザが当該背景色を選択した際に、変換した背景色のRGB値や、HTMLの記述に使用する16進数などの表示を行うなどのインタフェースを有することとしてもよい。文字色の候補の表示についてはステップS6と同様とする。

また、表示部１５は、文字色と背景色それぞれについて、色の表示や値の表示を行うだけでなく、例えば、変換した背景色と、変換していない背景色とを用いてグラデーションを生成し、その上に候補となる文字色の文字を載せた状態で表示するなど、様々な表示方法で文字色およびは変更した背景色を表示することとしてもよい。

以上説明した本実施形態では、複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を文字の相対輝度範囲として算出し、当該相対輝度範囲に含まれる文字色を算出することで、複数の色からなる背景に対して視認性の高い文字の色を提示することができる。

また、本実施形態では、図２のＳ７で背景色を変更する際に、H値を元のH値から所定の範囲内に限定することで、変更する背景色の色あいを保ちつつ、明るさのみを変えることができる。これにより、元の画像（デザイン）の印象や色あいを変えないようにすることができる。すなわち、本実施形態では、文字の視認性が高くなるように、元のデザインの色あいを考慮した背景色を提示することができる。

なお、本発明は上記実施形態に限定されるものではなく、その要旨の範囲内で数々の変形が可能である。例えば、ステップS5では、文字色算出部１４が、候補となりうる文字色の範囲を全て算出することとしたが、必ずしも全ての文字色を算出する必要はない。色相、彩度、明度から構成されるHSV色空間などを用いて、文字色の色相を限定して求めることとしてもよい。また、背景のグラデーションを構成する2色とのコーディネートを考慮して文字色を決定することとしてもよい。その際、相対輝度が背景に適した相対輝度範囲内に収まればよいものとする。

また、ステップS7では、第１の方法と第２の方法により、新しい背景色（グラデーションを構成する色の一方）の候補が2色算出されるが、必ずしも2色である必要はない。第１の方法または第２の方法のいずれか一方を行って、1色のみを算出することとしてもよい。また、2色以上算出することとしてもよい。

また、ステップS7では、背景色変換部１６が、背景であるグラデーションを構成する背景色を調整するものとしたが、必ずしも上記実施形態の第１または第２の方法でなくてもよい。例えば背景を明るいグラデーションに変える方法について以下のような方法を用いることとしてもよい。

背景色を構成する2色のうち、相対輝度の低い方の色のRGB値で最大となるものを選ぶ。上記実施形態の例では、やや暗い緑のG値（120）を選択する。このG値について、他方の色の対応する値、すなわち上記実施形態の例では白のG値（255）まで1ずつ近づける。これを、相対輝度範囲が出現するまで繰り返し、相対輝度範囲が出現したところで終了する。このようにすることによって、相対輝度値を上げつつ、色の特徴を表現する値をより強調していくことができる。なお、相対輝度値の低い色においてRGB値が全て同じ値である場合には、RGB値を共に1ずつ増やしていき、相対輝度範囲が出現したところで終了するものとする。

背景を暗いグラデーションに変える方法についても、背景色を構成する2色のうち相対輝度の高い色の方を同様の方法で調整する。また、調整する色のRGB値が全て同じ値である場合について、他方の色のRGB値で最大の値を選択し、それに対応する値について変換を行うとするのでもよい。以上のように、背景色の調整方法は、様々な方法を用いることができる。

１０：高視認色提示装置
１１：背景色取得部
１２：相対輝度算出部
１３：文字輝度範囲算出部
１４：文字色算出部
１５：表示部
１６：背景色変換部
１７：記憶部

Claims (7)

1. 視認性の高い色を提示する高視認色提示装置であって、
   画像の背景を構成する複数の背景色を取得する背景色取得手段と、
   前記複数の背景色の相対輝度をそれぞれ算出する相対輝度算出手段と、
   前記複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記画像に用いる文字の相対輝度範囲として算出する文字輝度範囲算出手段と、
   前記文字の相対輝度範囲に含まれる文字色を算出する文字色算出手段と、
   前記文字色を表示する表示手段と、を有すること
   を特徴とする高視認色提示装置。
2. 請求項１記載の高視認色提示装置であって、
   前記コントラスト比を満たす前記文字の相対輝度範囲が存在しない場合、いずれかの背景色を変換して新たな背景色を生成し、当該新たな背景色の相対輝度を算出し、当該新たな背景色の相対輝度および他の背景色の相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記文字の相対輝度範囲として算出する背景色変換手段を、さらに有し、
   前記文字色算出手段は、前記背景色変換手段が算出した相対輝度範囲に含まれる文字色を算出し、
   前記表示手段は、前記背景色変換手段が生成した新たな背景色と、前記文字色算出手段が算出した文字色とを表示すること
   を特徴とする高視認色提示装置。
3. 請求項２記載の高視認色提示装置であって、
   前記背景色変換手段は、変換前の背景色の色あいを保持し、新たな背景色を生成すること
   を特徴とする高視認色提示装置。
4. 視認性の高い色を提示する高視認色提示方法であって、
   コンピュータ装置は、
   画像の背景を構成する複数の背景色を取得する背景色取得ステップと、
   前記複数の背景色の相対輝度をそれぞれ算出する相対輝度算出ステップと、
   前記複数の背景色の各相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記画像に用いる文字の相対輝度範囲として算出する文字輝度範囲算出ステップと、
   前記文字の相対輝度範囲に含まれる文字色を算出する文字色算出ステップと、
   前記文字色を表示する表示ステップと、を行うこと
   を特徴とする高視認色提示方法。
5. 請求項４記載の高視認色提示方法であって、
   前記コントラスト比を満たす前記文字の相対輝度範囲が存在しない場合、いずれかの背景色を変換して新たな背景色を生成し、当該新たな背景色の相対輝度を算出し、当該新たな背景色の相対輝度および他の背景色の相対輝度に対して所定のコントラスト比を満たす相対輝度の範囲を、前記文字の相対輝度範囲として算出する背景色変換ステップを、さらに行い、
   前記文字色算出ステップは、前記背景色変換ステップで算出した相対輝度範囲に含まれる文字色を算出し、
   前記表示ステップは、前記背景色変換ステップで生成した新たな背景色と、前記文字色算出ステップで算出した文字色とを表示すること
   を特徴とする高視認色提示方法。
6. 請求項５記載の高視認色提示方法であって、
   前記背景色変換ステップは、変換前の背景色の色あいを保持し、新たな背景色を生成すること
   を特徴とする高視認色提示方法。
7. 請求項１から請求項３のいずれか１項に記載の高視認色提示装置としてコンピュータを機能させるための高視認色提示プログラム。