JP6006560B2

JP6006560B2 - Web content color creation support method and web content color creation support device

Info

Publication number: JP6006560B2
Application number: JP2012159558A
Authority: JP
Inventors: 高洋稲田; 田中　公司; 公司田中; 前田　浩志; 浩志前田; 茂豊野村
Original assignee: Hitachi Government and Public Sector System Engineering Ltd
Current assignee: Hitachi Social Information Services Ltd
Priority date: 2012-07-18
Filing date: 2012-07-18
Publication date: 2016-10-12
Anticipated expiration: 2032-07-18
Also published as: JP2014021702A

Description

本発明は、ウェブ（Ｗｅｂ）コンテンツに使用するＵＩ（User Interface）要素の色の作成を支援する技術に関する。 The present invention relates to a technique for supporting creation of a color of a UI (User Interface) element used for Web content.

Ｗｅｂデザイナは、Ｗｅｂコンテンツの作成において、複数のＷｅｂブラウザ、またバージョン別による検証確認をして作成するが、Ｗｅｂブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることを経験している。 Web designers create web content by verifying and checking multiple web browsers and versions, but they experience different appearances depending on the type of web browser, and sometimes the layout breaks down. ing.

また、色覚障がい者支援のための画像処理方法として、カラー画像内でＲ（赤色）とＧ（緑色）の差異が大きくなる境界を抽出し、その境界からある程度の範囲内の画素について、Ｂ（青色）成分の値を変化させることで縁取りを挿入する。挿入された縁取りは、健常者にはＲＧの刺激に掻き消されてほとんど知覚されないが、ＲＧの識別が困難な色覚障がい者にはＢ成分の変化による刺激に対して敏感に反応するため、はっきりとした縁取りとして知覚することが可能となることが開示されている（例えば、特許文献１参照）。 In addition, as an image processing method for supporting a person with color blindness, a boundary where a difference between R (red) and G (green) increases in a color image is extracted, and B ( Insert a border by changing the value of the (blue) component. The inserted border is almost perceived by the RG stimulus for the healthy person, but the person with color blindness who is difficult to identify the RG is sensitive to the stimulus by the change of the B component. It has been disclosed that it can be perceived as an edging (for example, see Patent Document 1).

特開２０１１−１０９４３０号公報JP 2011-109430 A

色覚障がいなどの色覚の特性に依存せず、画面に表示される要素が明確に判別できるためには、その要素と、その要素に接した他の要素との輝度コントラスト比（濃さの違い）が充分大きいことが必要である。輝度コントラスト比の計算方法と、その要素が文字の場合に確保すべき輝度コントラスト比の最低値は、Ｗ３Ｃ（World Wide Web Consortium）勧告のＷＣＡＧ（Web Content Accesibility Guidelines）によって提示されている。そのためＷｅｂデザイナは、文字の色を決める際に、その基準を満たしているかどうかを確認する必要がある。グラデーションなど、文字に接する箇所の色が連続的な変化する場合には、最も輝度コントラスト比が小さい箇所の色が最低値を満たしている必要があるが、最も輝度コントラスト比が小さい箇所の特定に時間がかかるという課題がある。 In order to be able to clearly distinguish the elements displayed on the screen without depending on the characteristics of color vision such as color blindness, the brightness contrast ratio (difference in darkness) between that element and other elements that touch that element Must be sufficiently large. The calculation method of the luminance contrast ratio and the minimum value of the luminance contrast ratio to be secured when the element is a character are presented by WCAG (Web Content Accesibility Guidelines) recommended by the World Wide Web Consortium (W3C). For this reason, the Web designer needs to check whether the standard is satisfied when determining the color of the character. When the color of the part that touches the character changes continuously, such as gradation, the color of the part with the smallest luminance contrast ratio needs to satisfy the minimum value. There is a problem that it takes time.

本発明は、前記した課題を解決するためになされたものであり、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なＵＩ要素の色を効率的に作成することができるウェブコンテンツの色作成支援方法およびウェブコンテンツの色作成支援装置を提供することを目的とする。 The present invention has been made to solve the above-described problems, and is a web content that can efficiently create a color of a UI element that can be clearly distinguished without depending on color vision characteristics such as color blindness. It is an object to provide a color creation support method and a web content color creation support apparatus .

前記目的を達成するため、ウェブコンテンツで使用される部品（例えば、ＵＩ要素であるボタン本体１００）の色の作成を支援する色作成支援装置（例えば、Ｗｅｂサーバ１０）を用いるウェブコンテンツの色作成支援方法は、クライアント（例えば、クライアント２０）から部品の作成要求がある場合、ウェブコンテンツ上で使用される部品の色を作成する色作成支援操作画面（例えば、画面３０Ｗ）を表示し、色作成支援操作画面で、指定された該部品を構成する要素毎に、色作成用のカラーパレットを表示し、色作成支援操作画面には、指定された該部品を構成する要素毎に表示された複数の色作成用のカラーパレット間には、隣接する要素であることを示す連系線が表示され、色作成支援装置は、隣接する要素間での輝度コントラスト比が所定の比率未満となる場合、連系線上に隣接する要素が識別できない可能性がある旨のマークを付することを特徴とする。 In order to achieve the above object, color creation of web content using a color creation support device (for example, Web server 10) that supports the creation of colors of parts used in the web content (for example, button body 100 which is a UI element). In the support method, when there is a part creation request from a client (for example, client 20), a color creation support operation screen (for example, screen 30W) for creating the color of the part used on the web content is displayed, and color creation is performed. A color palette for color creation is displayed for each element constituting the specified part on the support operation screen, and a plurality of colors displayed for each element constituting the specified part are displayed on the color creation support operation screen. Between the color palettes for color creation, a connection line indicating that the elements are adjacent to each other is displayed, and the color creation support device displays a luminance contrast between the adjacent elements. If the ratio is less than a predetermined ratio, elements adjacent to the interconnection line is characterized by subjecting a mark indicating that there may not be identified.

本発明によれば、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なＵＩ要素の色を効率的に作成することができる。 According to the present invention, it is possible to efficiently create a color of a UI element that can be clearly distinguished without depending on color vision characteristics such as color vision impairment.

本発明の実施形態に係る色作成支援ツールの利用形態を示す図である。It is a figure which shows the utilization form of the color creation assistance tool which concerns on embodiment of this invention. 色作成支援ツールが起動されたときの画面構成の例を示す図である。It is a figure which shows the example of a screen structure when a color creation assistance tool is started. デザインするＵＩ要素が選択されたときの画面構成の例を示す図である。It is a figure which shows the example of a screen structure when the UI element to design is selected. 文字と背景の輝度比の表示欄の「？」マークが押下されたときのメッセージボックスの例を示す図である。It is a figure which shows the example of a message box when the "?" Mark of the display column of the luminance ratio of a character and a background is pressed down. 通常時のボタンの編集画面の例を示す図である。It is a figure which shows the example of the edit screen of the button at the normal time. 非活性時のボタンの編集画面の例を示す図である。It is a figure which shows the example of the edit screen of the button at the time of non-activation. マウスオーバー時のボタンの編集画面の例を示す図である。It is a figure which shows the example of the edit screen of the button at the time of a mouse | over. 色覚シミュレーターの切替えを示す図である。It is a figure which shows switching of a color vision simulator. コードを表示のボタンが押下されたときの出力コードを示す図である。It is a figure which shows an output code when the button which displays a code is pressed. 色作成支援ツールで作成した色の確認のための画面構成の例を示す図である。It is a figure which shows the example of the screen structure for the confirmation of the color produced with the color creation assistance tool. ＵＩ要素である具体例としてボタンの構成を示す図である。It is a figure which shows the structure of a button as a specific example which is UI element. 図５における単色のタブとグラデーションのタブとの一具体例を示す図である。FIG. 6 is a diagram illustrating a specific example of a monochrome tab and a gradation tab in FIG. 5. 図６のカラーパレット表示エリアを拡大した図である。It is the figure which expanded the color palette display area of FIG. 色作成支援ツールの編集画面の例を示す図である。It is a figure which shows the example of the edit screen of a color creation assistance tool. Ｒ８bit，Ｇ８bit，Ｂ８bitから輝度値に変換する際の具体例を示す図である。It is a figure which shows the specific example at the time of converting into luminance value from R8bit, G8bit, B8bit.

以下、本発明の実施形態について図面を参照して詳細に説明する。
図１は、本発明の実施形態に係る色作成支援ツールの利用形態を示す図である。色作成支援ツール(Assistance for Color Generation)３０は、Ｗｅｂサーバ１０に格納されており、インターネット９０（ネットワーク）に通信可能に接続されている、デザイナが利用するクライアント２０（端末）からアクセスして利用する。クライアント２０は、例えば、パーソナルコンピュータであり、各種のＷｅｂブラウザがダウンロードされている。 Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings.
FIG. 1 is a diagram showing a usage pattern of a color creation support tool according to an embodiment of the present invention. The color creation support tool (Assistance for Color Generation) 30 is stored in the Web server 10 and is connected to the Internet 90 (network) so as to be communicable and accessed from a client 20 (terminal) used by a designer. To do. The client 20 is, for example, a personal computer, and various web browsers have been downloaded.

Ｗｅｂサーバ１０は、ＨＴＴＰ（HyperText Transfer Protocol）に則り、クライアント２０のＷｅｂブラウザに対して、ＨＴＭＬ（HyperText Markup Language）やオブジェクト（画像など）の表示を提供するサービスプログラム、および、そのサービスが動作するサーバコンピュータである。Ｗｅｂサーバ１０には、処理部１１、記憶部１２（データベース）などがあり、処理部１１は、クライアント２０からの要求により、所望の処理画面を、クライアント２０に表示する。 The Web server 10 operates in accordance with HTTP (HyperText Transfer Protocol), a service program that provides display of HTML (HyperText Markup Language) and objects (images, etc.) to the Web browser of the client 20, and the service operates. It is a server computer. The Web server 10 includes a processing unit 11, a storage unit 12 (database), and the like. The processing unit 11 displays a desired processing screen on the client 20 in response to a request from the client 20.

色作成支援ツール３０は、ＣＳＳ３（Cascading Style Sheets 3）で開発するＷｅｂコンテンツの色の選択・作成を支援するツールのプログラムである。主な特徴は以下の通りである。
（１）選択した色は登録することが可能で、次に立ち上げたときも利用することができる。（ＨＴＭＬ５のlocalStorageの機能を用いている。）
（２）選択した色のＨＴＭＬとＣＳＳのコードを表示することができる。
（３）選択した色を色覚特性別に変換して示すことができる。
（４）選択した色が色覚の特性に依存せず判別できるかを、輝度コントラスト比（輝度比と称する場合がある。）を近似して変換したグレースケール画像（輝度比近似グレースケール）によって確認することができる。なお、輝度比近似グレースケールについては、後記する。 The color creation support tool 30 is a program of a tool that supports the selection and creation of colors of Web contents developed by CSS3 (Cascading Style Sheets 3). The main features are as follows.
(1) The selected color can be registered and can be used at the next startup. (The localStorage function of HTML5 is used.)
(2) The HTML and CSS codes of the selected color can be displayed.
(3) The selected color can be converted and shown by color vision characteristics.
(4) Confirm whether the selected color can be discriminated without depending on the color vision characteristics by a gray scale image (luminance ratio approximate gray scale) converted by approximating the luminance contrast ratio (sometimes referred to as luminance ratio). can do. The luminance ratio approximate gray scale will be described later.

また、色作成支援ツール３０は、カラーパレットの単色のタブ４５Ｍ（図１２（ａ）参照）、グラデーションのタブ４５Ｇ（図１２（ｂ）参照）を有し、色合い３ａのスライダ、色相表示部２の選択枠２ａを使って色を簡単に選択、作成することができる。詳細については、図１２において後記する。 The color creation support tool 30 has a single color tab 45M (see FIG. 12A) and a gradation tab 45G (see FIG. 12B) of the color palette. The selection frame 2a can be used to easily select and create a color. Details will be described later in FIG.

色作成支援ツール３０は、ＣＳＳ３の普及と、それによるＷｅｂコンテンツの質の向上を支援すること、色覚障がいなどの色覚の特性に依存せず、明確に判別可能なUI要素の色を効率的に作成するための方法「輝度比近似グレースケール」に対する意見を収集することを目的としている。ＣＳＳ３によって、Ｗｅｂコンテンツの視覚的表現力は格段に向上するが、視覚的表現の制約が小さいことにより、色覚特性に依存せずに判別できる色であるかの確認が難しくなる。このため、色作成支援ツール３０の利用はデザイナにとって有効なツールとなる。 The color creation support tool 30 supports the spread of CSS3 and the improvement of the quality of Web content, and efficiently determines the colors of UI elements that can be clearly identified without depending on the characteristics of color vision such as color blindness. The purpose is to collect opinions on the method “Gray ratio approximate gray scale”. Although the visual expressive power of Web contents is remarkably improved by CSS3, it is difficult to confirm whether the color can be discriminated without depending on the color vision characteristic because the visual expressive restriction is small. For this reason, the use of the color creation support tool 30 is an effective tool for the designer.

図２は、色作成支援ツールが起動されたときの画面構成の例を示す図である。図２に示す画面３０Ｗは、クライアント２０からＷｅｂブラウザで、Ｗｅｂサーバ１０の所定のＵＲＬ（Uniform Resource Locator）にアクセスし、「起動」ボタン（図示せず）を押下すると、表示される。 FIG. 2 is a diagram illustrating an example of a screen configuration when the color creation support tool is activated. A screen 30 </ b> W shown in FIG. 2 is displayed when a predetermined URL (Uniform Resource Locator) of the Web server 10 is accessed from the client 20 by a Web browser and a “start” button (not shown) is pressed.

図２に示す起動画面は、ＵＩ要素の種類であるパーツ一覧３１、選択された種類のリストを示すＵＩ要素一覧表３２（図２においてはＵＩ要素の種類としてボタンが選択された場合、ボタン一覧として表示される）、ＵＩ要素のプレビュー欄３３、色覚シミュレーター欄３４、ＵＩ要素の新規作成ボタン３５、ＵＩ要素の詳細情報／編集ボタン３６、ＵＩ要素の削除ボタン３７、ＵＩ要素のコードを表示するためのコード表示ボタン３８などから構成されている。なお、ＵＩ要素の詳細情報／編集ボタン３６が押下されると、図５に遷移する。図５の詳細については後記する。 The startup screen shown in FIG. 2 includes a parts list 31 that is a type of UI element, and a UI element list 32 that shows a list of the selected type (in FIG. 2, if a button is selected as the type of UI element, the button list) UI element preview field 33, color vision simulator field 34, UI element new creation button 35, UI element detailed information / edit button 36, UI element deletion button 37, and UI element code are displayed. For example, a code display button 38. When the UI element detailed information / edit button 36 is pressed, the process proceeds to FIG. Details of FIG. 5 will be described later.

パーツ一覧３１のＵＩ要素の種類には、ボタン、矩形、テキスト、リンクテキスト、区切り線、テキストボックス、チェックボックス、ラジオボタン、プルダウン、リストボックス、テーブルなどがある。デザイナが、パーツ一覧３１からデザインしたいＵＩ要素の種類を選択すると、色作成支援ツール３０は、選択された種類のＵＩ要素のリストをリスト表３２１として表示する。 The types of UI elements in the parts list 31 include buttons, rectangles, text, link text, separator lines, text boxes, check boxes, radio buttons, pull-downs, list boxes, tables, and the like. When the designer selects the type of UI element to be designed from the parts list 31, the color creation support tool 30 displays a list of UI elements of the selected type as a list table 321.

リスト表３２１は、チェックボックス、登録されている名前、文字と背景の輝度比、更新日、種類を含んで構成される。図２のリスト表３２１には、既に登録されているＵＩ要素のリストが表示されている。例えば、名前が「黒背景のボタン」の場合、文字と背景の輝度比は「１２．１」、更新日は「２０１２年３月１２日」、種類が「ボタン」であることがわかる。また、名前が「緑（グラデーション有）のボタン」の場合、文字と背景の輝度比は「判定不能」、更新日は「２０１２年３月１２日」、種類が「ボタン」であることがわかる。なお、輝度比（輝度コントランス比）の算出方法は後記する。 The list table 321 includes a check box, a registered name, a luminance ratio between characters and background, an update date, and a type. The list table 321 in FIG. 2 displays a list of UI elements that have already been registered. For example, when the name is “black background button”, it can be seen that the luminance ratio of characters and background is “12.1”, the update date is “March 12, 2012”, and the type is “button”. In addition, when the name is “green (with gradation) button”, it can be seen that the luminance ratio between the character and the background is “not determined”, the update date is “March 12, 2012”, and the type is “button”. . A method for calculating the luminance ratio (luminance contrast ratio) will be described later.

ＵＩ要素のプレビュー欄３３は、文字と背景の輝度比の表示欄３３１と、ＵＩ要素のプレビュー表示欄３３２から構成される。また、色覚シミュレーター欄３４は、輝度比近似グレースケール選択欄３４１と、ＵＩ要素のプレビュー表示欄３４２から構成される。 The UI element preview column 33 is composed of a character / background luminance ratio display column 331 and a UI element preview display column 332. The color vision simulator column 34 includes a luminance ratio approximate gray scale selection column 341 and a UI element preview display column 342.

図１１は、ＵＩ要素である具体例としてボタンの構成を示す図である。ＵＩ要素であるボタンは、ボタン本体１００（部品１）と、背景２００（部品２）との部品によって構成されている。また、部品１のボタン本体１００は、ボタン本体１００の装飾を表すボタンの装飾１０４、ボタン本体１００の輪郭を表わすボタンの枠線１０３と、このボタンの枠線１０３の内部エリアとなるボタンの背景１０２と、テキストを形成する文字１０１とで構成され、これら文字１０１、ボタンの背景１０２、ボタンの枠線１０３、およびボタンの装飾１０４が部品１を構成する要素となる。 FIG. 11 is a diagram illustrating a configuration of a button as a specific example of a UI element. The button which is a UI element is composed of parts of a button body 100 (part 1) and a background 200 (part 2). The button body 100 of the part 1 includes a button decoration 104 representing the decoration of the button body 100, a button frame 103 representing the outline of the button body 100, and a button background serving as an internal area of the button frame 103. 102 and the character 101 forming the text. The character 101, the button background 102, the button frame 103, and the button decoration 104 are components constituting the component 1.

なお、部品１、部品２とを分けて説明しているが、部品１に部品２を含めて、部品１を構成する要素を、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および背景２００としてもよい。本実施形態では、部品１を構成する要素を、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および背景２００として説明する。 The parts 1 and 2 are described separately, but the elements constituting the part 1 including the part 2 in the part 1 are the character 101, the button background 102, the button frame 103, the button The decoration 104 and the background 200 may be used. In the present embodiment, the elements constituting the component 1 are described as a character 101, a button background 102, a button frame 103, a button decoration 104, and a background 200.

ところで、部品や部品の要素が明確に判別できるためには、かかる部品や要素とこれに接した（以下、隣接したという）他の部品または他の要素との輝度コントラスト比（濃さの違い）が充分大きいことが必要である。 By the way, in order to be able to clearly distinguish a part or an element of a part, the luminance contrast ratio (difference in darkness) between the part or element and another part or other element that is in contact with the part or element (hereinafter referred to as adjacent) Must be sufficiently large.

ここで、Ｗ３Ｃ（World Wide Web Consortium）勧告のＷＣＡＧ（Web Content Accesibility Guidelines）によると、輝度コントラスト比は、
（Ｌ１＋０．０５）／（Ｌ２＋０．０５） …式（１）
但し、Ｌ１：隣接した部品または要素のうちの明るい方の色の相対輝度Ｌ
Ｌ２：隣接した部品または要素のうちの暗い方の色の相対輝度Ｌ
で表わされる。 Here, according to W3C (World Wide Web Consortium) recommendation WCAG (Web Content Accesibility Guidelines), the luminance contrast ratio is
(L1 + 0.05) / (L2 + 0.05) Formula (1)
However, L1: Relative luminance L of the lighter color of adjacent parts or elements
L2: Relative luminance L of the darker color of adjacent parts or elements
It is represented by

色の相対輝度Ｌは、ＩＥＣ（国際電気標準会議）規格のｓＲＧＢ色空間では、
Ｌ＝０．２１２６＊Ｒ＋０．７１５２＊Ｇ＋０．０７２２＊Ｂ …式（２）
で表わされる。但し、かかる色の相対輝度におけるＲ（赤）成分、Ｇ（緑）成分、Ｂ（青）成分は、ｓＲＧＢ色空間でのＲ成分をＲｓＲＧＢ、同じくＧ成分をＧｓＲＧＢ、同じくＢ成分をＢｓＲＧＢとすると、
ＲｓＲＧＢ≦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は夫々、８ビットで表わされる値である。 The relative luminance L of the color is sRGB color space of IEC (International Electrotechnical Commission) standard,
L = 0.2126 * R + 0.7152 * G + 0.0722 * B Formula (2)
It is represented by However, the R (red) component, G (green) component, and B (blue) component in the relative luminance of the color are RsRGB, G component is GsRGB, and B component is BsRGB in the sRGB color space. ,
When RsRGB ≦ 0.03928, R = RsRGB / 12.92
When RsRGB> 0.03928, R = ((RsRGB + 0.055) /1.055) ^ 2.4
When GsRGB ≦ 0.03928, G = GsRGB / 12.92
When GsRGB> 0.03928, G = ((GsRGB + 0.055) /1.055) ^ 2.4
When BsRGB ≦ 0.03928, B = BsRGB / 12.92
When BsRGB> 0.03928, B = ((BsRGB + 0.055) /1.055) ^ 2.4
... Formula (3)
However, “^” is represented by an exponent operator, and RsRGB, GsRGB, and BsRGB are RsRGB = R8bit / 255, respectively.
GsRGB = G8bit / 255
BsRGB = B8bit / 255
... Formula (4)
It is. Note that R8bit, G8bit, and B8bit are values represented by 8 bits, respectively.

以上のように、輝度コントラスト比は前記の式（１）で表わされるが、
（１）デザイナは、テキストのレンダリング（数値データからの画像化：例えば、フォントのスムージングやアンチエイリアス）に関するユーザの設定を制御できないため、テキストの輝度コントラスト比は、アンチエイリアス（表示される線などに現われるギザギザをなくす処理）をオフした状態で評価される。
（２）文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。但し、文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、かさ（暈：ハローや後光）のようになって、文字の細かい字画を埋めていれば、背景色として考慮されることになる。
（３）ＷＣＡＧへの適用は、典型的な表現において隣接すると製作者が想定して、コンテンツで指定した色の組み合わせに対して評価されるべきである。製作者は、ユーザエージェントによる色の変更などのように、通常とは異なる表現を考慮する必要はない。但し、それが製作者のソースコードによって起こる場合は、除く。 As described above, the luminance contrast ratio is expressed by the above equation (1).
(1) The designer cannot control user settings for text rendering (imaging from numeric data: for example, font smoothing or anti-aliasing), so the luminance contrast ratio of the text appears in anti-aliasing (lines displayed, etc.) Evaluation is performed with the jaggedness elimination process turned off.
(2) When there is a border around the character, the border may increase the contrast and is used for calculating the contrast between the character and the background color. However, a thin border around the character is treated as a character. If the thick border around the character looks like a shade (暈: halo or afterglow) and fills a fine stroke of the character, it will be considered as the background color.
(3) Application to WCAG should be evaluated for the combination of colors specified in the content, assuming the producer is adjacent in typical representation. Producers do not need to consider unusual expressions, such as color changes by user agents. However, this is not the case if it is caused by the creator's source code.

なお、ディザリング（表示可能な色を組み合わせて、その中間の色を表現すること）が発生する場合には、元の色の値が用いられる。発生源でディザリングしている色については、用いられる色の平均値（Ｒの平均値、Ｇの平均値、Ｂの平均値）を用いるべきである。 When dithering (representing an intermediate color by combining displayable colors) occurs, the value of the original color is used. For colors that are dithered at the source, the average color used (R average, G average, B average) should be used.

以下に説明する実施形態は、以上の輝度コントラスト比を基に、コンテンツの部品やその要素の色を規制し、デザイナが、いずれの部品や要素も色覚の特性に依存せず明確に判別可能な色とすることを効率的に行えるようにするものである。 The embodiment described below regulates the color of content components and their elements based on the above luminance contrast ratio, and the designer can clearly discriminate any component or element without depending on the characteristics of color vision. This makes it possible to efficiently make colors.

ここで、文字とその背景（この文字が重なって表示される背景）とでは、その輝度コントラスト比が４．５：１以上となる色が推奨される。また、文字以外の要素とその背景またはその文字以外の要素に隣り合う要素（例えば、ボタンの背景色とこのボタンの枠線色、ボタンの枠線色とこのボタンが置かれている背景の色など）では、その輝度コントラスト比が３：１以上（本実施形態の推奨）となる色を選択することが推奨される。 Here, for a character and its background (a background in which these characters overlap), a color whose luminance contrast ratio is 4.5: 1 or more is recommended. Also, an element other than a character and its background or an element adjacent to an element other than that character (for example, the background color of a button and the border color of this button, the border color of a button and the background color of this button) Etc.), it is recommended to select a color whose luminance contrast ratio is 3: 1 or more (recommended in this embodiment).

なお、以下では、前記の推奨される輝度コントラスト比を、４．５：１、３：１として、実施形態の説明をするが、これに限るものでなく、デザイナにとって各「要素」を視認し易くする他の輝度コントラスト比を定めることができる。但し、文字とこれに接する「要素」との間で規定される輝度コントラスト比は、文字以外の「要素」間での規定のコントラスト比よりも、その比率が大きいものとする。 In the following, the embodiment will be described assuming that the recommended luminance contrast ratio is 4.5: 1, 3: 1. However, the present invention is not limited to this, and each “element” is visually recognized by the designer. Other luminance contrast ratios can be defined to facilitate. However, it is assumed that the luminance contrast ratio defined between the character and the “element” adjacent to the character is larger than the defined contrast ratio between the “element” other than the character.

また、この実施形態では、接し合う要素（図１１では、文字１０１、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４）は全て個別にカスタマイズを行なうものである。グラデーション（色や濃淡の連続的な変化）の場合には、隣接する要素との輝度コントラスト比（前記の４．５：１や３：１）が最も小さい色で判別する必要がある。 In this embodiment, all the elements that are in contact with each other (in FIG. 11, the character 101, the button background 102, the button frame 103, and the button decoration 104) are individually customized. In the case of gradation (continuous change in color and shading), it is necessary to discriminate with the color having the smallest luminance contrast ratio (4.5: 1 or 3: 1 as described above) with adjacent elements.

