ニュースリリース

アクセシビリティに配慮した色の作成を効率的にする
「画面の色作成支援ツール」を1年間無償公開

  株式会社日立製作所(執行役社長 : 中西 宏明／以下、日立)は、このたび、インターネット上のWebサイトやWebブラウザを活用した業務システムにおいて、「Cascading Style Sheets」(以下、CSS)の追加仕様である「CSS Level 3」(以下、CSS3)に対応した「画面の色作成支援ツール」(以下、本ツール)を開発し、本日から来年7月19日までの1年間、Webサイト上で無償公開します。CSSは、画面デザインのレイアウト方法などを指示する、W3C*1による仕様の一つです。本ツールは、日立グループのデザイン部門であるデザイン本部と日立公共システムエンジニアリング株式会社(取締役社長 : 建部 清美／以下、日立GP)の共同研究により開発しました。

  近年、インターネット上のWebサイトやWebブラウザを活用した業務システムの画面デザインは、新たな技術やツールが開発されたことで、表現豊かな画面デザインが自由にできるようになってきています。一方で、その画面を作成するにあたり、アクセシビリティにどう配慮すべきかが、画面のデザイナーやシステムの開発者にとって課題となっています。

  例えば、画面上の「ボタン」や「文字」に影やグラデーションなどの立体感のあるデザインをする場合、これらはCSS3で規定されたコンピュータ言語を使用して実現できます。しかし、CSS3は、従来のCSSに比べ複雑な規定を有しています。そのためデザイナーが、素早くそれらのデザインを行いたい場合は、複雑なCSS3ではなく、画像で作成した「ボタン」や「文字」を読み込ませる方法のほうが簡単です。しかし、W3Cが規定しているアクセシビリティのガイドラインWCAG(Web Content Accessibility Guidelines) 2.0やJIS規格においては、画像で読み込ませる方法だと、色や大きさなどをカスタマイズすることが難しいため、できる限り使用しないよう推奨されています。また、これらの規格では、色覚の特性や視力の弱い方に配慮するため、背景と文字の輝度比*2を4.5対1以上にすることを求められていますが*3、影やグラデーションなど段階的に色が変化するデザインを規格に対応させることは困難です。さらに、音声読み上げソフトウェアなどをインストールしているPCの場合、適切な代替テキストが書かれていない画像では、「ボタン」や書かれている文字を「画像」と読み上げてしまうなどの問題が生じています。

  今回、1年間無償で公開するCSS3に対応した本ツールを活用することで、デザイナーは画面の作成を効率的に行うことができます。特に、色覚特性に依存せずに識別可能な色の選択を行えるので、より多くの人に見やすい画面の作成が可能になります。本ツールでは、文字と背景の色をそれぞれ一色で指定する場合には、Webのアクセシビリティ規格JIS X 8341-3*4に準拠しているかどうかを確認しながら色を選択することができます。また、背景の色をグラデーションにしたり、文字に影を付けるような場合には、輝度比近似グレースケール*5を用いることで色覚特性に依存せずに識別可能な色が容易に選択できます。

  日立グループは、家電製品をはじめ、情報サービス、公共システム、社会インフラなど、あらゆる分野において誰もが使いやすい、アクセシビリティに配慮した製品・サービスの開発・提供に努めてきました。日立GPが提供しているWebアクセシビリティをサポートするソフトウェア「ZoomSight」(ズームサイト)は、その事例のひとつです。また、日立グループは銀行ATMなど自動機の操作画面、エレベーターのかご内表示器、駅をはじめとした公共空間のデジタルサイネージなど、アクセシビリティに配慮したWebや情報システムを提供しています。

  今後も日立は、アクセシビリティに配慮したデザインの製品・サービスの開発を続け、本ツールによりCSS3の普及を支援していきます。

*1

World Wide Web Consortiumの略。W3Cは、Webで利用される各種技術の標準化を推進する非営利団体。

*2

輝度(反射輝度)とは、ある点を定めて対象の物体からその点方向に向かう単位面積当たりの光の量(cd/m2)のこと。ここで言う輝度比とは、背景と文字の色の濃淡の差(一般的にコントラストともいう)と言い換えることができる。
WCAG 2.0の附録 A : 用語集
http://www.w3.org/TR/WCAG20/#contrast-ratiodef
和訳 : http://waic.jp/docs/WCAG20/Overview.html#contrast-ratiodef

*3

WCAG 2.0の1.4.3項「Contrast (Minimum)」
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
和訳 : http://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

*4

JIS X 8341-3「高齢者・障害者等配慮設計指針 -情報通信における機器、ソフトウェア及びサービス- 第3部 : ウェブコンテンツ」

*5

元の色の輝度を近似して変換したグレースケール画像のこと。

関連情報

• 「CSS3で表示する画面の色作成支援ツール」公開Webサイト
• 「CSS3で表示する画面の色作成支援ツール」で作成したコードの各ブラウザでの表示結果を確認できるWebサイト
• アクセシビリティ・サポーター「ZoomSight」(日立公共システムエンジニアリング株式会社)のWebサイト

商標名称に関する表示

• 「ZoomSight」は、日立公共システムエンジニアリング株式会社の登録商標です。
• その他記載の会社名および製品名は、各社の商標もしくは登録商標です。

お問い合わせ先

株式会社日立製作所 デザイン本部 企画室 [担当 : 和田]
〒107-6323 東京都港区赤坂五丁目3番1号 赤坂Bizタワー
電話 : 03-6230-4692 (直通)

以上