このエントリーをはてなブックマークに追加

Memo

GoogleのUI Color Palette を色覚障がいの視点から見てみた

2014/06/27
Memo

google-color_uding

Google I/O 2014で発表された Google Design のガイドライン。
UI Color Palette も提案されていていいなーと思って見ていたら、ブコメで「(トップのメニューが)ピンクと青緑の縦並びは、色弱の人には判別困難かも。」とあって、ちょっとその視点で見てみよう、と試してみました。

色覚障がいとカラーユニバーサルデザインについて

「色覚障害」「色覚異常」「色盲」「色弱」など色んな言われ方がありますが、一般的な人と色の見え方が異なる障がいです。
赤色が黒っぽく見えたり、緑が黄色っぽく見えたり。
この障がいにも種類があって、3タイプあり、赤が分かりづらいP型、緑が分かりづらいD型、青が分かりづらいT型があります。
色覚障がいでもっとも割合が多いのがD型だそうです。

こういった色覚障がいの人達でも判別がしやすい色を使いましょう、というガイドラインが、カラーユニバーサルデザインになります。
残念ながらwebではあまり聞かないですね。プロダクトデザインの世界ではよく聞きます。
(昔、カメラとか機械端末とかを扱う会社さんと仕事をしてて、使う色はよく注意されました…)

東洋インキグループの「UDing®」で見てみよう!

uding_ss1

印刷用インクなどを作っている東洋インキグループさんが素敵なカラーユニバーサルデザインを支援するツール「UDing®」を無償で提供してくれていますので、今回はこれの「UDing シュミレーター」を使って見てみました。
iPhone版のUDing®もあるのすごいよね。今度使ってみたい)

Google Design のメニューを見てみる

まず、きっかけとなったGoogle Designのメニュー。

google_design_menu1

左上がオリジナルです。こうして見るとだいぶ違う世界ですね。
つぎに、レスポンシブなので画面をスマホサイズにしてみます。

google_design_menu2

ブコメで指摘されてたのは、コレのことかな?
確かに、似たような色が縦に並んでしまいますね。
ただ、アイコンのイメージがどれも違うお陰か、迷う事はなさそうです。

UI Color Paletteを見てみる

つぎに、提案されているUI Color PaletteをUDing®で見てみます。
サイトのキャプチャではちょっと見辛いので、こんな感じで作り直してみました。

base

以下はそれぞれのタイプでの見え方です。

■P型
recolor_Ptype

■D型
recolor_Dtype

■T型
recolor_Ttype

特にLight BuleからYellowあたりは他と同等に見える色が多いですね。
アクセントカラーを選ぶ時にすこし注意したいです。

Google Design内のサンプルを見てみる

uding_ss2

Style > Color 内に提示されていたサンプルです。
IndigoとPink、一番見辛いのはP型ですが、何となく色差が分かりますね。

UI Color Palette をつかったデザインについて

苦手ながら英語を読んでみたかぎり、

・ベースとなるカラーを含む3つの色相と、1つのアクセントカラーで構成すること
・テキストカラーはその役割に応じて明度で表現すること

ということかな、と。
そのうち日本語訳や、ざっくり説明してくれる記事が出てくると思うで、それに期待したいと思います( ˘ω˘)

テキストの役割を明度で表現するのいいなーと思いました。
提案されている明度差はUDing®を通しても分かるレベルですし、この指標はいいですね。

マテリアルデザインとかアニメーションとか、デザインの流行はまた少し変わってきてますね。
しっかりチェックしつつ、ユニバーサルな視点も忘れずにデザインしていきたいです。

色を選ぶとCUD的に選んでほしくない色をグレーアウトする、みたいなそういうツール誰か作りませんかね?作ろうかな…。

参考)
| TOYO INK GROUP | カラーユニバーサルデザイン -誰にでも 優しく 理解しやすい 色の見え方-
Color – Style – Google design guidelines

Category : MemoTags : , , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく