色弱者のためのわかりやすいUI

anthony

anthonyはUX Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Making Selected Button States Clear for Color Blind Users (2015-09-01)

UIにおいて、色は多くの情報を伝達します。しかし、色弱者の場合は少し事情が違います。色が異なるオブジェクトを区別しにくいのです。

ボタンの視覚的な合図を色のみに頼っている場合、色弱者には選択したものの状態がわかりづらくなってしまいます。ボタンに色だけを使うのではなく、異なる形も使うべきでしょう。

ナビゲーションバー

ナビゲーションバーには多くのボタンがありますが、色だけを使っていると、どれが選択されているのか識別するのは容易ではありません。多くのサイトでボタンラベルの対象色を使っていますが、これは色弱者には気がつきにくいものです。 

色だけを使う代わりに、ボタンラベルに下線を加えると、色弱のユーザーも、どのボタンを選択しているか推測しなければならないという苦痛を感じることがなく、ひと目でわかるようになります。

colorblind-navigation

分割ボタン(セグメントボタン) 

色弱者が視覚的な合図として更に必要な場所は分割ボタンです。異なる状態を区別するのに色だけを使う人が多いのですが、これは通常のユーザーにははっきりわかるものでも、色弱者には非常に区別しづらいものです。

色弱者にとってわかるのは、明るめの色と暗めの色のみで、明るい方と暗い方のどちらがハイライトされているのか迷ってしまいます。選択されたボタンラベルのすぐ横にチェックマークを加えて、混乱しないようにしましょう。 

colorblind-segmentedbuttons

トグルスイッチ 

トグルスイッチもまた色弱者には視覚的に問題となる要素です。オンとオフに色だけを使っていれば、どちらを選択しているかわかりにくくなります。

わかりやすくするために、スイッチに「ON」や「OFF」という表示をしたり、オンの表示としてチェックマークを付け加えたりしましょう。

colorblind-toggleswitches

色だけでは不十分

色覚障害は大きな割合で影響があり、全ユーザーに情報を届けたいのであれば、色だけを使った情報伝達では不十分です。ボタンの状態をよりはっきりとわかりやすくするために、チェックマークや下線、ラベルなどの視覚的な合図を追加することを考慮してみてください。

色弱者は既に他の人達よりも困難を抱えています。ほんの少しの工夫で、彼らの人生をすこしだけ楽にしてあげることができます。


イベント