図３は、デザインするＵＩ要素が選択されたときの画面構成の例を示す図である。図３において、デザイナがマウスなどで、リスト表３２１のチェックボックスにチェックを付すと、当該チェックボックスの対象とするリスト（例えば、リスト表３２１中の「緑（グラデーション有）のボタン」の行の色が変更される（図では、行を黒色で表示）。 FIG. 3 is a diagram illustrating an example of a screen configuration when a UI element to be designed is selected. In FIG. 3, when the designer uses a mouse or the like to check a check box of the list table 321, a list (for example, a “green (gradient) button” row in the list table 321 is displayed. The color is changed (in the figure, the row is displayed in black).

ＵＩ要素のプレビュー欄３３のＵＩ要素のプレビュー表示欄３３２には、選択された「緑（グラデーション有）のボタン」に係るボタンが表示されている。文字と背景の輝度比の表示欄３３１には、選択された「緑（グラデーション有）のボタン」の算出された輝度比が表示される。文字と背景の輝度比の表示欄３３１には、「判定不能」と表示されており、その右側に表示されている「？」マーク（ヘルプマーク）をマウスなどで押下すると、文字と背景の輝度比の表示欄３３１の内容についてその理由が子画面（図４参照）で表示される。 In the UI element preview display field 332 of the UI element preview field 33, a button relating to the selected “green (with gradation) button” is displayed. In the character / background luminance ratio display field 331, the calculated luminance ratio of the selected “green (with gradation) button” is displayed. In the character / background luminance ratio display field 331, “determination impossible” is displayed. When the “?” Mark (help mark) displayed on the right side of the character / background is pressed with a mouse or the like, the luminance of the character and background is displayed. The reason for the contents of the ratio display field 331 is displayed on the sub-screen (see FIG. 4).

また、色覚シミュレーター欄３４の輝度比近似グレースケール選択欄３４１において、輝度比近似グレースケールが選択されている。ＵＩ要素のプレビュー表示欄３４２には、本実施形態の特徴である輝度比近似グレースケールで変換処理したボタンが表示されている。 Further, the luminance ratio approximate gray scale is selected in the luminance ratio approximate gray scale selection column 341 of the color vision simulator column 34. In the UI element preview display field 342, a button converted by the luminance ratio approximate gray scale, which is a feature of the present embodiment, is displayed.

輝度比近似グレースケールとは、元の画像の各ピクセルの相対輝度と、グレースケール（色相の情報を含まない、白から黒の明暗のみで表現された色のこと）に変換された後の各ピクセルの相対輝度とを、できる限り同じになるように変換することを意味する。なお、画面（画像）は、最小単位の粒子が集まることで表現されており、その最小単位の粒子のことをピクセルや、ドットなどと呼ぶ。また、ピクセルは、単一の色を有している。 The luminance ratio approximate grayscale is the relative luminance of each pixel of the original image and each after being converted to grayscale (a color expressed only in light and dark from white to black that does not include hue information) This means that the relative luminance of the pixels is converted as much as possible. The screen (image) is expressed by collecting particles of the minimum unit, and the particles of the minimum unit are referred to as pixels or dots. A pixel has a single color.

ここで、市販されている画像処理ソフトウェアにおいても、グレースケールに変換することができるが、変換後の輝度を計算してみると、元の画像の輝度と違うことがある。例えば、テレビ放送のＮＴＳＣ（National Television System Committee）で使用されているＹＩＱモデルの輝度成分Ｌ_ＹＩＱの算出式は、
Ｌ_ＹＩＱ＝０．２９９＊Ｒ＋０．５８７＊Ｇ＋０．１１４＊Ｂ …式（５）
となり、前記式（２）と変換式が異なるためであり、そのままでは適用できない。 Here, commercially available image processing software can also convert to gray scale, but when the luminance after conversion is calculated, it may be different from the luminance of the original image. For example, the calculation formula of the luminance component L _YIQ of the YIQ model used in NTSC (National Television System Committee) of television broadcasting is:
L _YIQ = 0.299 * R + 0.587 * G + 0.114 * B (5)
This is because the equation (2) is different from the conversion equation, and cannot be applied as it is.

本実施形態の輝度比近似グレースケールは、具体的には、前記式（２）により輝度（Ｗ３Ｃの相対輝度に相当）を計算する。しかしながら、
・式（３）の条件があること、すなわち、ｓＲＧＢ値が小さい（０．０３９２８以下）のときは、輝度の変化が緩やかである。
・輝度（０≦輝度≦１）からＲＧＢ値（０≦ＲＧＢ値≦２５５）に変換する際に四捨五入されるなどの計算過程を有する結果、異なる輝度が同じ色で表される場合があるため（ある一つのグレーの濃さが、一意の輝度を表しているとは限らないため）、輝度比近似グレースケールと称している。 Specifically, the luminance ratio approximate gray scale of the present embodiment calculates the luminance (corresponding to the relative luminance of W3C) by the equation (2). However,
-When the condition of Expression (3) is present, that is, when the sRGB value is small (0.03928 or less), the change in luminance is gradual.
As a result of having a calculation process such as rounding off when converting from luminance (0 ≦ luminance ≦ 1) to RGB value (0 ≦ RGB value ≦ 255), different luminance may be represented by the same color ( This is called a luminance ratio approximate gray scale because a single gray density does not always represent a unique luminance.

図１５は、Ｒ８bit，Ｇ８bit，Ｂ８bitから輝度値に変換する際の具体例を示す図である。図１５において、横軸に前記式（４）に示すＲ８bit，Ｇ８bit，Ｂ８bitを示し、縦軸にＬ＊２５５（＊は乗算）の値を示す。図１５の拡大図を参照すると、例えば、Ｒ８bit，Ｇ８bit，Ｂ８bitが“０”から“６”の、＃００００００（輝度値０）〜＃０６０６０６（輝度値０．００１８）は、同じ＃００００００（輝度値０）に変換される。同様に、Ｒ８bit，Ｇ８bit，Ｂ８bitが“７”から“１７”の、＃０７０７０７（輝度値０．００２１）〜＃１１１１１１（輝度値００５６）は、同じ＃０７０７０７（輝度値０．００２１）に変換される。なお、＃０６０６０６の表記方法は後記する。 FIG. 15 is a diagram showing a specific example when converting from R8bit, G8bit, and B8bit to a luminance value. In FIG. 15, the horizontal axis represents R8bit, G8bit, and B8bit shown in the above equation (4), and the vertical axis represents the value of L * 255 (* is multiplication). Referring to the enlarged view of FIG. 15, for example, # 000000 (luminance value 0) to # 060606 (luminance value 0.0018) in which R8bit, G8bit, and B8bit are “0” to “6” are the same # 000000 (luminance). Converted to value 0). Similarly, # 070707 (luminance value 0.0021) to # 111111 (luminance value 0056) in which R8bit, G8bit, and B8bit are “7” to “17” are converted to the same # 070707 (luminance value 0.0021). The The notation method of # 060606 will be described later.

図４は、文字と背景の輝度比の表示欄の「？」マーク（ヘルプマーク）が押下されたときのメッセージボックスの例を示す図である。図４には、文字と背景の輝度比の出力内容についてのメッセージが表示される。例えば下記の内容となる。
『本ツールは、Ｗ３Ｃ勧告のＷＣＡＧ２．０の指標に基づき、文字と背景の輝度比を計算して示しています。判定不能と表示される場合は、文字と背景の輝度比の機械的判断が技術的に困難な場合ですが、色覚シミュレーターの「輝度比近似グレースケール」で表示して識別可能であれば、少なくとも本ツールを表示しているブラウザでは、色覚特性に依存せず識別可能です。
なお、文字と背景の輝度比の機械的な判断が難しい理由は、以下の一方または両方が当てはまるケースがあります。
１．文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。
２．ブラウザによって表示する色が異なる可能性のあるコードを用いているため。
下図は、同じ意味を持つコードを２つの異なるＷｅｂブラウザで表示した結果です。ＣＳＳ３によって表現できるグラデーション、光彩、影などは、同じ箇所（ピクセル）で見たときに、ブラウザによって表示される色が異なります（２０１２年７月時点）。』 FIG. 4 is a diagram showing an example of a message box when the “?” Mark (help mark) in the display column of the luminance ratio of characters and background is pressed. In FIG. 4, a message about the output content of the luminance ratio between the character and the background is displayed. For example, the content is as follows.
“This tool calculates and shows the brightness ratio between text and background based on the W3C recommendation WCAG 2.0 index. If it is displayed that it is impossible to judge, it is technically difficult to mechanically determine the brightness ratio between the text and the background, but if it can be displayed and identified with the `` luminance ratio approximate gray scale '' of the color vision simulator, at least The browser displaying this tool can be identified without depending on the color vision characteristics.
Note that one or both of the following may apply to the reason why it is difficult to mechanically determine the brightness ratio between text and background.
1. This is because it is difficult to specify the portion with the smallest luminance ratio among the portions adjacent to the character.
2. Because it uses code that may display different colors depending on the browser.
The figure below shows the result of displaying codes with the same meaning in two different web browsers. The gradation, glow, shadow, etc. that can be expressed by CSS3 differ in the color displayed by the browser when viewed at the same location (pixel) (as of July 2012). ]

図５は、通常時のボタンの編集画面の例を示す図である。図２において、ＵＩ要素の詳細情報／編集ボタン３６が押下されたときに表示される編集画面の例である。編集画面には、ＵＩ要素のプレビュー欄３３、色覚シミュレーター欄３４、編集欄４０、新規にＵＩ要素を登録するための名前を付けて保存ボタン４６、すでに登録済みのＵＩ要素について上書きするための上書き保存ボタン４７、ＵＩ要素のコードを表示するコードを表示ボタン４８などから構成されている。編集欄４０は、状態タブ４１（例えば、状態タブ４１ｎ，４１ｍ，４１ｃ，４１ｆ，４１ｘ，４１ｖ）、マーク４２（例えば、マーク４２ａ）の意味欄４２ｍ、ＵＩ要素の形変更欄４３、ＵＩ要素の構成欄４４、ＵＩ要素の構成欄４４で選択された構成要素のカラーパレット４５（例えば、カラーパレット４５ａ，４５ｂ，４５ｃ）を表示するカラーパレット表示エリア４５Ａから構成されている。なお、カラーパレットを総称するときには、カラーパレット４５という。また、マークを総称するときには、マーク４２という。 FIG. 5 is a diagram illustrating an example of a normal button editing screen. FIG. 2 shows an example of an edit screen displayed when the detailed information / edit button 36 of the UI element is pressed. The edit screen includes a UI element preview field 33, a color vision simulator field 34, an edit field 40, a save button 46 for registering a new UI element, and an overwrite for overwriting an already registered UI element. A save button 47, a code for displaying a UI element code, and a display button 48 are included. The edit column 40 includes a status tab 41 (for example, status tabs 41n, 41m, 41c, 41f, 41x, 41v), a meaning column 42m for a mark 42 (for example, mark 42a), a UI element shape change column 43, and a UI element. The configuration column 44 includes a color palette display area 45A for displaying a color palette 45 (for example, color palettes 45a, 45b, 45c) of the component selected in the UI component configuration column 44. The color palette is collectively referred to as a color palette 45. The mark is collectively referred to as a mark 42.

状態タブ４１には、図３で選択したＵＩ要素について、どの状態をデザインするのかを切り替えるための複数のタブがある。具体的には、通常時の状態タブ４１ｎ、マウスオーバー時の状態タブ４１ｍ、マウスなどでボタンを押して放す操作のクリック時の状態タブ４１ｃ、フォーカス時の状態タブ４１ｆ、非活性時の状態タブ４１ｘ、訪問済の状態タブ４１ｖがある。マウスオーバーとは、マウスのカーソルを画像やリンク、ファイルなどの上に移動した時に表示され、実行される処理のことをいい、カーソルを合わせた画像やファイルがリンクであることを知らせる視覚効果のことである。また、フォーカスとは、コンピュータの操作画面で、ウインドウや入力要素などが選択され、入力や操作を受け付けられる状態のことをいう。非活性時とは、例えば、押せない状態のボタンの色を作成する場合に選択される。訪問済とは、一度訪れたことのあるリンクの状態をいう。 The state tab 41 includes a plurality of tabs for switching which state is designed for the UI element selected in FIG. Specifically, the normal state tab 41n, the mouse over state tab 41m, the click state button 41c of the operation of pressing and releasing the button with the mouse, the focus state tab 41f, the inactive state tab 41x There is a visited status tab 41v. Mouse over is a process that is displayed and executed when the mouse cursor is moved over an image, link, or file, and is a visual effect that informs that the image or file that the cursor is over is a link. That is. The focus means a state in which a window, an input element, or the like is selected on the operation screen of the computer and an input or operation can be accepted. The inactive state is selected, for example, when creating a button color that cannot be pressed. Visited means the state of a link that has been visited once.

ＵＩ要素の形変更欄４３は、角丸のＵＩ要素を作成する場合などにピクセル値を設定する欄であり、高さ、幅、角丸の半径のピクセル値が入力される。マウスなどで矢印ボタンを押下することにより設定できるようになっている。 The UI element shape change column 43 is a column for setting pixel values when creating a rounded UI element, and the pixel values of height, width, and rounded corner radius are input. It can be set by pressing the arrow button with a mouse.

ＵＩ要素の構成欄４４は、ボタンのＵＩ要素で説明するが、背景、ボタンの背景、ボタンの枠線、ボタンの装飾（影、光彩を含む）、文字、文字の装飾などの構成要素が選択できる。背景、ボタンの背景、ボタンの枠線、ボタンの装飾、および文字は、図１１に示した、背景２００、ボタンの背景１０２、ボタンの枠線１０３、ボタンの装飾１０４、および文字１０１にそれぞれ対応する。 The UI element configuration field 44 is described with the UI element of the button, but the configuration elements such as background, button background, button border, button decoration (including shadow and glow), character, character decoration, etc. are selected. it can. The background, button background, button border, button decoration, and character correspond to the background 200, button background 102, button border 103, button decoration 104, and character 101 shown in FIG. To do.

カラーパレット表示エリア４５Ａは、ＵＩ要素の構成欄４４で選択された構成要素のカラーパレット４５を表示するエリアである。例えば、ＵＩ要素の構成欄４４において、背景、ボタンの背景、文字の構成要素のチェックボックスにチェックが入っている場合、カラーパレット表示エリア４５Ａには、各構成要素に対応するカラーパレット４５ａ，４５ｂ，４５ｃが表示される。カラーパレット４５ａは、構成要素「背景」の背景色を設定するための設定画面であり、カラーパレット４５ｂは、構成要素「ボタンの背景」の背景色を設定するための設定画面であり、カラーパレット４５ｃは、構成要素「文字」の文字色を設定するための設定画面である。 The color palette display area 45 </ b> A is an area for displaying the color palette 45 of the component selected in the UI element configuration field 44. For example, in the UI element configuration field 44, when the background, button background, and text component check boxes are checked, the color palette display area 45A has color palettes 45a and 45b corresponding to the respective components. 45c are displayed. The color palette 45a is a setting screen for setting the background color of the component “background”, and the color palette 45b is a setting screen for setting the background color of the component “button background”. 45c is a setting screen for setting the character color of the component “character”.

カラーパレット表示エリア４５Ａには、例えば、ＵＩ要素がボタンの場合、ボタンを構成する「背景」、「ボタンの背景」、および「文字」の順に左側からカラーパレット４５ａ，４５ｂ，４５ｃが表示されるのが好ましい。これにより、各構成要素の関係を明確にすることができる。なお、カラーパレット表示エリア４５Ａには、ＵＩ要素を構成する「文字」、「ボタンの背景」、および「背景」の順に左側からカラーパレット４５ｃ，４５ｂ，４５ａを表示してもよい。 In the color palette display area 45A, for example, when the UI element is a button, the color palettes 45a, 45b, and 45c are displayed from the left in the order of “background”, “button background”, and “character” constituting the button. Is preferred. Thereby, the relationship of each component can be clarified. In the color palette display area 45A, the color palettes 45c, 45b, and 45a may be displayed from the left side in the order of “character”, “button background”, and “background” constituting the UI element.

カラーパレット４５（例えば、カラーパレット４５ａ，４５ｂ，４５ｃ）は、色を決めるための単色のタブ４５Ｍとグラデーションを決めるためのグラデーションのタブ４５Ｇとからなり、マウスなどの操作によってこれらのいずれかが選択された状態にある。図５に示す例では、カラーパレット４５ａに示す「背景」は、「単色」が選択されている。カラーパレット４５ｂに示す「ボタンの背景」は、「グラデーション」が選択されている。カラーパレット４５ｃに示す「文字」は、「単色」が選択されている。 The color palette 45 (for example, the color palettes 45a, 45b, and 45c) includes a single color tab 45M for determining colors and a gradation tab 45G for determining gradations, and one of these is selected by an operation of a mouse or the like. It is in the state that was done. In the example shown in FIG. 5, “monochrome” is selected as the “background” shown in the color palette 45a. “Gradation” is selected as the “button background” shown in the color palette 45b. “Monochrome” is selected as the “character” shown in the color palette 45c.

図１２は、図５における単色のタブとグラデーションのタブとの一具体例を示す図である。図１２（ａ）は、単色のタブ４５Ｍの例であり、図１２（ｂ）は、グラデーションのタブ４５Ｇの例である。図１２（ａ）に示す単色のタブ４５Ｍは、設定色表示部１、色相表示部２、表示色調整部３を有している。表示色調整部３は、色合い３ａ、鮮やかさ３ｂ、明るさ３ｃ、不透明度３ｄのスライダを有し、色を調整することができる。マウスなどで色相表示部２の選択枠２ａを移動することにより、その詳細な色マスが色マス表示部２ｃに５×５マス（横５マス、縦５マス）で表示される。色マス表示部２ｃには、選択枠２ａの中心位置が中心位置色マス２ｄとして表示される。なお、図１２（ａ）の場合には、選択枠２ａの中心が左端にあるため、色マス表示部２ｃには、３×３マスだけ表示されている。 FIG. 12 is a diagram illustrating a specific example of the monochrome tab and the gradation tab in FIG. FIG. 12A shows an example of a single color tab 45M, and FIG. 12B shows an example of a gradation tab 45G. The monochromatic tab 45M shown in FIG. 12A has a set color display unit 1, a hue display unit 2, and a display color adjustment unit 3. The display color adjustment unit 3 has sliders of hue 3a, vividness 3b, brightness 3c, and opacity 3d, and can adjust the color. By moving the selection frame 2a of the hue display unit 2 with a mouse or the like, the detailed color cell is displayed in 5 × 5 cells (5 horizontal cells and 5 vertical cells) on the color cell display unit 2c. In the color cell display portion 2c, the center position of the selection frame 2a is displayed as the center position color cell 2d. In the case of FIG. 12A, since the center of the selection frame 2a is at the left end, only 3 × 3 squares are displayed on the color square display portion 2c.

図１２（ａ）の例を具体的に説明すると、設定色表示部１から「＃００００００」が選択されていることがわかる。ＨＴＭＬの色指定は、色の三原色（厳密には「光の三原色」）である、ＲＧＢ（赤＝Ｒｅｄ、緑＝Ｇｒｅｅｎ、青＝Ｂｌｕｅ）の混ぜ合わせで指定される。この方法の場合には、まず先頭に「＃」（シャープ記号）を付け、赤、緑、青の順に２桁ずつの英数字を割り当て、それぞれの色を、「００〜ｆｆ」（１桁の数字の順番は、０，１，２，３，４，５，６，７，８，９，ａ，ｂ，ｃ，ｄ，ｅ，ｆ）の範囲で記述される。例えば、「＃ｆｆ００００」は、赤＝ｆｆ、緑＝００、青＝００で、赤になる。さらに、「＃ｆｆｆｆ００」は、赤＝ｆｆ、緑＝ｆｆ、青＝００で、黄になる。 When the example of FIG. 12A is specifically described, it can be seen that “# 000000” is selected from the setting color display unit 1. The color specification of HTML is specified by mixing RGB (red = Red, green = Green, blue = Blue), which are the three primary colors (strictly, “the three primary colors of light”). In the case of this method, first, “#” (sharp sign) is added at the head, and two alphanumeric characters are assigned in order of red, green, and blue, and each color is assigned “00 to ff” (one digit). The order of the numbers is described in the range of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). For example, “# ff0000” is red with red = ff, green = 00, and blue = 00. Furthermore, “# ffff00” is red = ff, green = ff, blue = 00, and yellow.

なお、図１２（ａ）において、設定色表示部１の左端の表示が「□」の白で表示されているが、色作成支援ツール３０の本来の画面の背景色は黒であり、符号などの記載を明瞭に表示するため、ネガポジ反転して図示しているためである。同様に、図２から図１０の図面も同様にネガポジ反転して図示している。 In FIG. 12A, the display at the left end of the set color display unit 1 is displayed in white with “□”. However, the background color of the original screen of the color creation support tool 30 is black, and the reference numeral, etc. This is because the negative and positive images are shown in a reversed manner in order to clearly display the description. Similarly, the drawings of FIG. 2 to FIG.

図１４は、色作成支援ツールの編集画面の例を示す図である。図１４に示す編集画面は、現在運用サービス中の本来の画面を示す。図５は、図１４の編集画面をネガポジで反転して表示している。デザイナは、図１４の編集画面を利用して、Ｗｅｂブラウザの表示方法に依存せずＵＩ要素の色の作成をすることができる。 FIG. 14 is a diagram illustrating an example of an editing screen of the color creation support tool. The editing screen shown in FIG. 14 shows the original screen that is currently in operation service. FIG. 5 shows the editing screen of FIG. The designer can create the color of the UI element by using the editing screen of FIG. 14 without depending on the display method of the Web browser.

図１２（ｂ）に示すグラデーションのタブ４５Ｇには、設定色表示部１、グラデーション角度設定部５、グラデーション分岐点設定部６、グラデーション表示部７、色相表示部２、表示色調整部３を有している。表示色調整部３には、図１２（ａ）で示したものと同様に、色合い３ａ、鮮やかさ３ｂ、明るさ３ｃ、不透明度３ｄが、スライダを調整することによって調整できる。マウスなどで選択枠２ａを色相表示部２内で移動することにより、その詳細な色マスが色マス表示部２ｃに表示される。色マス表示部２ｃには、選択枠２ａの中心位置が中心位置色マス２ｄとして表示される。 The gradation tab 45G shown in FIG. 12B has a setting color display section 1, gradation angle setting section 5, gradation branch point setting section 6, gradation display section 7, hue display section 2, and display color adjustment section 3. doing. In the display color adjusting unit 3, as in the case shown in FIG. 12A, the hue 3a, vividness 3b, brightness 3c, and opacity 3d can be adjusted by adjusting the slider. By moving the selection frame 2a in the hue display unit 2 with a mouse or the like, the detailed color cell is displayed on the color cell display unit 2c. In the color cell display portion 2c, the center position of the selection frame 2a is displayed as the center position color cell 2d.

グラデーション表示部７について説明すると、横長のグラデーションバー７ａの左側端部に左端側指示体７Ｌが、右側端部に右端側指示体７Ｒが夫々設定されており、必要に応じてこれら左端側指示体７Ｌ、右端側指示体７Ｒ間に１以上の中間部指示体７Ｉが設定される。 The gradation display unit 7 will be described. A left end indicator 7L is set at the left end of the horizontally long gradation bar 7a, and a right end indicator 7R is set at the right end, and these left end indicators are set as necessary. One or more intermediate indicator 7I is set between 7L and the right end side indicator 7R.

ここで、これら左端側指示体７Ｌ、右端側指示体７Ｒ、中間部指示体７Ｉでは夫々、色マス表示部２ｃを用いてグラデーションバー７ａ上のそれが指示する位置（左端部や右端部、それらの中間位置）に、色マス表示部２ｃで表示される色のうちから、選択された色（グレーも含む）を表示させることができるものである。その色の表示方法としては、左端側指示体７Ｌ、右端側指示体７Ｒ、中間部指示体７Ｉ（以下、これらを総称するときには、指示体７Ｓという）のうちで色付けしたい指示体７Ｓを選択し、次いで、色マス表示部２ｃで色付けしたい所望の色を選択することにより、グラデーションバー７ａの該当する指示体７Ｓが指示する位置が色付けされる。そして、このように色付けられると、グラデーションバー７ａでの左端側指示体７Ｌと中間部指示体７Ｉとの間で、これらの位置に設定された色のグラデーションが設定されることになり、また、中間部指示体７Ｉと右端側指示体７Ｒとの間で、これらの位置に設定された色のグラデーションが設定されることになる。 Here, in the left end side indicator 7L, the right end side indicator 7R, and the intermediate portion indicator 7I, the positions (left end portion, right end portion, and the like) indicated by the color bar display portion 2c on the gradation bar 7a are indicated. The color (including gray) selected from the colors displayed on the color cell display unit 2c can be displayed at the intermediate position). As a display method of the color, the indicator 7S to be colored is selected from the left end side indicator 7L, the right end side indicator 7R, and the intermediate portion indicator 7I (hereinafter, collectively referred to as the indicator 7S). Then, by selecting a desired color to be colored on the color cell display unit 2c, the position indicated by the corresponding indicator 7S of the gradation bar 7a is colored. When colored in this way, the gradation of the color set at these positions is set between the left end side indicator 7L and the intermediate part indicator 7I in the gradation bar 7a, The gradation of the color set at these positions is set between the intermediate portion indicator 7I and the right end side indicator 7R.

