カラーブラインドに使用できる優れたカラーパレット。


13

現在、チャートを設計していますが、徐々に多くのアイテムが追加されます。アイテムの色のリスト/順序を作成します。これは、色覚異常者が各アイテムを区別するのに最も便利です。どのように/どこから始めるのですか?

回答:


14

「試行錯誤」アプローチを使用したい場合は、コンピューター画面上で色覚異常のタイプである、重度視/重度、重度/重度、三色視をシミュレートするColor Oracle(クロスプラットフォーム)という名前のツールをお勧めします。

(また、PhotoshopにはViewProof Setup(CS5には少なくとも)の下で利用できる色覚異常防止のセットアップがあります。しかし、チャートを設計しようとしている場合、Photoshopは少しやり過ぎかもしれません。)


1
先日、Photoshopの証拠として+1を試しました。かなり素晴らしい
-JamesHenare

ポイントは、テストが正しいアプローチであることです。「安全な」パレットを選択すると、不必要に制限されます。
チャールズ・スチュワート

7

どのような色覚異常に対処しようとしていますか?このリンク

http://en.wikipedia.org/wiki/Color_blindness

色覚異常のタイプに基づいて回避するさまざまな色の良いアイデアを提供する必要があります。

一般に、ブルースとグリーンの選択に依存するものを作ると危険になります。モノが純粋に単色に見える様子を確認したい場合があります。

「色覚異常」の範囲があるため、おそらくコントロールなどに冗長性があることを常に確認することも必要です(たとえば、大きな赤いボタンには、「自己破壊ボタン」というラベルをコントラストの良い色(赤に黒または赤に白)。


冗長性への良い呼びかけ
ジェームズヘナーレ

1
@ローレン:まあ、あなたはあなたの邪悪な隠れ家のためのUIを設計するときにあまり注意することはできません
...-lawndartcatcher

うん、そしてあなたはあなたの壮大な計画をテストするために5歳を雇うことを確認してください。:)
ローレン-レインステート-モニカ-イプサム

5

色覚異常には多くの種類があります。重要なのは、適切なコントラストがあることを確認することです。さらに良いのは、色だけに頼らないことです。同じ情報を常にアイテムの形、コントラスト、順序でカバーします。画像が白黒で理解しやすい場合、合格です。


技術的には多くの種類がありますが、大多数は重度または軽度の重度です。残りのほぼすべてに、原色視または原色異常があります。上記のすべてが赤緑の損失です。私が理解するように、残りのすべてのタイプ(青黄色またはモノクロ)は、人口の0.01%未満です。そのため、私は主に通常の視力と重度視(Adobeシミュレーションを使用)をターゲットにした後、プロタノピアシミュレーションを使用して少し調整します。
ジョンクームズ

赤をそれ以外の場合は使用しない色(通常はマゼンタ、またはオレンジ)に完全に置き換えると、それが役立ちます。Androidは多くのことを行いました。(または、緑を置き換えることもできます。)ただし、アイコンの一部で赤(または緑)を使用している場合、色付きのアイコンを簡単に入れ替えることはできません。(私たちにとって、私たちのレガシーアイコンはすべてモノクロにすることはできません。)スワップ可能なパレットの豪華さがあれば、deutのために個別に最適化できます。およびprot。、さらには三色盲/三色異常の3番目のオプションを追加します。スワップ可能な場合、ハイコントラストモード(暗いbgに明るいテキスト)を使用することは、多くの代替手段ですが、さらに便利です。
ジョンクームズ

4

私は色盲です。「私たち」は、「あなた」と同じように色を使用してグラフィックスが差別化されるのが好きです-私たちの世界では、あなたよりも色が少ないだけです。80/20ルールの精神における実用的な提案を以下に示します。

最初のタイプのカラーセンサー(プロト)が機能しない場合、視覚はプロトアノピックです。もし彼らが少しだけふらふらしているなら、あなたは原始異常です。他の2種類のカラーセンサーに対して繰り返し、「proto」を「deuter」または「trito」に置き換えます。(これらは1,2,3ではギリシャ語だと思います)。

実用的な機会は、第2種が他のタイプよりもはるかに一般的であるという事実から生じます。すべての男性の5%。他の人のスコアは男性で1%未満で、女性でもさらに低いです。だから私たちにとっての単純な解決策は長い道のりです-私は個人的にグラフの線の違いを見ることができるように色を自分で設定する必要はありません。(これは常に発生します)。

簡単に違いを確認できる色の小さなセットを以下に含めました。私はもっ​​と多くのものを入れようとしましたが、うまくいかなかったので、パレットをどれだけ小さくする必要があるかがわかります。

Nb。作成するユーザーエクスペリエンスでは、これらの色を名前で参照しても意味がないことを忘れないでください。私たちにとってDeuts-「あなた」は、ほとんど同じ色の不必要に複製された非常に多くの名前を発明したかのようです:-)

rgb(255、204、153)

rgb(204、204、255)

rgb(255、102、102)

rgb(139、230、2)

rgb(51、51、255)

rgb(153、153、153)

rgb(153、0、0)

rgb(51、51、51)

rgb(0、0、102)

rgb(120、102、75)


