web-dev-qa-db-ja.com

色覚異常の人に使用できる4レベルのパフォーマンス測定(悪い、OK、良い、素晴らしい)に使用できるHTMLの色は何ですか?

おそらく、赤緑の色覚異常をお持ちのユーザーの場合、以下の色は問題ありません。ユーザーは、読み取りとライトグリーンを区別できると思います。また、赤/ダークグリーンの場合、一方が非常に低く(<50%)、もう一方が100%であることが簡単にわかります。それが私が 色覚異常シミュレーターで見るものです

以下の充電では、基本的に4つの範囲があります(<50:=赤、50-90%=オレンジ、90-100%:薄緑、100%:濃緑)。

enter image description here

参考までに、 赤緑の色覚異常が群を抜いて最も一般的です そして、 色覚異常シミュレータがオンラインにあります。

6
Clay Nichols

特定の色のセットでこれを達成できるかどうかはわかりません。「色覚異常」という用語に分類されたさまざまな病気があるためです。

色相のみに基づく単一のスケールがすべての人に合うわけではありません。明るさの変化を最小限に抑えてください。テクスチャもお勧めします。

元の画像に基づくモックアップは次のとおりです。

Sample using colour and texture

バックグラウンド:

ほとんどの人の目には、赤、緑、青の3つの異なる色の受容体(コーン)があります。

色覚異常の最も一般的な形態は、特定の周波数の知覚が何らかの方法で欠落しているこれらの1つに欠陥があることに起因します(最低/最高の知覚可能なレベル、さまざまな輝度レベルの区別など)。

まれに、人は1種類または2種類の錐体しか持たない場合があり、二色性または単色性の視覚になります。

興味深いことに、非常に少ない割合の女性が four種類の錐体 -一般に2種類の緑色の錐体が実際にあり、一部の女性はどちらも。これらの女性は、通常よりも色の認識が優れています。たとえば、レインボーでは通常の7ではなく最大12のカラーバンドが見られます。

免責事項:私はこの分野の専門家ではありません。黄緑色の色覚異常で、データの視覚化に取り組んでいたソフトウェア開発者だけです会社。

8
Bevan

質問のタイトルですでに回答されていると思います。 just色の代わりに、パフォーマンス測定をラベルとして適用する必要もあります。つまりPoor[〜#〜] ok [〜#〜]Good、およびGreatは、チャートを強化します。

パーセンテージで、バーの下、バーの内側に配置できます。それらをy軸に配置し、x軸を横切る線を使用して、各パフォーマンスレベルの範囲を視覚的に示すことができます。

これにより、色はそれほど重要ではなくなり、各パフォーマンスレベルを最もよく表す色を選択できます。


更新

他に私が考えていたのは、グラフの背景色を0〜50、51〜89、90〜100のレベルに基づいて赤、黄色/オレンジ、緑にしながら、実際にすべてのバーを暗い色にできるということでした。 。さらにユーザーフレンドリーにするために、左側のx軸に50、90、および100行のテキストラベルを含めることができます。右側のx軸には、Poor、OK、Good、およびGreatの色領域/パフォーマンスレベルを説明するテキストラベルを含めることができます。次に、暗いバーの中に、実際のスコアを示す明るい色のテキストラベルを含めることができます。

私は先に進み、私が意味することの例を作成しました:

chart example

4
Code Maverick