グラデーション分岐点設定部６は以下の３つからなる。第一は、左端側指示体７Ｌで指示されるグラデーションバー７ａの左端部と右端側指示体７Ｒで指示されるグラデーションバー７ａの右端部と中間部指示体７Ｉで指示されるグラデーションバー７ａの中間位置とを分岐点とし、グラデーションバー７ａで設定される分岐点の個数を表わす分岐点数表示部６ａである。第二は、この分岐点の個数を増減する（即ち、中間部指示体７Ｉなどを追加、削減する）ための分岐点増減部６ｂである。第三は、分岐点、即ち、左端側指示体７Ｌと右端側指示体７Ｒと中間部指示体７Ｉとのうちの、選択された指示体７Ｓのグラデーションバー７ａ上での位置をパーセント（％）で表わす選択分岐点位置表示部６ｃである。 The gradation branch point setting unit 6 includes the following three parts. The first is between the left end portion of the gradation bar 7a indicated by the left end side indicator 7L, the right end portion of the gradation bar 7a indicated by the right end side indicator 7R, and the gradation bar 7a indicated by the intermediate portion indicator 7I. A branch point number display portion 6a that represents the number of branch points set by the gradation bar 7a, with the position as a branch point. The second is a branch point increasing / decreasing unit 6b for increasing / decreasing the number of branch points (that is, adding / reducing the intermediate section indicator 7I). The third is the percentage (%) of the branch point, that is, the position of the selected indicator 7S on the gradation bar 7a among the left end side indicator 7L, the right end side indicator 7R, and the intermediate portion indicator 7I. Is a selected branch point position display section 6c.

