UXスタック交換バッジにアクセスできるようにするにはどうすればよいですか？
Stack Exchangeでは、3つの主要なバッジタイプ（ブロンズ、シルバー、ゴールド）が色だけで区別されます。これは、色覚異常に関連する問題を抱えるユーザーがバッジタイプを特定するのが難しいでしょう。
WCAG 2.0 SC＃1.4.1によると
画像の色の違い（または他の非テキスト形式）を介して情報が伝達される場合、色が不足しているユーザーには色が表示されない可能性があります。この場合、別の視覚的手段を通じて色で伝えられた情報を提供することにより、色を見ることができないユーザーでも情報を知覚できるようになります。
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
それで私の質問は、それをよりアクセシブルにするために私たちは何ができるでしょうか？
3つのバッジタイプに異なるアイコンを使用しますか？ 3つすべてに同じ星のアイコンを使用する代わりに
色が伝える主な情報は、さまざまなタイプがあることだけでなく、タイプによってさまざまな難易度があることです
ブロンズ<シルバー<ゴールドのメタファーは古くから使用されてきたため、新しいシンボルはエスカレーションの感覚を伝えようとする必要があります。
編集：GammaGamesとWoodrow Barlowからのコメントのおかげで、ここに小さなモックアップがあります。これは、誰かの名前の横にあるときの前景と背景の間の色のコントラストも少ないものです。
あるアイテムの優先度を他のアイテムよりも優先して伝えたい場合、2つの明白な異なるアプローチがあります。
- サイズ
- 量
1つが他よりも「大きい」場合、他よりも優先されます。同様に、あるものが他よりも多い場合、理論的にはそれがより望ましいものになります。
サイズ
量
サイズオプションは異なる解像度に対してよりスケーラブルですが、そのオプションはメダルが与えられたり、単独で表示されたりするとあまりうまく機能しません。そのため、「数量」オプションをお勧めします。明らかに、それは使用される星である必要はありません、
Graphic Design SEには独特の形のバッジがあることに気づきました。 https://graphicdesign.stackexchange.com/help/badges
そこで、線に沿ってモックアップを作り、色のコントラストを上げました。白い背景に対してはっきりと見えるようになり、非テキストコントラストガイドラインに適合しています。
グラフィックデザインSEバッジ：
結構難しいですが、金ならカップ、銀ならメダル、ブロンズならコインでもいいと思います。それらは重要性の階層を伝えるかもしれません。 
ここでは対処が必要な大きな問題はありません
人々がこのようなアクセシビリティの問題について考えているのはうれしいことです。ウェブサイトをアクセシブルにすることが重要ですが、画像に最も一般的な色覚異常の形式を含めない理由がわかりません。色覚異常症と第1色盲（赤緑の色覚異常）で見た場合、色は通常の視覚と同じように区別できます。赤緑の色覚異常のさまざまな形態が、すべての色覚異常の約95％を占めています。さらに、Tritanopia（青黄色の色覚異常）の画像からわかるように、色は区別できます。それらの間で、これらの状態は色覚異常状態の圧倒的大多数を占めており、それらのアクセシビリティの問題はありません。
単色性（または色覚異常）のみに問題があります。これらは非常にまれな状態で、発生率は約30,000です。この場合、バッジのコントラストが不十分で、銀と金の区別が不十分であるという問題があります。 これは、コントラストを上げるために色を少し調整するだけで解決できます。色覚異常は通常、追加の視覚的問題、特に小さな詳細を区別する能力を制限する視覚的正確さの問題と、既に小さなバッジの変更された細かい詳細を含む解決策を伴うことも注目に値しますアイコンが実際に役立つ可能性は低いです。
最後に、さまざまなプログラム（私はColor Oracleを使用しています）が色覚異常の影響を概算しますが、変更が行われたときに、これらの問題に実際に苦しんでいる人々とテストして、ソリューションが実際に確実に行われるようにすることが重要です。助けて。
私は or.meta.seの回答 2019年6月11日を提供しました。色覚異常に対応するように変更することは難しくありません。私の質問には my meta.se answer を指すリンクがあります。そこで、 Music.se や Graphic Design.se などのサイトでさまざまな形のバッジが使用されていることを説明します。
ELL.se および Gaming.se サイトで行われたように、異なる形状に加えて、同じバッジに異なる色合いと色を使用することもできます。
これらのリンクは、バッジの設計に関する追加の考慮事項と、支援に利用できるStack Exchangeサポートスタッフを提供します。 8ビットツリーについて この質問のコメントにあるように、満たすべきガイドラインがあります。
デザインの1つの要素を修正する場合、他の要素を破損したままにしてはならず、別の修正が必要になります。色覚異常に対応する一方で、近視も考慮する必要があります。フォントサイズはあまりにも多くの要素を調整することができますが、誰にとっても明確ではありません。
私たちはこのサイトの星が好きなので、ここに私の提案があります：
@Aveがスケーリングについて尋ねたコメントユーザーの中で、これは小さなバージョンです。携帯電話でGIMPオンライン（Lancos3）を使用して再スケーリングしました。間違いなく、より優れたアルゴリズムがあります。
どちらのデザインを選択するかに関係なく、私の答えは、Stack Exchangeネットワークでの以前の作業とデザインの考慮事項へのリンクを含めることで、既存の答えに価値を追加すると考えています。
Stack Exchangeの現状では、aria-hidden = "true"とタグ付けされているため、オーディオスクリーンリーダーのユーザーは、色付き（色付き）のアイコンを聞くことはありません。
ただし、視覚障害のあるすべてのユーザーがスクリーンリーダーを使用するわけではありません（つまり、男性の8％が赤/緑の失明です）。また、これはアクセシビリティの問題だけに限定されているわけではないことにも注意してください。明るい日光の下でラップトップ、モバイルデバイス、またはテレビを使用してみてください。
WCAGガイドラインは、最小コントラスト比などのルールを指定したり、意味を伝えるために色（色）だけを使用しないなどのベストプラクティスを行ったりして役割を果たします。 WCAGはまた、テクノロジーに基づいて各ガイドラインに合格する方法についての提案も提供します。
ただし、これまでのところ、WCAGは、出産後の永続的な状態であろうと、事故による永続的な状態であろうと、腕を壊したことによる一時的な状態であろうと、明るい日光の下での一時的な状態であろうと、ソリューションが可能な限り広い範囲の人間の制限によって確実に使用できるようにします。ディスプレイデバイス。
設計者が設計における人間の制限の範囲について考えていない場合、開発者が設計をアクセシブルなソリューションに変えることを期待しないでください。
バッジの場合は、アイコンの形状を変更したり、色の彩度を変更したりして、ゴールドの彩度を最も高く、ブロンズの彩度を最も低くすることができます（ブロンズは、で定義されている最小コントラスト比を満たす必要があることを思い出してください） WCAG）-簡単なテストは、ソリューションまたはデザインをカラーではなくグレースケールで印刷し、ブロンズ、シルバー、ゴールドの明確なグレーの濃淡をはっきりと確認できることを確認します。ブロンズは最も明るいグレーで、ゴールドは最も暗いグレーです。