色はUIデザインに不可欠な役割を果たします。 時からのオーダーに応えてきたので、改善のユーザー体験の影響を購入の決定に反映させるブランド。

それでは、色盲ユーザーのための効果的でアクセス可能で審美的に喜ばれるインターフェイスをどのように設計しますか？

色盲の背後にある科学はかなり複雑ですが、その要点は、色盲の人々が色をはっきりと見たり、色を区別したりすることが困難であるということです。, これを念頭に置いて、この記事では、サイトのアクセシビリティと色盲の人々に提供する体験を改善する方法についていくつかのヒントを共有します。

デジタル世界における色盲

研究によると、約1人の男性12人（および1人の女性200人）は色盲です。 色盲の人は他の人と同じくらいはっきりと物事を見ることができますが、赤、緑、または青の光を完全に識別することはできません。 異なったタイプの色盲があります;deuteranopiaおよびprotanopiaの色盲は共通です。,

赤緑色の色覚異常（重眼症）を持つ人々は、赤と緑を区別するのが難しい。 同様に、赤色の失明（原色視）を有する人々には、すべての赤色が鈍く見える。

これがデザインの観点から意味することは、読みやすさと手頃な価格のために色だけに頼ると、色盲の人にとってwebサイトを使うことが難しくなるということです。

Coblis色盲シミュレータを使用して、サイトが色盲ユーザーにどのように見えるかを確認できます。,

カラーブラインドユーザーのカラーアクセシビリティを向上させる7つの方法

カラーブラインドユーザーのカラーアクセシビリティを向上させる設計要素 なると思っている方がいるかもしれのウェブサイトの魅力を増し、便利な機能を備えたものなのだデザインのためのアクセシビリティが確かではありません。

ここでは、色盲ユーザーを念頭に置いて、よりアクセスしやすいUIを設計する方法のいくつかを見ていきます。

#1:パターンとテクスチャを使用する

データの視覚化では、色の違いが非常に重要です。,、グラフや円グラフ。 選択色が低いコントラスト比にすることができる図表は困難解釈するための色盲ユーザー

代わりに行うべきことは次のとおりです。

  • パターンとテクスチャを使用して、ユーザーが異なるセグメントを簡単に区別できるようにします。
  • セグメントにテキストラベルを追加して、分かりやすくします。

トリタノピアを持つ色盲の人が青緑色の棒グラフを見る方法と、パターンやテクスチャを持つ同じグラフを見る方法を見てみましょう。,

パターンを使用するのではなく、各セグメントにラベルを付けた場合の外観は次のとおりです。

#2:色と記号を利用する

UIを介してエラーを伝えたり情報を伝えたりするために、色だけに頼るべきではありません。

たとえば、Facebookのサインアップフォームを見てみましょう。, 場合には、色だけに依存してユーザーを知ったので、失敗の特定の分野では、以下のようになりますこのためには赤いブラインド(イプのユーザー:

ここでの見Facebookの申込みフォーム付符号とそのエラーメッセージ添付:

ドライン”および記号の形を行う事によって、ユーザのうちエラーにアクセス性の向上、このリニューアルに合わせて、正誤なります。

#3:テキストラベルの使用

カラーフィルタとスウォッチにテキストラベルを追加すると、色盲ユーザーのアクセシビリティが向上します。, 色覚異常の種類によっては、ユーザーは何らかの説明テキストなしで異なる色（または色合い）を区別することが困難になる場合があります。

たとえば、amazonの説明テキストラベルがなければ、色盲ユーザーはオレンジや緑のシャツとは別に赤いシャツを伝えることはできません。

カラーフィルタにテキストラベルを追加すると、正常な視力を持つ人々のアクセシビリティも向上します。 たとえば、白、オフホワイト、およびライトグレーは、多くの場合、モニタ上で区別することが困難です。,

#4：下線リンク

リンクを示すためにフォントの色またはフォントの太さを使用するのに多くの時間がかかります。 Deuteranomaly、protanopia、またはtritanopiaを持つ人が通常のテキストからアンカーテキストを区別することは可能かもしれませんが、コントラスト比が低いために理想的ではあり

単色の人は、テキストとアンカーテキストをまったく区別することができず、カーソルがポインタに変わるかどうかを確認するためにテキストの上にカーソルを置かなければならないでしょう。

このため、テキストリンクに下線を追加することをお勧めします。, これにより、通常のテキストとアンカーテキストをすぐに区別できます。 Engadget webサイトの例を次に示します。

#5:避けるための色の組み合わせ

特定の色の組み合わせは、コントラスト比が低いか、区別が難しいため、カラーブラインドユーザーにとって理想的ではありません。,

可能な限り、インターフェイスデザインで使用しないようにする必要がある色の組み合わせのリストは次のとおりです。

  • 緑-赤
  • 緑-青
  • 緑-茶色
  • 緑-黒
  • 緑-灰色
  • 青-灰色
  • 薄い緑-黄
  • 青-紫

ここでは、緑-緑-黄

  • 青-紫

    • ここでは、緑-緑-黄

  • 青-紫

    • 赤と青紫の色の組み合わせは、protanopiaを持つユーザーのように見えます：

    #6：プライマリボタンを際立たせる

    多くの場合、デザイナーはプライマリボタンを目立たせるために色に依存しています。, これの問題は、使用する色がカラーブラインドユーザーにとって知覚が困難である可能性があることです。

    代わりに何をすべきかは次のとおりです。

    • プライマリボタンのサイズを大きくします。
    • 異なる配置の組み合わせを試してみてください。
    • プライマリボタンとセカンダリボタンのコントラストを
    • 国、アイコン、またはフォントの重量との差別化を一次、二次ボタンを押します。

    たとえば、Reformationは主ボタンを強調するためにサイズと色を使用します。,

    Fireboxは、右下隅にプライマリボタン、左上隅にセカンダリボタンを表示します。

    #7:必須フォームフィールドをマーク

    色盲ユーザーは、フォーム上の必須フィールドを示すために色だけを使用する場合、必須フィールドとオプションフィールド

    代わりに、

    • 必須フィールドにアスタリスク（*）をマークします。
    • フィールドに必須またはオプションの単語をラベル付けします。
    • フォームからオプションフィールドを削除します。,

    結論

    カラーブラインドユーザー用のUIを設計することは、正常な視力を持つユーザーに対するサイトのアクセシビリティ

    • パターンとテクスチャを使用してグラフやチャートのコントラストを表示します。

      • パターンとテクスチャを使用して、グラフやチャートのコントラストを表示します。

        • エラーメッセージを伝えるには、色と記号を使用します。
        • カラーフィルタとスウォッチにテキストラベルを追加します。
        • 通常のテキストとアンカーテキストを区別するためにリンクに下線を引きます。,
        • 緑と赤と青と紫のような色の組み合わせが悪いのは避けてください。
        • 主ボタンを目立たせるには、サイズ、配置、またはフォントのウェイトを使用します。
        • 必須フォームフィールドにシンボル(アスタリスクなど)をマークするか、ラベルを付けます。