ここでは、左端側指示体７Ｌが選択された指示体７Ｓとし、この左端側指示体７Ｌがグラデーションバー７ａの０％の位置にあるものとしており、これ故、選択分岐点位置表示部６ｃには、「０」％が表示されている。なお、選択分岐点位置表示部６ｃでは、同じ指示体７Ｓが選択されている限り、この指示体７Ｓの位置を表わすパーセント（％）が表示される。グラデーションバー７ａでの２個以上の指示体７Ｓは、そのいずれか１つが選択されており、従って、選択分岐点位置表示部６ｃでは、常時選択された指示体７Ｓの位置が表示されている。 Here, it is assumed that the left end side indicator 7L is the selected indicator 7S, and this left end side indicator 7L is located at 0% of the gradation bar 7a. , “0”% is displayed. In the selected branch point position display section 6c, as long as the same indicator 7S is selected, a percentage (%) representing the position of this indicator 7S is displayed. Any one of the two or more indicators 7S on the gradation bar 7a is selected. Therefore, the position of the indicator 7S that is always selected is displayed on the selected branch point position display section 6c.

なお、選択された指示体７Ｓには、これを囲むようにして所定の色（例えば、青色）の選択枠７ｂが付けられている。ここでは、左端側指示体７Ｌが選択されているものとしている。 The selected indicator 7S is provided with a selection frame 7b of a predetermined color (for example, blue) so as to surround it. Here, it is assumed that the left end side indicator 7L is selected.

また、分岐点数表示部６ａでは、「▼」をカーソル（図示せず）で押下操作することにより、分岐点（即ち、指示体７Ｓ）の一連の番号を表わすプルダウンメニューが展開され、このうちの１つを選択することにより、その番号の分岐点（指示体７Ｓ）が選択されることになる。 In the branch point number display section 6a, a pull-down menu representing a series of branch point (ie, indicator 7S) numbers is expanded by pressing “▼” with a cursor (not shown). By selecting one, the branch point (indicator 7S) with that number is selected.

また、いずれの指示体７Ｓも、カーソルを用いた操作により、グラデーションバー７ａに沿って移動させることができるが、この場合でも、その移動する指示体７Ｓが指示するグラデーションバー７ａ上での位置の色は変化しない。従って、例えば、中間部指示体７Ｉを移動させると、グラデーションバー７ａ上でのこの中間部指示体７Ｉに対して設定された色が同様にグラデーションバー７ａ上を移動することになる。この結果、この中間部指示体７Ｉと左端側指示体７Ｌ、右端側指示体７Ｒとの間の色のグラデーションの傾向が変化する。例えば、中間部指示体７Ｉを左端側指示体７Ｌに近づけると、この左端側指示体７Ｌから中間部指示体７Ｉへの色のグラデーション（色の変化）が急激となり、また、このとき、中間部指示体７Ｉが右端側指示体７Ｒから離れるので、中間部指示体７Ｉから右端側指示体７Ｒへの色のグラデーションが緩やかとなる。 In addition, any of the indicators 7S can be moved along the gradation bar 7a by an operation using a cursor. Even in this case, the position on the gradation bar 7a indicated by the moving indicator 7S is also indicated. The color does not change. Therefore, for example, when the intermediate part indicator 7I is moved, the color set for the intermediate part indicator 7I on the gradation bar 7a similarly moves on the gradation bar 7a. As a result, the color gradation tendency between the intermediate portion indicator 7I, the left end side indicator 7L, and the right end side indicator 7R changes. For example, when the intermediate portion indicator 7I is brought closer to the left end side indicator 7L, the color gradation (color change) from the left end side indicator 7L to the intermediate portion indicator 7I becomes abrupt, and at this time, the intermediate portion Since the indicator 7I is separated from the right end side indicator 7R, the color gradation from the intermediate portion indicator 7I to the right end side indicator 7R becomes gentle.