1
htmlの私が色を表示するためにコピーされたフラグメントが適切に現れていない-ので、私はもう一度試してみましょう:
ハワード・ピート

ここに行くjsfiddle.net/kgasj68o
サンタ

2

最も一般的な種類の色覚異常は、赤緑の色覚異常です(赤の検出または緑の検出の欠陥である場合がありますが、両方とも滅多にありません)。そのため、スペクトルの赤と緑の部分の区別に依存することは避けてください。(たとえば、明るい緑と明るいオレンジは、このような人々には同じように見える傾向があります。)

特に慎重になりたい場合は、青黄色の軸(非常に深い青、水色、白、シャルトルーズ、茶色)に色を配置できます。赤緑の問題はすべて、依然として青が異なることを個人に伝えることができます。黄色には緑と赤の両方のコーンをアクティブ化できるという利点があるため、どちらか一方に問題がある場合は、まだ十分に見えます。代わりに、明るさが増加する部分(赤->黄->白など)がほとんどの人に見えます。ただし、赤が黒と異なると想定しないでください。


2

Firefoxにはいくつかのツールがあります

Afaik、いくつかのガイドラインがある証明書もあります。私は自分の論文を調べましたが、まだ見つけていません。Googleはきっと、あなたの国で利用できるさまざまな証明書について何かを伝えます。


2

具体的な例やハウツーを見つけるのが難しいため、これを復活させています。

シミュレータを使用して、この目標を達成することができます。ジュウテロノピアをターゲットにすると、大部分がカバーされ、プロタノピアもほぼすべての人がサポートされることに注意してください。(残りは人口の0.01%未満だと思います。)

Illustratorなどのアドビ製品には非常に役立つシミュレーターがあり(新しいウィンドウを開いて[表示]> [プルーフセットアップ]> [色覚異常...]を選択)、色を微調整すると同時にライブレンディションを即座に表示できます。また、Color Contrast Analyzerのような無料のスタンドアロンツールもあります。

以下は、6色パレット(6番目の色は両方ではなく赤またはマゼンタ)と両方のシミュレーションを示すIllustratorのサンプルスクリーンショットです。左下は、統計的に最も重要なものです。

この場合、紫はわずかにしか役に立たないことに注意してください(非常に色あせており、それでも青やマゼンタとのコントラストが低い)。また、「最も安全な」オプション(赤に代わるフルマゼンタ)はかなりうるさい場合があります。CVDのほとんどの人にとって、赤と緑の彩度/明るさを微調整することで、はっきりとしたコントラストを得ることができます。

うまくいけば色セーフなパレット

(このパレット/画像全体を再利用する前に、私に確認してください。)

HSLカラースペースを使用することを強くお勧めします。HSB(別名HSV)も非常にフレンドリーで、特にRGBやCMYKと比較します。(FYI、H色相値のみが2つのシステムで同一です。)ここでは、各列は単一の色相番号を使用します。Adobeから、またはcolorizer.orgの優れたツールを使用して、後でRGBコードをいつでも抽出できます。残念ながら、16進数のRGBコードはプログラマなどによって最も簡潔で直接使用できますが、CSSで作業している場合はHSLを直接サポートしています(はい)。

ここでの青の彩度は、(a)より穏やかなリンク/ボタンの色であり、(b)これらの十分に彩度の高いマゼンタと紫とより対照的になるように意図的に低くなっています。列内の主な変化は明るさですが、彩度の変化もある程度回避できます。


1

Photoshopを使用していない場合、または上記のカラーブラインドプルーフビューを持たない以前のバージョンを使用している場合は、グレースケールに変換してデザインの明るさのコントラストを確認できます。または、PSの以前のバージョンの場合、彩度を完全に下げた色相および彩度レイヤー、または黒から白をグラデーションとして使用するグラデーションマップを使用できます。そのレイヤーをドキュメントの最上位レイヤーとして配置し、コントラストを確認するたびにオンにします。グラデーションマップは、明るさの点で互いにどの色が対比されるかという点ではより正確ですが(彩度を下げるだけの場合よりも赤が少し明るくなります)、デザインの問題のある領域を示すことができるため、グラデーションマップを好みます。そのビューでページが正常に表示される限り、色覚異常のユーザーでも問題ありません。


0

ここに画像の説明を入力してください

図1:石原colorblindednessテスト

同様の質問に少し答えました。

色覚異常のユーザーに提供するカラーパレットの優れたソースは何ですか?

基本的な結果は次のとおりです。ユーザーベースの特定の色覚異常体験(かなりのばらつきがあるため)は調査する価値があります。あなたのパレットは、色盲の目を通して見えるものから進化するでしょう。

写真関連:

色盲対三色


しかし、ある種の色覚異常がどれほど一般的であるかを考えると、便利なパレットをリストしているだけのウェブサイトがないのは奇妙に思えます。毎回車輪を再発明するような気がします。
ダンブルダード

0

私はすでにこの質問に答えましたが、私はこれを見つけました:

http://disturbmedia.com/max/colour-blindness.html

...これは特にyrタスクに適していると思われる色覚異常シミュレータです。私はそれを見て、色盲に対して非常に悪いと感じたので、思いやりのないパレットも考えなければならなかった。本当に-私は完全に冗談ではありません。ご覧ください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.