web-dev-qa-db-ja.com

色覚異常の人のために色を選ぶ手助けが必要

時間を割いてくれてありがとう:)

どの色を選ぶか迷っています。明るい黄色または明るい紫色。それは私の学校を表すので、私が使用したティールに合わせる必要があります。これは私の原色になります。私はグーグル/質問した人がいて、矛盾する答えを見つけました。

[編集]私は、色盲の人々からのRedditからのフィードバックに基づいて、紫色を紫色に修正しました。私の目標は、必ずしも誰もが黄色や紫を識別できるようにすることではありません。私の目標は、青緑と黄色または紫の間の最良のコントラストを提供することです。 [/編集]

私は記事を読みました、そしてそれは避けるべき組み合わせのリストを与えます。

  • 緑と赤

  • グリーン&ブラウン

  • 青と紫

  • グリーン&ブルー

  • ライトグリーン&イエロー

  • ブルー&グレー

  • グリーン&グレー

  • グリーン&ブラック

ティールは緑と青の一種で、黄色と紫の両方を無視するため、これらの組み合わせのうち2つを強調表示しました。

これは、Googleのマテリアルカラーヘルパーを使用した色の組み合わせへのリンクです。

もちろん色違いの提案も大歓迎です!

1
Eddy Vinck

まず、質問:特定のタイプ色覚異常をターゲットにしていますか?実際には- 色覚異常のさまざまなタイプ 、全体から部分的までの範囲。 オンラインサービス または Chromeアプリ を使用して、さまざまなタイプをシミュレートし、それらの違いを理解することができます。いくつかのタイプの色覚異常は比較的まれであり(たとえば、三色性は男性と女性の0.01%にしか影響しない)、Redditユーザーからのフィードバックが必ずしもすべてのシナリオをカバーするとは限らないため、これについて言及します。

そして今、私の答え:色のコントラストとアクセシビリティの詳細に精通していない場合、先に進む最も安全な方法は、変更できない色(学校のティール)から始めて使用することです- ColorSafe アクセス可能なWebカラーの組み合わせを作成します。他のコントラストチェッカーツールに対するColorsafeの利点は、UXが優れていることです。さまざまな変数(フォントサイズ、フォントの太さ、WCAG標準など)をリアルタイムで調整する機能。

彼らのウェブサイトが説明するように、出力に関しては:

アクセシブルなテキストの色はWCAGガイドラインで生成され、24pxまたは18pxの太字の小さいテキストの場合はコントラスト比4.5、大きいテキストの場合は3のコントラスト比を推奨しています。

これは、選択した色が国際基準に準拠していることを確信できることを意味します。

たとえば、ティールが#0c9a9aの場合、#600060、#591D77、#591D77などのパープルはすべてWCAG 2 AAに準拠しています(24px/400のウェイトテキストを使用する場合)。

"1.4.3コントラスト(最小)-レベルAAの段落を読んで、色のコントラストに関するWCAG 2.0ガイドラインの詳細を確認できます。 " WCAG 2.0ガイドライン。

1

色覚異常の私自身の経験からお話します。あなたが与えた色の組み合わせは、実際には色盲の人々が区別するのが難しい組み合わせです。つまり、薄緑色の背景の上に黄色のテキストを置くと、それらの人々はテキストをまったく見ることができません。

この疑似等色カードを見てください: http://colorvisiontesting.com/ishihara.htm -これは、たとえば、 5番目のプレート-色に障害のある人は、完璧な色覚を持つ人とは異なる数を見る。

それにもかかわらず、対照的な背景に任意の色でテキストを配置する場合(特に、明るいベージュの焦げたシエナのような白い背景に暗いテキスト)、色盲はそれを読むことに問題はありません。彼らは色の名前を識別するのに問題があるかもしれません。

したがって、複雑なロゴをデザインしたり、色を並べすぎたりすると、特定の色の組み合わせで問題が発生する可能性があります。そしてそれが秘密でない場合、あなたのプロジェクトは何ですか?

0
Mike

信頼できるコントラストチェッカーツールを使用する

WebAIM は、2色間のコントラストを識別するための優れたツールを提供します。 2つの色のどちらかまたは両方が背景色と適切なコントラストを持っているかどうかがわかります。このツールは、2つの色の明度を比較します。これは、テキストを読みやすくするための最も簡単な方法です。

問題のある色の組み合わせを避けるだけでは十分ではありません。ウェブサイトの色を選択するときは、フルカラーの失明( monochromacy )を想定する必要があります。そうすることで、すべての形態の色覚異常/色覚異常の読みやすさが保証されます。または、ペン州立大学が説明するように:

一般的に、カラースキームは、グレースケール/白黒モードで読み取ることができれば、読みやすいと見なされます。

http://accessibility.psu.edu/legibility/contrast/

0
Tim Grant