私たち全員がカラーコントラストチェッカーを使用する必要があるのかICHI.PROなぜ私たち全員がカラーコントラストチェッカーを使用する必要があるのか私は、ウェブサイト、アプリ、すべてのデジタルツールにすべての人がアクセスできるようにする理由を説明する必要がないことをかなり確信しています(決して想定しないでください)。それは正しいことであり、それは法律です。それでも、アクセシブルなWebおよびデジタルデザインで最も基本的で修正が簡単なことは、デザイナーが何度も何度も忘れ続けていることであり、それは私をトイレに追いやる。私たち全員がアクセシブルな色のコントラストでデザインできないのですか?マッキンゼーのウェブサイト:失敗したウェブアクセシビリティの例—色のコントラストアクセシブルなカラーコントラストとは何ですか?アクセシブルとは、使用している色とその背景が4.5:11の色比であることを意味します。2.0の下でW3Cの色のコントラストのガイドラインテキストとテキストの背景との色の違いだ(私たちは本当に言い訳を持っていないので、2008年以来の周りされています)、。WCAG2.0ガイドラインhttps://www.w3.org/TR/WCAG20/#perceivableまた、テキスト、ボタン、背景のコントラスト比についてもこれを検討することを強くお勧めします。これらのコントラストが予想外の場所で低下することもよくあります。わからない場合は、これを考える最も簡単な方法はこれです—私が設計しているこの要素は、ユーザーの理解の基礎になっていますか?それがCTAの場合、誰かに押してもらいたいと思うなら、そうだと思います。色のコントラストのテストデザインの色のコントラストを自分でテストできます。あなたは本当に言い訳がありません。それは一種の楽しみです。利用可能なツールがいくつかあります。Webエイムカラーコントラストチェッカー—これは、16進コードを入力し、(アクセス性の高い)ボタンを押して出来上がりのシンプルなWebページです。AAまたはAAAの合格または不合格。グラフィカルオブジェクトとユーザーインターフェイスコンポーネントの評価も含まれています。スケッチプラグイン—怠惰すぎてブラウザを開くことができない場合は、いくつかの異なるスケッチプラグインを利用できます。Starkプラグインの動作例を次に示します。色のコントラストと色覚異常の両方のシミュレーションがあることに気付くでしょう。色覚異常は私たちが考える必要のあるもう1つのことであり、男性の12人に1人、女性の200人に1人が何らかのレベルの色覚異常を経験しています。Photoshopの使用を主張する古い学校のデザイナーや開発者がいる場合は、色覚異常のツールが実際にプライマリナビゲーションに組み込まれていることをご存知ですか?あなたはしなかったに違いない。私たちは本当にツールを使用する必要があります色のコントラストで最も興味深いのは、完璧な色覚を持っていても、肉眼では検出できないことです。はい、上の黄色の白が誰かを解雇する必要があることは簡単にわかりますが、肉眼だけでテストするのは簡単ではない組み合わせがたくさんあります。あなたは簡単ので、あなたが作業しているパレットがアクセス可能であること(想定したことがない)と仮定ことができ、あなたがそれを見ることができます。ニュース速報:あなたはユーザーではありません。私が取り組んできた実際のプロジェクトの2つの例を紹介します。ここでは、ツールによって救われました。ケース#1-これはアクセス可能です私の目には、これにアクセスできる方法はありませんでした。UIデザイナーが選択したものを見たとき、私は軽度の心臓発作を起こしました。これは、AAアクセシビリティ要件を満たすことを実際に気にかけているクライアントのためのものでした(「私を訴えないでください」という方法だけではありません)。それで私はWebAimを起動しました、そして確かに—誰もが安堵のため息をつくことができました。ケース#2-これにはアクセスできません数年前、私は「クライアントがこれにアクセスできるかどうか尋ねる」という古典的な行を使った設計作業をメールで受け取りました(クライアントに行ってください!)。送られてきたデザインの複製。実際の設計作業ではありません。私にとって最初に目立ったのは、CTAのオレンジ色の背景にある白いテキストでした。間違いなく、CTAのテキストが「大きなテキスト」としてカウントされた場合、設計チームはそれを回避できる可能性があることが判明しました。オレンジオングリーンについて私を悩ませていることがありました。それは私には本当に活気に満ちているように見えましたが、それは私自身の視覚障害とアクセシビリティのニーズが原因である場合とそうでない場合があります(私のチームは「ダークモード」で何も表示しないことを知っています)。そこで、Photoshopファイルが送られてきたので、組み込みのシミュレーターを適用しました(上記を参照)。オレンジ/緑は赤/緑と同じです—赤/緑の色覚異常の場合と同じです。明らかに、濃い緑色の背景にオレンジ色のCTAを使用した場合、男性ユーザーの12人に1人がCTAをまったく見なかった可能性が高くなります。ユーザーが見えないものをユーザーが押さないことは誰もが知っています。私たちは何をすべきでしょうか?次のアプローチを強くお勧めします。仮定したことがない-任意の色のコントラストがカラー失明の任意のレベルとのそれらのためにアクセス可能又は適切であること。常にテストしてください。他の誰かがそれをしたと期待しないでください。教育—すべてのプロジェクトの開始時に、基本的なパレット選択レベルでもアクセシビリティ要件についてクライアントとビジュアルデザインチーム。ブランドの配色がデジタル製品やユーザーを念頭に置いて作成されることはめったになく、私が一緒に仕事をした最高のUIデザイナーでさえ、これらのツールについて知ることはめったにありません。ドキュメント-私たちはアジャイルで今生きて、最適化されたものの、ゼロドキュメントのsprintyの世界、あなたが本当に本当にプロジェクトの開始時にアクセシビリティ・ガイドラインや原則を書き留め、チームとそれらを共有する必要があります。必要に応じて、メールやSlackなど、家に持ち帰る機会を利用してください。ワイヤーフレームを設計者に説明する場合は、思い出させるために書き留めてください。設計チームが「調査」している場合は、壁全体に付箋を貼って、色のコントラストのリスクの可能性を強調します。自分でチェックしてください—すでにツールを持っています—鼻を突き刺し、サーバーまたはクラウドからデザインを取得して、自分でテストしてください。チームの他のメンバーがあなたの文章を終えるまで、適度に迷惑をかけます。アイロールの​​有無にかかわらず。彼ら、そして利害関係者チーム(そしてユーザー!)は最終的にそれを感謝します。脚注14.5:1はAAにアクセス可能です。WCAG2.1によるAAAの場合、7:1の比率が必要です。デザインシステムと未来の変化の波デザインシステムは適切なタイミングで私を魅了しました。私は長い間、デザインとコードの世界にまたがっていると感じていましたが、少し経験を積むと、より製品指向の領域に移行し、これらの世界を統合したり、それ以上のことを可能にしたりできます。関連記事あなたのページは視覚障害者にとってどの程度アクセスしやすいですか?色と画像が美的魅力において極めて重要な役割を果たし、Webサイトをよりアクセスしやすくし、ユーザーエクスペリエンスを向上させるという事実を誰もが知っています。特定の単語の強調表示から従来の色の使用まで、情報を表示するための重要な方法でもあります。デザインの世界を見ると、感情を伝えたり、コンテキストに関連性​​を追加したり、ブランド認知度を高めたりするのに役立つため、非常に強力なツールです。いくつかのステップで製品のアクセシビリティを評価する方法デジタルアクセシビリティは依然としてこの分野であり、デザインの世界では過小評価されています。ほとんどの場合、それは不明確であるか、持っているだけでいいように見えるため、設計範囲外にとどまります。著者注:この投稿は、障害のレンズを通して、私たち自身の優先順位付けフレームワークを調整する方法と、物事に置く固有の価値に焦点を当てることを目的としています。これらのテクニックがこの投稿の特定の焦点をはるかに超えて適用できるという事実に注意を向けなければ、私は失望するでしょう。Day(GAAD)です。この日は、アクセシビリティの分野で働く私たちが、障害を持つ人々の障壁を取り除くことの影響と価値にさらに注意を向けようとする日です。