CousinsCarrieは通信業界で10年以上のキャリアを持つデザイナー/ライターです。この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。全人口の4%以上の人が色覚異常を持っているということをご存知でしょうか。さまざまな色覚異常やその他の視覚障害は、あなたのWebサイトのリーダビリティ(可読性)とユーザビリティに影響を与える可能性があります。どのように色が見えるかに関わらず、すべてのユーザーが利用できるようにデザインするのがあなたの責任なのです。適切なツールを使えば、こういったデザインはあなたが思っているよりも簡単にできます。アクセシビリティとは何かどのようなユーザーが見ても簡単に理解できるようなWebサイトを作るために、Webサイトのデザインに関しては数多くのアクセシビリティチェックとスタンダードがあります。アクセシビリティはオーディオや、ナビゲーション、フィードバック、テキストのプロパティ、色など広範囲に関係します。今回は最後に挙げた「色」に注目します。いうのも、これはデザインの初期段階で特定でき、問題を起こす前に修正することがもっとも簡単なものの1つだからです。色覚異常を含む様々な視覚障害は、Webサイトのような視覚的なメディアにとっては最大の問題です。Awarenessによれば、世界中の男性の12人に1人、女性の200人に1人が何らかの色覚異常を持っているということです。こちらのサイトで、色の見え方がどのように違うのかを比較したものをそれぞれのタイプの説明とともに見ることができます。アクセシビリティのガイドラインとスタンダード色に注目してアクセシビリティを考えたとき、最大の問題となるのはコントラストです。これには前面と背景の色のコントラストも、テキストの色のコントラスト(太さ、サイズを含む)も含まれ、あらゆるUIの色についてのコントラストが含まれます。色も含んだWebサイトのアクセシビリティに関するベストプラクティスをまとめたドキュメントがあります。Webコンテンツアクセシビリティガイドライン(WCAG)は現在バージョン2.1が発表されており、よりアクセシブルなWebサイトを作るために必要なものがすべて含まれています。このガイドラインについてはこちらで詳しく学ぶことができます。色に関しては、次のように薦められています。色は、ただ情報を視覚的に届けるため、行動を指示するため、レスポンスを速めるため、視覚的な要素を際立たせるために使うものではありません。色のアクセシビリティに関するベストプラクティスは以下の通りです。前面と背景の間に十分なコントラストを設定すること。これは相互に関係するあらゆるタイプの要素に適用します。情報を届けるために色と他の要素を合わせて使うこと。インタラクティブな要素、ナビゲーションをはっきりと際立たせること(マウスのホバー時に色が微妙に変わるだけでは不十分)。ラベルの色はテキストが読みやすいものにすること。エラー表示やフィードバック情報を表示するときも適用します。色に関する10のアクセシビリティツールコントラストから色の組み合わせまで、アクセシブルなパレットを組み上げるために必要なことをチェックできる便利なツールが数多くあります。ここでは、その中でも特に役に立つツールをいくつか紹介します。Checkerを使えば、背景と前面のコントラストの割合をチェックできます。4:5:1以上の割合を目指しましょう。ColorableColorableは、それぞれの色を区別している輝度の違いを使ってコントラストをテストします。基本的な色相を使うだけではなく、明るさと周囲のオブジェクトも考慮することができます。Safeを使えば、WCAGに準拠したアクセシブルなカラーパレットを作ることができます。これらのパレットがあれば、最適な読みやすさのために必要な背景とコントラストの割合を用いることができます。Guidelinesには、コンテンツが読みやすくなるような、異なる背景に対して異なる色を組み合わせたコントラストが用意されています。これを使って、明確で理解しやすい背景とテキストの組み合わせを作り出しましょう。XDとSketchのプラグインです。デザインを作成する際にアクセシビリティをテストすることができます。コントラストをテストしたり、色覚異常のケースをシミュレートしたりできるだけでなく、デザインをより良くするための色の提案も受けられます。Allはグリッド状になった巨大な色のビジュアルチャートであり、WCAGに準拠した色の組み合わせを見つけることができます。FilterにURLを入力すると、視覚的なフィルターをかけてくれるので、ページがどのように見えるのかが分かります。自分のデザインのアクセシビリティがどの程度なのかを視覚化するために大きな助けとなるでしょう。Reviewは、色のコントラストをチェックするための色見本とスポイトツールを持つアプリです。ブラウザでも使えます。ランダムに色を試して、読むのが難しいコンテンツがどのように見えるかを確認できます。ColorsColorsにはアクセシブルなWebサイトデザインのために90組の色の組み合わせがあります。それぞれの組み合わせには、サイズのガイドラインや比率も示されているので、それぞれの組み合わせがどのように機能するのかを知ることができます。アクセシブルなカラーパレットを作りたいと考えている人にとっては最高のスタート地点です。Gridを使えば、前面と背景の組み合わせがWCAGにあるコントラストについての最低基準を満たしているかをテストできます。好きな色を入力して、デザインに使うための色のグリッドを作ることもできます。まとめWebサイトのデザインには、アクセシビリティへの意識が欠かせません。あなたが色を完全に知覚できる人だとしても、一度立ち止まって、そうではない人の視点からデザインがどう見えるかについて考えてみましょう。新たなWebデザインのプロジェクトに関わるときはいつでも、アクセシビリティについて話すべきです。魅力的なWebサイトを作ったとしても、一部のユーザーがそれを見られないとしたら何の意味があるでしょうか。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。