次に、グラデーション分岐点設定部６の分岐点増減部６ｂの操作について、図１２（ｂ）により説明する。分岐点増減部６ｂは、「＋」ボタンと「−」ボタンとからなり、「＋」ボタンはグラデーションバー７ａで中間指示体７Ｉを増加させるためのものであり、カーソルでの押下操作毎に１つずつ中間指示体７Ｉを増加させる。また、「−」ボタンはグラデーションバー７ａで選択されている中間指示体７Ｉを減少させるためのものであり、カーソルでの押下操作毎に１つずつ中間指示体７Ｉを減少させることができる。 Next, the operation of the branch point increasing / decreasing unit 6b of the gradation branch point setting unit 6 will be described with reference to FIG. The branch point increasing / decreasing unit 6b includes a “+” button and a “−” button. The “+” button is for increasing the intermediate indicator 7I with the gradation bar 7a, and is 1 for each pressing operation with the cursor. The intermediate indicator 7I is increased one by one. The “−” button is used to decrease the intermediate indicator 7I selected by the gradation bar 7a, and the intermediate indicator 7I can be decreased one by one for each pressing operation with the cursor.

図５に戻り、マーク４２の意味欄４２ｍは、各構成要素のカラーパレット４５間に表示されるマーク４２（例えば、カラーパレット４５ａ，４５ｂ間のマーク４２ａ、カラーパレット４５ｂ，４５ｃ間のマーク４２ａ）の意味を示すものである。マーク４２の意味欄４２ｍの各ボタンをマウスなどでクリックすると、メッセージボックスが表示される。マーク４２の意味は下記である。
○：輝度比が十分であるので、色覚特性に依存せずに識別できる。
×：文字と背景の輝度比が４．５：１を満たしていないため、文字が読みにくい可能性がある。
／：文字以外の隣接する要素（例えば枠線）との輝度比が３：１を満たしていないため、識別できない可能性がある。
？：主に以下２点の理由により、文字と背景の輝度比の機械的な判断が困難である。
１．文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。
２．グラデーションなど、ブラウザによって色の表示の仕方が異なるＣＳＳを使用しているため。 Returning to FIG. 5, the meaning column 42m of the mark 42 is a mark 42 displayed between the color palettes 45 of each component (for example, a mark 42a between the color palettes 45a and 45b and a mark 42a between the color palettes 45b and 45c). The meaning of When each button in the meaning column 42m of the mark 42 is clicked with a mouse or the like, a message box is displayed. The meaning of the mark 42 is as follows.
○: Since the luminance ratio is sufficient, it can be identified without depending on the color vision characteristics.
X: Since the luminance ratio of the character and the background does not satisfy 4.5: 1, the character may be difficult to read.
/: Since the luminance ratio with adjacent elements other than characters (for example, a frame line) does not satisfy 3: 1, there is a possibility that it cannot be identified.
? : It is difficult to mechanically determine the luminance ratio between the character and the background mainly for the following two reasons.
1. This is because it is difficult to specify the portion with the smallest luminance ratio among the portions adjacent to the character.
2. Because CSS is used in different colors depending on the browser, such as gradation.

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５で選択されている色が、隣接する要素を識別させるのに輝度比が足りているか否かを判定し、カラーパレット４５間の連系線上に「○」、「×」、「／」、「？」を表示指示する。具体的には、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ａ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であるが、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ａ，４５ｂ間の連系線上にマーク４２ａとして「？」を表示指示する。同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｃの文字は単色であるが、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ａとして「？」を表示指示する。 The processing unit 11 of the Web server 10 (see FIG. 1) determines whether the color selected in the color palette 45 has a sufficient luminance ratio to identify adjacent elements. Instructs to display “○”, “×”, “/”, “?” On the interconnection line. Specifically, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45a and 45b, the background of the color palette 45a is a single color, but the background of the buttons of the color palette 45b is a gradation. Therefore, “?” Is instructed to be displayed as the mark 42a on the interconnection line between the color palettes 45a and 45b. Similarly, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45b and 45c, the characters of the color palette 45c are monochromatic, but the background of the buttons of the color palette 45b is gradation. Then, “?” Is instructed to be displayed as the mark 42a on the interconnection line between the color palettes 45b and 45c.

図６は、非活性時のボタンの編集画面の例を示す図である。図６に示す編集画面は、図５の編集画面と比較して、非活性時の状態タブ４１ｘが選択され、また、ＵＩ要素の構成欄４４において、ボタンの枠線のチェックボックスにチェックが入力されている点が異なる。カラーパレット表示エリア４５Ａには、カラーパレット４５ａ，４５ｂ，４５ｃのほかに、ボタンの枠線のカラーパレット４５ｄが表示されている。なお、前述したが、非活性時とは、例えば、押せない状態のボタンの色を作成する場合に選択される。 FIG. 6 is a diagram illustrating an example of a button editing screen when inactive. In the editing screen shown in FIG. 6, the inactive state tab 41x is selected compared to the editing screen in FIG. 5, and a check is entered in the check box of the button border in the UI element configuration field 44. Is different. In the color palette display area 45A, in addition to the color palettes 45a, 45b, and 45c, a color palette 45d for button frame lines is displayed. As described above, the inactive state is selected, for example, when creating a button color that cannot be pressed.

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５で選択されている色が、隣接する要素を識別させるのに輝度比が足りているか否かを判定し、カラーパレット４５間の連系線上に「○」、「×」、「／」、「？」を表示指示する。 The processing unit 11 of the Web server 10 (see FIG. 1) determines whether the color selected in the color palette 45 has a sufficient luminance ratio to identify adjacent elements. Instructs to display “○”, “×”, “/”, “?” On the interconnection line.

カラーパレット表示エリア４５Ａにおいて、Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５ａ，４５ｄ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であり、かつ、カラーパレット４５ｄのボタンの枠線は単色であり、輝度比が３：１以上と判定すると、カラーパレット４５ａ，４５ｄ間の連系線上にマーク４２ｂとして「○」を表示指示する。 In the color palette display area 45A, when the processing unit 11 of the Web server 10 (see FIG. 1) determines the luminance ratio between the color palettes 45a and 45d, the background of the color palette 45a is a single color, and the color palette When the frame line of the 45d button is a single color and the luminance ratio is determined to be 3: 1 or more, a display of “◯” as the mark 42b is instructed on the interconnection line between the color palettes 45a and 45d.

同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｄ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ｄのボタンの枠線は単色であり、かつ、カラーパレット４５ｂのボタンの背景は単色であり、輝度比が３：１未満と判定すると、カラーパレット４５ｄ，４５ｂ間の連系線上にマーク４２ｃとして「／」を表示指示する。 Similarly, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45d and 45b, the button border of the color palette 45d is a single color, and the background of the button of the color palette 45b is If it is determined that the color is monochrome and the luminance ratio is less than 3: 1, “/” is instructed to be displayed as the mark 42c on the interconnection line between the color palettes 45d and 45b.

同様に、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｂのボタンの背景は単色であり、かつ、カラーパレット４５ｃの文字は単色であり、輝度比が４．５：１未満と判定すると、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ｄとして「×」を表示指示する。 Similarly, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45b and 45c, the background of the button of the color palette 45b is a single color, and the characters of the color palette 45c are a single color. If it is determined that the luminance ratio is less than 4.5: 1, “x” is instructed to be displayed as the mark 42d on the interconnection line between the color palettes 45b and 45c.

図１３は、図６のカラーパレット表示エリアを拡大した図である。カラーパレット４５ａの背景の色マス表示部２ｃには、３×３マス（横３マス、縦３マス）が表示されているが、上側の３つのマスに、「／」の表示がされている。Ｗｅｂサーバ１０（図１参照）の処理部１１は、各マスに表示されている色と、カラーパレット４５ｄで選択されているマスの色との輝度比も判定している。Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ａの背景の場合、輝度比が３：１未満と判定すると、各マス上に「／」の表示指示をする。同様に、カラーパレット４５ｄのボタンの枠線の色マス表示部２ｃには、５×５マス（横５マス、縦５マス）が表示されているが、全てのマスに、「／」の表示がされている。 FIG. 13 is an enlarged view of the color palette display area of FIG. The background color cell display portion 2c of the color palette 45a displays 3 × 3 cells (3 horizontal cells and 3 vertical cells), but “/” is displayed on the upper three cells. . The processing unit 11 of the Web server 10 (see FIG. 1) also determines the luminance ratio between the color displayed on each square and the color of the square selected on the color palette 45d. If the processing unit 11 of the Web server 10 determines that the luminance ratio is less than 3: 1 in the case of the background of the color palette 45a, it instructs the display of “/” on each square. Similarly, 5 × 5 squares (horizontal 5 squares, vertical 5 squares) are displayed in the color square display portion 2c of the button border of the color palette 45d, but “/” is displayed on all squares. Has been.

カラーパレット４５ｂのボタンの背景の色マス表示部２ｃには、５×５マス（横５マス、縦５マス）が表示されているが、全てのマスに、「×」の表示がされている。Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂのボタンの背景の場合、各マスに表示されている色と、カラーパレット４５ｃで選択されている色の輝度比（ボタンの背景と文字との輝度比）を判定している。なお、仮にカラーパレット４５ｃで選択されている色との輝度比が４．５：１であった場合には、「×」の表示はされないが、その際は、カラーパレット４５ｂで選択されている色との輝度比を判定して、３：１未満である場合には「／」の表示がされる。カラーパレット４５ｃで選択されている色との輝度比が４．５：１以上で、カラーパレット４５ｂで選択されている色との輝度比が３：１以上であれば、「×」と「／」のいずれも表示されない。 The background color square display portion 2c of the color palette 45b displays 5 × 5 squares (horizontal 5 squares, vertical 5 squares), but “x” is displayed on all squares. . In the case of the background of the button of the color palette 45b, the processing unit 11 of the Web server 10 determines the luminance ratio between the color displayed on each square and the color selected on the color palette 45c (the luminance between the button background and the character). Ratio). If the luminance ratio to the color selected in the color palette 45c is 4.5: 1, “x” is not displayed, but in this case, the color palette 45b is selected. When the luminance ratio with respect to the color is determined and it is less than 3: 1, “/” is displayed. If the luminance ratio with the color selected in the color palette 45c is 4.5: 1 or more and the luminance ratio with the color selected in the color palette 45b is 3: 1 or more, “×” and “/ "Is not displayed.

図６に戻り、ＵＩ要素のプレビュー欄３３のボタンの表示を参照すると、ボタン上の文字が見えにくい状況がわかる。同様に、色覚シミュレーター欄３４のボタン上の文字がみえにくい状況がわかる。また、文字と背景の輝度比の表示欄３３１には、「１．６」として表示されている。この見えにくい状況は、通常、非活性時のボタン表示としては許容範囲か否かについてデザイナが判断することになる。 Returning to FIG. 6, referring to the display of the button in the UI element preview field 33, it can be seen that the characters on the button are difficult to see. Similarly, it can be seen that the characters on the buttons in the color vision simulator column 34 are difficult to see. Further, “1.6” is displayed in the display column 331 of the luminance ratio between the character and the background. This difficult-to-see situation is usually determined by the designer as to whether the button display when inactive is within an acceptable range.

図７は、マウスオーバー時のボタンの編集画面の例を示す図である。図７に示す編集画面は、図５の編集画面と比較して、マウスオーバー時の状態タブ４１ｍが選択され、また、ＵＩ要素の構成欄４４において、ボタンの装飾のチェックボックスにチェックが入力され、かつ、光彩のラジオボタンが選択されている点で異なる。カラーパレット表示エリア４５Ａには、カラーパレット４５ａ，４５ｂ，４５ｃのほかに、ボタンの装飾のカラーパレット４５ｅが表示されている。なお、前述したが、マウスオーバーとは、マウスのカーソルを画像やリンク、ファイルなどのうえに移動した時に表示され、実行される処理のことをいい、カーソルを合わせた画像やファイルがリンクであることを知らせる視覚効果のことである。 FIG. 7 is a diagram illustrating an example of a button editing screen when the mouse is over. In the editing screen shown in FIG. 7, the state tab 41 m at the time of mouse over is selected as compared with the editing screen of FIG. 5, and a check is entered in the check box of the button decoration in the UI element configuration field 44. And the difference is that the radio button of the glow is selected. In the color palette display area 45A, in addition to the color palettes 45a, 45b, 45c, a color palette 45e for button decoration is displayed. As mentioned above, mouse-over refers to the processing that is displayed and executed when the mouse cursor is moved over an image, link, or file, and the image or file with the cursor is a link. It is a visual effect that informs you.

