色盲ユーザー向けのUIデザイン

公開: 2020-12-10

色覚異常者は人口のかなりの部分を占めています。正確には、男性の 12 人に 1 人、女性の 200 人に 1 人です。しかし、UI 設計において、色盲のユーザーは見過ごされがちです。

多くの人が色覚異常を白黒で見ると誤解しています。これは 1 つのタイプですが、まれではなく、極端ではないバージョンもあります。

ほとんどの人は三色性で、色を緑、赤、青の 3 つの色の組み合わせとして認識します。さまざまな種類の色覚異常または色覚異常 (CVD) は、これらの色の 1 つまたは複数をはっきりと認識できないために発生します。最も一般的な CVD のタイプは、赤と緑の区別が難しい赤緑色覚異常と、赤色がくすんで見える赤色覚異常です。

私たちは誰もがインターネットに公平かつ平等にアクセスできるべきだと考えているため、UI デザイナーは色弱者を念頭に置いて設計することが不可欠です。アメリカ障害者法 (ADA) では、特定の組織が WCAG 2.0 レベル AA ガイドラインを満たすことさえ要求しています。

Web サイトを ADA に準拠させることは難しくありませんが、色のアクセシビリティを考慮する必要があります。法的な影響を除けば、色盲のユーザー向けのデザインは、提供するユーザーエクスペリエンスにとって不可欠です。

色弱者向けのデザインが重要な理由

色にはユーザーの購入決定、感情的な反応、および全体的なユーザーエクスペリエンスに影響を与える力があるため、色彩理論は UI デザインにおいて大きな役割を果たします。適切なブランドの色を選択することがビジネスにとってどれほど重要かを考えてみてください。 8% 以上の人が、あなたが選んだ色のためにあなたのロゴやウェブサイトを読むことができないと想像してみてください. それは多くの機会損失です。

色盲のユーザーは特定の色を区別できないため、デザイナーはデザインの読みやすさや感情的な影響を色だけに頼ることはできません。色を使用するときは、ユーザーが色をどのように操作するかを考慮し、ターゲットユーザー (色盲のメンバーを含む) にアピールするインタラクティブなデザインを作成する必要があります。ユーザーの問題点に共感して、ユーザーが問題を防ぎ、解決できるようにするのは、デザイナーの仕事です。

現在、Visolve のような、特定の種類の色覚異常に合わせてコンピューターの表示を調整できるツールがありますが、すべての色覚異常者がこれらのツールを使用しているわけではありません。

色のアクセシビリティを考慮するのは Web サイトだけではないことに注意してください。ソーシャルメディアでさえ、目の不自由な人がアクセスできるようにすることができます。

知っておくべき色の用語

色盲のユーザー向けの UI デザインのベストプラクティスに入る前に、デザインの専門家ではない人のために、色の基本を確認することをお勧めします。配色を選択する際に考慮すべき主な要素は 4 つあります。

色相:これは「色」の同義語で、色のスペクトル波長によって決まります。

彩度: 彩度とも呼ばれます。これは、存在するグレーの量によって決定される、色の強度または純粋さです。灰色が少ないほど、明るい色になります。

明度:明度は、色に追加された白または黒の量に依存し、それぞれ色合いと色合いを作成します。

温度:これは、色をどの程度暖かくまたは冷たく感じるかです。コンピューターのモニターは、色の知覚温度に影響を与える可能性があります。

色盲ユーザー向けのデザイン方法

色覚異常に配慮したデザインは、製品の魅力を低下させるという意味ではありません。設計プロセス中に特定のベストプラクティスに従うことを意味するだけです。優れた UX および UI デザインの原則を実装することは、長期的には Web サイトの使いやすさを向上させるだけです。

色だけで定義しない

色盲のユーザー向けにデザインする場合、メッセージを色だけに頼ることはできません。

グラフ、チャート、マップは色分けされていることが多いため、これはデータの視覚化でよくある間違いです。利用可能な予約枠または利用可能なコンサート座席を色分けして示す予約フォームも一般的です。その他の例としては、必須または未記入のフォームフィールドを色で囲んだり、エラーを色で示したりして示すことが含まれます。

色付きのテキストや画像で重要な情報を伝えることは避けるか、少なくとも他のアクセス可能な方法でその情報を提供する必要があります。

コントラストと色の選択を理解する

色盲のユーザーにとって、色自体よりも色間のコントラストが重要になることがよくあります。さまざまな種類の色覚異常により、特定の色を避けるだけでは非効率になるため、コントラストに注目することはデザイナーにとって有益です。色弱者向けのパレットでコントラスト比を改善するには、明るい色を明るくし、暗い色を暗くします。

デザインの可視性を向上させるその他の方法をいくつか紹介します。

前景色と背景色の違いを強調する
明度に大きな違いがない限り、カラーホイールで隣接する色相を選択しないでください。
色相や彩度に関係なく、類似した明度の色を使用しない
使用中の色相の彩度を上げる

それを念頭に置いて、さまざまなタイプの色弱ユーザーにとってより困難な色の組み合わせがまだあります. コントラスト比が重要でない場合、色覚異常者向けのパレットは、これらの色の組み合わせから離れている必要があります。

赤と緑
緑と青
緑と茶色
緑と灰色
緑と黒
ブルーとグレー
青と紫
黄色と薄緑

パターンとテクスチャを実装する

カラーパレットだけに依存せずに、色盲のユーザー向けにビジュアルデザインを更新する 1 つの方法は、パターンとテクスチャを使用することです。これは、グラフやチャートなど、通常、色が情報を区別するのに役立つ場合にうまく機能します。パターンまたはテクスチャ要素を追加すると、要素が際立つようになります。

シンボルを使用し、すべてにラベルを付ける

明確なラベル付けは、色弱者を含むすべてのユーザーをカスタマージャーニーに誘導するためのベストプラクティスです。ラベルは、通常色で伝えられる情報を区別するのに役立ちます。これは、グラフなどのデータの視覚化や、Web ページでユーザーを誘導する場合に当てはまります。あなたが提供した色のヒントがなくても、ユーザーが自分の道を見つけることができるかどうかを自問してください。

eコマースの観点からは、商品に明確で説明的な情報をラベル付けする必要もあります. ストーリー全体を伝えるために製品写真に頼らないでください。製品の色にラベルを付けます。

CTA ボタンを再考する

Call-to-Action (CTA) は、インタラクティブなデザインの不可欠な部分です。ユーザーがそれを見つけられなかったり、理解できなかったりすると、ユーザーはジャーニーを進めることができず、目標を達成することもできません。 CTA に注目を集める必要があり、多くのデザイナーはそのために色を利用しています。

優れた UI デザインでは、色を実装しますが、CTA ボタンについては、次のような他の優れた手法も 1 つ以上使用します。

サイズ
配置
コントラストが強い
加重境界線
加重フォント
象徴的なアイコン
ホバー効果

これらの手法は、色覚異常のユーザーにもそうでないユーザーにも同じように機能し、注目を集めたい他のページ要素にも使用できます。

リンクに下線を引く

このブログを含むブログを読むと、リンクが強調表示されて、ユーザーにその存在を通知していることに気付くでしょう。リンクを強調する最も一般的な方法は、色を使用することです。これには、色覚障害を持つほとんどの人が見ることができる青を使用してください。

これは、色覚異常または単色症のユーザー向けですが、色覚異常のまれな形態ではありますが、色の強調では十分ではありません. これらの人々の場合、色付きのリンクはグレー表示され、他のテキストと区別がつきません。アンカーテキストに下線を引くことで、これをすばやく解決できます。

ミニマリズムを考える

ミニマリズムは決して新しいものではありません。美学は何十年にもわたってトレンドとなっており、建築、アート、インテリア装飾、そしてもちろんデザインにも浸透しています。

そして今、ミニマリズムは色のアクセシビリティにおいて役割を果たしています。色が少ないほど、混乱の可能性が少なくなるからです. また、スタイル的に魅力的で気を散らすことが少ないため、すべての視聴者にとって堅実な選択肢となっています.

アクセシビリティを確保するためにミニマリストのデザインに固執する必要はありませんが、それは有効な方法の 1 つです。

色盲シミュレーターを使用する

デザインコミュニティがアクセシブルなユーザーエクスペリエンスに向けて取り組んでいる中、役立つ優れたツールが数多く登場しています。たとえば、色盲シミュレーターを使用すると、デザイナーは色盲のユーザーと同じようにデザインを見ることができます。そのようなシミュレーターの 1 つである Oracle は、Mac、Windows、および Linux で使用できます。色盲シミュレーターを使用して、デザインプロセス全体で作業をテストし、ユーザーが選択内容にどのように反応するかを理解します。

最初の段階でカラーパレットを決定するときは、AA ガイドラインに従って選択を評価するカラーピッカーツールを使用することをお勧めします。このコントラストチェッカーは、コントラスト比を教えてくれます。また、このアクセシビリティ対応のカラージェネレーターは、より効果的な色の組み合わせを提案します。

ウェブサイトをアクセスしやすくする

色覚異常に配慮した設計により、Web サイトは、すべての視聴者がナビゲートして楽しむことができるユーザーエクスペリエンスを提供します。彼らにとって、それは信頼できるブランドを意味します。あなたにとって、それはコンバージョンの成功を意味します。会社の規模によっては、法律に従うことを意味する場合もあります。とにかく、それは公正で平等なオンライン環境を構築することの一部です.

色のアクセシビリティは、快適な Web サイトを構築するための 1 つの要素にすぎません。聴覚障害者や HOH コミュニティがコンテンツにアクセスできるようにするためのガイドを必ず確認してください。