ページの本文へ

Hitachi

企業情報研究開発

Color Adjuster

universal design

In developing RIAs (Rich Internet Applications), a problem remains in that ensuring accessibility requires significant man-hours. Accordingly, in order that it can efficiently develop accessible RIAs, Hitachi is both developing general-purpose UI products that take into account usability, and is sharing these within the company. Of these, we will introduce in detail the "Color Adjuster System that was awarded the German "Universal Design Award 2011."

Japanese Version

Overview

This is a tool that enables customization of color schemes in elements on a web page such as text, backgrounds, and trims so that they can be differentiated by users with color blindness. The 25 colors selected within the selection area are displayed together with information as to whether or not these are easy to distinguish, enabling finding of suitable colors within the desired range. By utilizing this tool, developers of Web applications and Websites can easily select suitable color schemes. Additionally, end users can also customize Web page color schemes to their own preferences, and even when the content administrator batch customizes individual end users' screens, they can select suitable color schemes.
Users with color blindness problems who have difficulty distinguishing between red and green comprise 5% of males in Japan, and 7% in the West, meaning that it is very important to use colors that enable correct transmission of information.

Example of applications using this tool

Prototype of a Color Adjuster

You can test prototypes of business applications as examples that use these tools. The following shows the procedure by which colors are customized.

Download Microsoft Silverlight
Silverlight® of Microsoft Corporation is required to view Silverlight files. Silverlight is a trademark or a registered trademark of Microsoft Corporation (USA) in the USA and other countries.

Operation procedure example

Step 1

1. Press the "Color customization" button at the top right of the screen. A message stating "Select the area for which you want to customize colors" will be displayed, and click the "OK" button.

Step 2

2. Select the area to customize. Areas that can be customized can be specified easily by developers.

Step 3

3. When the button has been selected, the color of the button text, color, trim, and location can be customized in order to be more visible for users with color blindness.

Step 4

4. If asked "Make all parts from the same category on the same background area the same color?", then to make all buttons have the same color scheme, select "Yes."

Step 5

5. Customization results if "No" is selected in the previous screen.