Ｗｅｂサーバ１０（図１参照）の処理部１１は、カラーパレット４５ａ，４５ｅ間の輝度比を判定する際に、カラーパレット４５ａの背景は単色であり、カラーパレット４５ｅのボタンの装飾−光彩の指定は単色であるが、実際に表示される色は段階的に変化するために輝度比が機械的に算出できない。よって、カラーパレット４５ａ，４５ｅ間の連系線上にマーク４２ａとして「？」を表示指示する。また、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｅ，４５ｂ間の輝度比を判定する際に、カラーパレット４５ｅで指定された色の表示が段階的に変化することと、カラーパレット４５ｂのボタンの背景はグラデーションであることから、最低輝度比の機械的な判断ができないためにカラーパレット４５ｅ，４５ｂ間の連系線上にマーク４２ａとして「？」を表示指示する。さらに、Ｗｅｂサーバ１０の処理部１１は、カラーパレット４５ｂ，４５ｃ間の輝度比を判定する際に、カラーパレット４５ｂのボタンの背景はグラデーションであるため、カラーパレット４５ｂ，４５ｃ間の連系線上にマーク４２ａとして「？」を表示指示する。 When the processing unit 11 of the Web server 10 (see FIG. 1) determines the luminance ratio between the color palettes 45a and 45e, the background of the color palette 45a is a single color, and the button decoration of the color palette 45e—designating the glow Is a single color, but since the actually displayed color changes stepwise, the luminance ratio cannot be calculated mechanically. Therefore, “?” Is instructed to be displayed as the mark 42a on the interconnection line between the color palettes 45a and 45e. Further, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45e and 45b, the display of the color designated in the color palette 45e changes step by step, and the buttons of the color palette 45b Since the background of is a gradation, the mechanical determination of the minimum luminance ratio cannot be made, so that “?” Is instructed to be displayed as the mark 42a on the interconnection line between the color palettes 45e and 45b. Furthermore, when the processing unit 11 of the Web server 10 determines the luminance ratio between the color palettes 45b and 45c, the background of the button of the color palette 45b is a gradation, so that it is on the connection line between the color palettes 45b and 45c. “?” Is instructed to be displayed as the mark 42a.

ＵＩ要素のプレビュー欄３３のボタンの表示を参照すると、ボタンの装飾として光彩がかかっていることがわかる。同様に、色覚シミュレーター欄３４のボタンの表示を参照すると、ボタンの装飾として光彩がかかっていることがわかる。また、文字と背景の輝度比の表示欄３３１には、「判定不能」として表示されている。 Referring to the display of the button in the UI element preview field 33, it can be seen that the button is decorated with a glow. Similarly, referring to the display of the button in the color vision simulator column 34, it can be seen that the button is decorated with a glow. In the display column 331 of the luminance ratio between the character and the background, “not determined” is displayed.

図７は、ボタンに光彩をつけ、ボタンの背景にグラデーションをかけた場合である。この場合には、段階的に色が変化するので、隣接する箇所の特定が難しく、また、Ｗｅｂブラウザによって表示の仕方が異なる。このため、色作成支援ツール３０では、初期設定においては、グラデーションをかけた場合の輝度比計算処理をしない設定にしている。なお、サーバ管理者が、オプションとして、グラデーションをかけた場合の輝度比計算処理をする設定にすることもできる。 FIG. 7 shows a case where a button is lit and a gradation is applied to the background of the button. In this case, since the color changes step by step, it is difficult to identify adjacent portions, and the display method differs depending on the Web browser. For this reason, in the color creation support tool 30, in the initial setting, the brightness ratio calculation process when gradation is applied is not set. Note that the server administrator can optionally set to perform brightness ratio calculation processing when gradation is applied.

本実施形態では、文字と背景の輝度比の表示欄３３１に、「判定不能」として表示されていたとしても、「輝度比近似グレースケール」で識別できれば、色覚特性に依存せずに識別可能であるといえる。 In the present embodiment, even if “not determined” is displayed in the character / background luminance ratio display field 331, it can be identified without depending on the color vision characteristics as long as it can be identified by “luminance ratio approximate gray scale”. It can be said that there is.

図８は、色覚シミュレーターの切替えを示す図である。輝度比近似グレースケール選択欄３４１のプルダウンメニューを開くと、切替えのメニューが表示される。切替えのメニューには、「一型色覚」、「二型色覚」、「三型色覚」、「輝度比近似スケール」がある。デザイナは、メニューを選択することにより、好みの画像を、ＵＩ要素を作成中に見ることができる。 FIG. 8 is a diagram illustrating switching of the color vision simulator. When the pull-down menu of the luminance ratio approximate gray scale selection field 341 is opened, a switching menu is displayed. The switching menu includes “type 1 color vision”, “type 2 color vision”, “type 3 color vision”, and “luminance ratio approximate scale”. The designer can view a favorite image while creating a UI element by selecting a menu.

なお、色の認知は三原色（赤、緑、青）の混合による。一型色覚（第一色覚異常、protan）とは、長波長感受性錐体（Ｌ錐体）の障がいを意味し、二型色覚（第二色覚異常、deutan）とは、中波長感受性錐体（Ｍ錐体）の障がいを意味し、三型色覚（第三色覚異常、tritan）とは、短波長感受性錐体（Ｓ錐体）の障がいを意味する。 Color recognition is based on a mixture of three primary colors (red, green, and blue). Type 1 color vision (first color vision abnormality, protan) means a disorder of long wavelength sensitive cone (L cone), and type 2 color vision (second color vision abnormality, deutan) means medium wavelength sensitive cone ( M cone) means a type 3 color vision (third color vision abnormality, tritan) means a short wavelength sensitive cone (S cone).

赤、緑、青などの色相ではなく、白から黒の明暗だけで表現されるグレースケールの画像は、色覚特性に依存せず識別可能と考えられる。このため、色作成支援ツール３０においては、作成中の色の各ピクセルの相対輝度をできる限り同じになるように変換したグレースケール（輝度比近似グレースケール）の画像を、作成中の色と並べて同時に表示する機能を搭載している。この輝度比近似グレースケールの画像を確認しながら元の色を作成すれば、その色は、色覚特性に依存せず識別可能となる。 It is considered that a gray scale image expressed not only by hues such as red, green, and blue but only by lightness and darkness from white to black can be identified without depending on color vision characteristics. For this reason, in the color creation support tool 30, a gray scale image (brightness ratio approximate gray scale) converted so that the relative luminance of each pixel of the color being created is as similar as possible is arranged side by side with the color being created. It is equipped with the function to display at the same time. If the original color is created while confirming this luminance ratio approximate gray scale image, the color can be identified without depending on the color vision characteristics.

図９は、「コードを表示」のボタンが押下されたときの出力コードを示す図である。図９は、「コードを表示」のコードを表示ボタン４８（例えば、図５参照）が押下された場合の出力コードの画面５０を示す。画面５０は、ＨＴＭＬのコード表示欄５１と、ＣＳＳのコード表示欄５２から構成されている。 FIG. 9 is a diagram illustrating an output code when the “display code” button is pressed. FIG. 9 shows an output code screen 50 when the “display code” code display button 48 (for example, see FIG. 5) is pressed. The screen 50 includes an HTML code display field 51 and a CSS code display field 52.

図１０は、色作成支援ツールで作成した色の確認のための画面構成の例を示す図である。図１０は、色作成支援ツール３０において作成した色が、各ブラウザでどう表示されるかを確認するため、所定のＵＲＬにアクセスしたときに表示される画面６０（色確認画面）である。画面６０は、ＨＴＭＬのコード入力欄６１、ＣＳＳのコード入力欄６２から構成されている。 FIG. 10 is a diagram illustrating an example of a screen configuration for confirming a color created by the color creation support tool. FIG. 10 shows a screen 60 (color confirmation screen) displayed when a predetermined URL is accessed in order to confirm how the color created in the color creation support tool 30 is displayed in each browser. The screen 60 includes an HTML code input field 61 and a CSS code input field 62.

デザイナは、図９において出力されたコードをコピーして、図１０の画面６０に入力する。具体的には、デザイナは、ＨＴＭＬのコード表示欄５１のコードをＨＴＭＬのコード入力欄６１に入力し、ＣＳＳのコード表示欄５２のコードをＣＳＳのコード入力欄６２に入力する。そして、表示確認ボタン６３が押下されると、Ｗｅｂサーバ１０（図１参照）の処理部１１は、プレビュー欄６４に表示結果を表示する。これにより、現在開いているブラウザがどのように表示するかを確認することができる。 The designer copies the code output in FIG. 9 and inputs it to the screen 60 in FIG. Specifically, the designer inputs the code in the HTML code display field 51 into the HTML code input field 61 and the code in the CSS code display field 52 into the CSS code input field 62. When the display confirmation button 63 is pressed, the processing unit 11 of the Web server 10 (see FIG. 1) displays the display result in the preview field 64. Thereby, it is possible to confirm how the currently opened browser is displayed.

本実施形態の色作成支援装置（例えば、Ｗｅｂサーバ１０）は、色作成操作画面（例えば、図９の画面３０Ｗ）により作成された部品のコード出力要求を受理した場合、ＵＩ要素である部品をウェブ画面で表示する際に必要となるＨＴＭＬ用のコードおよびＣＳＳ用のコードを出力し、色確認用の画面要求があると、ＨＴＭＬ用のコードおよびＣＳＳ用のコードを入力するための入力画面を表示し、表示確認要求を受理すると、入力されたＨＴＭＬ用のコードおよびＣＳＳ用のコードに基づき、前記入力画面に部品を表示することができる。 When the color creation support apparatus (for example, the Web server 10) according to the present embodiment receives a code output request for a part created on the color creation operation screen (for example, the screen 30W in FIG. 9), the part that is a UI element is selected. Output the HTML code and CSS code required for displaying on the web screen. When there is a color confirmation screen request, the input screen for entering the HTML code and CSS code is displayed. When the display confirmation request is displayed, the component can be displayed on the input screen based on the input HTML code and CSS code.

本実施形態のプレビュー欄３３の文字と背景の輝度比の表示欄３３１（図５参照）には、文字と背景との輝度コントラスト比を計算するための部分の特定が困難である場合、判定不能である旨を表示することができる。また、色覚シミュレーターによるＵＩ要素のプレビュー表示欄３４２には、プレビュー表示欄３３２で表示されているデザイナが作成した色を、色覚の特性別に変換した色で表示される。これにより、デザイナの注意喚起につながる効果がある。デザイナは、色覚シミュレーターによるＵＩ要素のプレビュー表示欄３４２に表示されている画像を確認しながら、色の選択をすることができる。 In the display column 331 (see FIG. 5) of the character / background luminance ratio in the preview column 33 of this embodiment, determination is impossible when it is difficult to specify a portion for calculating the luminance contrast ratio between the character and the background. Can be displayed. In the UI element preview display field 342 by the color vision simulator, the color created by the designer displayed in the preview display field 332 is displayed in a color converted according to the color vision characteristics. This has the effect of leading the designer's attention. The designer can select a color while confirming the image displayed in the UI element preview display field 342 by the color vision simulator.

