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