ボタンとアイコンのコントラストに関するwcag 2.0ガイドラインを解釈する方法
W3Cのアクセシビリティガイドラインは、誰もが読めるテキストを作成するためのきちんとした使用可能なガイドラインを提供します。コントラストレベルをチェックするための非常に便利なツールがいくつかあるので、少なくとも基本をAAレベルに準拠させることは非常に簡単です。
ただし、ボタン、アイコン、その他の視覚的コントロールをどのように処理するかは、テキストからは明確になりません。これらはテキストとは異なり、使用方法も異なります。このため、ここではコントラストについてより寛大にできる可能性があると思います。
もちろん、安全を確保したい場合は、4.5のコントラスト比を目標にすることもできます。ただし、通常、私たちは物事をきれいにして、単に最低限の共通点をアクセスできるようにしようとはしません。また、すべての視覚的コントラストが高いと、特に雑然としているユーザーインターフェイスでは、使いやすさが低下します。
私は通常、指導のために大物を見る。 Apple、Facebook、Microsoftなどは通常、それらがアクセス可能であることを確認します。たとえば、適切なコントラストでテキストとリンクを設定します。ただし、これらの2つのショットはiOS7からのものです。
iOS7電卓のスクリーンショット
iOS7設定のスクリーンショット
ボタンのオレンジから白のコントラストは、大きなテキストの場合でも、AAレベルに準拠していません。多くの人にとって、それがボタン上にある標識を区別するのを難しくするだろうと私は思ったでしょう。スライダーのグリーンも同様です。それは多くの人にとって使いにくいと思いませんか？ iOS設定のコントラスト増加オプションは、これらにまったく影響しません。オン/オフスライダーに「ラベル」オプションを提供しますが、コントラストはほとんどありません。これを「解決」する唯一の方法は、反転色に切り替えることです。
それで、WCAGはこれについて曖昧です。設計チームがアクセシブルなボタンとアイコンを作成するためのベンチマークをどのように設定しますか？
テキストがボタンに表示されるかビデオに表示されるかに関係なく、テキストが適用されるガイドライン無条件を解釈しました。ボタンは、3Dの境界線、影、グラデーションの背景を持つ可能性が高いため、テキストボックスとは異なります。ただし、コントラストの評価に適用されるのは背景色のみです。
残念ながら、すべてのコントラスト評価ツールは非常に古くなっています。グラデーション、透明なレイヤー、画像の背景はサポートしていません。
ポストスクリプト：私のiOS 7での経験は、それが以前のバージョンと同様にユーザビリティガイドラインに準拠していないことを示唆しています。フラットなデザインによるスキューモーフィズムの拒否により、距離と視覚的な重要性を決定するためのいくつかの重要な2D手法が削除された可能性があります。
4年が経ちましたが、これは依然として非常に重要な問題です。
この文脈での混乱に共感できます。
私が経験で気付いたのは、オペレーティングシステム内にインストールされたアプリケーションは、ホスト（OS）がアクセシビリティモードに設定されている場合にのみ適切な結果を生成する必要があるということです。したがって、デフォルトでは、何でも起こります。特別なニーズを持つ個人がOSの適切な設定を有効にし、すべてのアプリが必要な調整も行うと想定されています。
とはいえ、Androidを使用して、OSに試してもらい、見栄えをよくするだけでなく、さまざまなスキンを設計しました。おそらくオプションだと思いますが、常にそのコントロールが欲しい。
ウェブサイトにはまだそのような贅沢はありません。おそらくいつか、すべてのブラウザがOSでアクセシビリティ設定が有効になっているかどうかを検出し、適切なCSSをトリガーできるようになるでしょう。しかし、現時点では、UIがすべてのユーザーに準拠していることを確認することが重要です。
また、色だけでなくスケールも重要です。必要なコントラスト比は、物が大きくなるにつれて減少します。たとえば、テキスト... 14pxテキストのコントラスト比は16pxテキストよりも高いです。
同じロジックをアイコンに適用します。 20pxアイコンを20pxテキストと同じように扱います。
乾杯。