また、プレビュー欄３３の文字と背景の輝度比の表示欄３３１（図５参照）には、文字と背景との輝度コントラスト比の算出理由の説明がある旨を示すヘルプマーク（例えば、「？」マーク）が表示され、ヘルプマークが押下された場合にホップアップのメッセージボックスを表示することができる。これにより、デザイナは、判定不能となっている理由を知ることができる効果がある。 In addition, a help mark (for example, “?”) Indicating that the reason for calculating the luminance contrast ratio between the character and the background is explained in the character / background luminance ratio display column 331 (see FIG. 5) in the preview column 33. Mark) is displayed, and when a help mark is pressed, a hop-up message box can be displayed. As a result, there is an effect that the designer can know the reason why the determination is impossible.

ＵＩ要素である部品（例えば、ボタン本体１００）（図１１参照）は、要素として、文字（例えば、文字１０１）と背景（例えば、ボタンの背景１０２）のほかに、枠線（例えば、ボタンの枠線１０３）を含んで構成される。色作成操作画面（例えば、図６の画面３０Ｗ）の指定された該部品を構成する要素毎に表示された複数の色選択用のカラーパレット（例えば、図６に示すカラーパレット４５ｂ，４５ｃ、または、カラーパレット４５ｄ，４５ｂ）間には、隣接する要素であることを示す連系線が表示される。文字と背景との輝度コントラスト比が第１の比率（例えば、４．５：１）未満となる場合、連系線上に文字が識別できない可能性がある旨のマーク（例えば、マーク４２ｄの「×」マーク）が付される。背景と枠線の輝度コントラスト比が第２の比率（例えば、３：１）未満となる場合、連系線上に文字以外の隣接する要素が識別できない可能性がある旨のマーク（例えば、マーク４２ｃの「／」マーク）が表示される。 A component (for example, button body 100) (see FIG. 11) that is a UI element includes, as elements, a frame line (for example, a button background) in addition to a character (for example, character 101) and a background (for example, button background 102). Frame line 103). A plurality of color palettes for color selection (for example, color palettes 45b and 45c shown in FIG. 6 or the color palettes 45b and 45c shown in FIG. 6) displayed for each element constituting the specified part on the color creation operation screen (for example, screen 30W in FIG. 6). Between the color palettes 45d and 45b), a connection line indicating an adjacent element is displayed. When the luminance contrast ratio between the character and the background is less than the first ratio (for example, 4.5: 1), a mark indicating that the character may not be identified on the interconnection line (for example, “×” of the mark 42d) "Mark) is attached. When the luminance contrast ratio between the background and the frame line is less than the second ratio (for example, 3: 1), a mark indicating that adjacent elements other than characters may not be identified on the interconnection line (for example, the mark 42c) "/" Mark) is displayed.

色作成操作画面には、背景（例えば、ボタンの背景１０２）がグラデーションの設定がされている場合、連系線上に輝度コントラスト比を算出することが困難である旨のマーク（例えば、図５に示すマーク４２ａの「？」マーク）を付することができる。 In the color creation operation screen, when the background (for example, the button background 102) is set to gradation, a mark (for example, FIG. 5) that it is difficult to calculate the luminance contrast ratio on the interconnection line. A mark “?” Of the mark 42a to be shown can be added.

本実施形態の色作成支援ツール３０を、デザイナが利用すれば、Ｗｅｂシステムの開発効率をあげることができ、しかも、各Ｗｅｂブラウザの表示方法の確認までもが効率的に行える。 If the designer uses the color creation support tool 30 of this embodiment, the development efficiency of the Web system can be increased, and the display method of each Web browser can be confirmed efficiently.

デザイナは、ＵＩ要素を作成する際は、文字と背景の色の輝度コントラスト比を４．５：１以上とするために、多大な時間を一般的に要するが、本色作成支援ツール３０を利用することにより、短時間で色を決定することができる。また、デザイナが作成したＵＩ要素について印刷する際に、カラー表示したものを印刷すると、コストが大幅にかかるのが常である。このため、グレースケール表示で印刷することもあるが、その場合に、印刷してみると、文字などが判別できない状態であることに気付くことがある。よって、本色作成支援ツール３０の輝度比近似グレースケールで、問題なく判別できることを確認したものを印刷することにより、印刷費用を低減できる効果もある。 When creating a UI element, the designer generally takes a great deal of time to make the luminance contrast ratio of the character and the background color 4.5: 1 or more. However, the designer uses the color creation support tool 30. Thus, the color can be determined in a short time. In addition, when printing a UI element created by a designer, it is usually expensive to print a color display. For this reason, there are cases where printing is performed in gray scale display, but in this case, when printing is performed, it may be noticed that characters and the like cannot be distinguished. Therefore, by printing what has been confirmed that there is no problem with the luminance ratio approximate gray scale of the color creation support tool 30, there is also an effect that the printing cost can be reduced.

本実施形態では、図１において、Ｗｅｂサーバ１０とクライアント２０との関係で説明したが、これに限定されるわけではない。色作成支援ツール３０のプログラムをクライアント２０にインストールして使用してもよい。 Although the present embodiment has been described with reference to the relationship between the Web server 10 and the client 20 in FIG. 1, the present invention is not limited to this. The program of the color creation support tool 30 may be installed on the client 20 and used.

１設定色表示部
２色相表示部
３表示色調整部（指定部）
３ａ色合い
３ｂ鮮やかさ
３ｃ明るさ
３ｄ不透明度
１０Ｗｅｂサーバ（色作成支援装置）
１１処理部
１２記憶部（データベース）
２０クライアント
３０色作成支援ツール
３１パーツ一覧
３２ＵＩ要素一覧表
３３ＵＩ要素のプレビュー欄
３４色覚シミュレーター欄
３５新規作成ボタン
３６詳細情報／編集ボタン
３７削除ボタン
３８コードを表示ボタン
４０編集欄
４１状態タブ
４２マーク
４３ＵＩ要素の形変更欄
４４ＵＩ要素の構成欄
４５カラーパレット
４６名前を付けて保存ボタン
４７上書き保存ボタン
４８コードを表示ボタン
５０画面
６０画面（色確認画面）
５１ＨＴＭＬのコード表示欄
５２ＣＳＳのコード表示欄
６１ＨＴＭＬのコード入力欄
６２ＣＳＳのコード入力欄
９０インターネット
１００ボタン本体（部品１）
１０１文字
１０２ボタンの背景（部品２）
１０３ボタンの枠線
１０４ボタンの装飾
２００背景
３０Ｗ画面（色作成支援操作画面）
３２１リスト表
３３１文字と背景の輝度比の表示欄
３３２ＵＩ要素のプレビュー表示欄
３４１輝度比近似グレースケール選択欄
３４２ＵＩ要素のプレビュー表示欄
４２ｍマークの意味欄
４５Ａカラーパレット表示エリア
４５Ｍ単色のタブ
４５Ｇグラデーションのタブ 1 Setting color display section 2 Hue display section 3 Display color adjustment section (designation section)
3a Color 3b Vividness 3c Brightness 3d Opacity 10 Web server (color creation support device)
11 Processing Unit 12 Storage Unit (Database)
20 Client 30 Color creation support tool 31 Parts list 32 UI element list 33 UI element preview field 34 Color vision simulator field 35 New creation button 36 Detailed information / edit button 37 Delete button 38 Display code button 40 Edit field 41 Status tab 42 Mark 43 UI element shape change field 44 UI element configuration field 45 Color palette 46 Save as button 47 Overwrite button 48 Code display button 50 screen 60 screen (color confirmation screen)
51 HTML code display field 52 CSS code display field 61 HTML code input field 62 CSS code input field 90 Internet 100 Button body (part 1)
101 Character 102 Button background (Part 2)
103 Button border 104 Button decoration 200 Background 30W screen (color creation support operation screen)
321 List table 331 Brightness ratio display field of character and background 332 UI element preview display field 341 Brightness ratio approximate gray scale selection field 342 UI element preview display field 42m Mark meaning field 45A Color palette display area 45M Monochromatic tab 45G Gradient tab

Claims

A color creation support device that supports the creation of colors for parts used in web content
When there is a creation request for the part from the client, a color creation support operation screen for creating the color of the part used on the web content is displayed.
Displaying a color palette for color creation for each element constituting the specified part on the color creation support operation screen,
On the color creation support operation screen, a connection line indicating an adjacent element is displayed between a plurality of color creation color palettes displayed for each element constituting the designated part. ,
The color creation support apparatus, when the luminance contrast ratio between the adjacent elements is less than the predetermined ratio, said adjacent elements in the interconnection line is a mark indicating that it may not be possible to identify features and be roux E blanking color creating support method of content.

  The component includes a character, a background of the character, and a frame line as the element,
  The color creation support device includes:
  When the brightness contrast ratio between the character and the background is less than the first ratio, a mark indicating that the character may not be identified on the interconnection line is attached,
  When the luminance contrast ratio between the background and the frame line is less than the second ratio, a mark indicating that there is a possibility that adjacent elements other than characters may not be identified on the interconnection line
  The color creation support method for web contents according to claim 1.

  By selecting a desired color in the color palette, each element of the selected part is displayed in the selected color,
  The color palette is provided with a designation unit for designating each of hue, brightness, saturation and transparency,
  Furthermore, the color creation support device includes:
  On the color creation support operation screen, together with the color palette, a preview column for displaying the color of the component and a color vision simulator column for displaying a color for converting the color of the component by a predetermined process are displayed.
  In the color vision simulator column, a process of approximating and converting the relative luminance of each pixel of the image displayed in the preview column and the relative luminance of each pixel after being converted to gray scale as close as possible to each other Display the image processed by the luminance ratio approximate grayscale processing
  The color creation support method for web contents according to claim 1.

The component is composed of at least a character and a background of the character as the element,
The color creation support device displays in the preview field that the determination is impossible when it is difficult to specify a portion for calculating the luminance contrast ratio between the character and the background. The color creation support method for web content according to claim 3 .

The component is composed of at least a character and a background of the character as the element,
In the preview field, a help mark indicating that there is an explanation of the reason for calculating the luminance contrast ratio between the character and the background is displayed.
4. The web content color creation support method according to claim 3 , wherein the color creation support device displays a hop-up message box when the help mark is pressed.

The color creation support apparatus, wherein if the background is the gradient of the set to claim 2, characterized in that subjecting a mark indicating that it is difficult to calculate the luminance contrast ratio on the interconnection line Web content color creation support method described in 1.

The web content color creation support method according to claim 2 , wherein the first ratio is 4.5: 1 and the second ratio is 3: 1.

When the color creation support apparatus receives a code output request for a part created on the color creation support operation screen, the color creation support apparatus receives an HTML code and a CSS code required to display the part on the web screen. Output,
When there is a screen request for color confirmation, a color confirmation screen for inputting the HTML code and CSS code is displayed.
2. The web content color creation support according to claim 1, wherein when a display confirmation request is received, a component is displayed on the color confirmation screen based on the input HTML code and CSS code. Method.

  A color creation support device that supports creation of colors of parts used in web content,
  The color creation support device displays a color creation support operation screen for creating a color of a component used on the web content when a request is made to create the component from a client.
  Displaying a color palette for color creation for each element constituting the specified part on the color creation support operation screen,
  On the color creation support operation screen, a connection line indicating an adjacent element is displayed between a plurality of color creation color palettes displayed for each element constituting the designated part. ,
  When the luminance contrast ratio between the adjacent elements is less than a predetermined ratio, the color creation support apparatus attaches a mark indicating that the adjacent elements may not be identified on the interconnection line.
  This is a web content color creation support device.