アクセシビリティデザインの基礎: 色コントラストに関する考慮点 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

色はデザインに欠かせない要素です。デザイナーは、特定のムードやメッセージを伝えようと、色相や16進コードの選択に悩まされてきました。その行動は理解できるものですが、アクセシビリティの観点から色を見始めると、カラーパレットは少し洗練されて意図的なものになり、色の選択ははるかに簡単になります。

Webアクセシビリティが魅惑的なトピックの扱いをうけたことはありません。とはいえ、それがあるべき姿とは限りません。基本的に、アクセシビリティとは、できる限り多くの人々が楽しめる体験をデザインすることであり、そこには、もっとも多くのユーザーが視認できる色の選択も含まれます。

では、自分が選択した色がアクセシブルであるかどうか、どうすれば分かるのでしょうか。すべては、色のコントラスト、そして背景色と前景色の比率によって決まります。

WCAGの色コントラストに関するガイドライン

Webデザインを完全にアクセシブルにするのは大変そうに聞こえるかもしれませんが、色コントラストをガイドに適合させるのは決して難しくはありません。実際、すぐにでも始められることです。

最初の一歩は、WebAIM Contrast Checker Toolのような色コントラストのアクセシビリティ評価ツールを使用して、使おうとしている色の評価を実行することです。色コントラストに特別な注意を払ってこなかったのであれば、問題を指摘される可能性は十分にあります。最近のUX/UIデザインの多くに共通して見られる特徴、たとえば、ライトグレーを使用して非アクティブなフィールドを示すといったデザインは、色コントラストの基準に関するWebコンテンツアクセシビリティガイドライン (WCAG) を満たさないかもしません。

WCAG 2.0レベルAAガイドラインは、米国だけでなくその他の国々でも、Webアクセシビリティの基準と見なされています。中には、一定の規模以上の組織は、これらのガイドラインに準拠するよう法的に義務付けられている地域もあります。色コントラストに関しては、テキストやテキスト画像のコントラスト比は少なくとも 4.5:1 であるべきとガイドラインに記されtいます。

このルールには、次のようないくつかの例外があります。

コントラストの比較が可能な青系のカラーパレット。

色コントラストがデザインを改善する場面

WCAGガイドラインについては、すでに多くの企業が、従うべきデザインの実践としてだけでなく、より使いやすく堅牢なデザインを実現する適切な決定を促進するものとして、利用するようになっています。

米国で最も広く使用されているチームメッセージ用プラットフォームであるSlackのデザインチームは、数年前に自社内の色に対するアプローチに疑問を抱きました。「Accessibility, a Powerful Design Tool（強力なデザインツールとしてのアクセシビリティ）」と題された記事で、SlackのUXデザイナーであるヒューバート・フローリンは、アクセシビリティ基準を満たす色のみをカラーパレットに含めるよう改めた同社の決定について説明しています。その結果、Slackは130色（そのうち32色は青系の色）のパレットをわずか計18色に縮小しました。

Slackにおける色コントラストに対するアプローチは、「色コントラストのガイドラインを満たさないものは、そもそも存在する理由がない」という考え方であるとフローリンは説明します。「要件を満たさないグレーのテキストがどこかにあるとすれば、そのテキストは一部のユーザーには見えないということになります」

そうしたユーザーは、色覚異常などの視覚障害のある人だけではありません。「屋外の太陽の当たる場所でノートパソコン使用していて、テキストが見えない人もいるでしょう。結局、見えないものをなぜ配置するのかという話になります」

フローリンの考え方は次の通りです。

サイトやデザインの一部がユーザーに見えなくても良いのであれば、そもそも何故そのデザイン要素を配置する必要があるのか？

このフレームワークは、フローリンが彼のデザインに対するアプローチを完全に見直すのを助け、体験に不可欠なデザインの側面と、たまたまそれが目にはいったユーザーのために用意しておけばよいものについて考える指針になりました。

色コントラストをこのように考えることで、フローリンと彼のチームは、使用する色、使用するタイミング、そしてその理由について論理的な決断を下せるようになりました。Slackがアップデートを一般公開したときに、特定の新機能や変更した機能に対する非難を受けるのは珍しいことではありません。しかし、Webアクセシビリティのフレームワークをを通じて、チームはデザイン決定の経緯と正当性を容易に説明することができます。

始めのうちは、色コントラストのガイドラインの順守は、企業とデザイナーの両方にとって面倒に思えるかもしれません。ガイドラインに合わせるため、企業は人気のあるカラーパレットや独自のブランドカラーの使用について見直し、適応しなければならないからです。同時に、デザイナーは、新しい制約の範囲内で創造性を発揮しなければなりません。しかし、その先に待っているのは、すべてのユーザーのためのより良いデザインと、使用すべき色に関する明確な指針です。

色コントラスト検証ツール

UXデザイナーのカラーパレットを分析して、WCAG規定の色コントラストガイドラインに準拠しているかどうかを判定できる便利なツールは、有料のものを含めて数多く存在しますが、まずは、以下の無料ツールから始めてみるとよいでしょう。

石原忍博士の色覚異常検査のスクリーンショット。

ユーザーの色の解析能力によって、作成したデザインの一部が見えない場合がある

色コントラストのガイドライン準拠は必須？

WCAGガイドラインに準拠することは必須なのか気にする人を多く見かけますが、その答えは、住んでいる場所あるいは勤務先によって異なります。

米国の連邦政府機関とその請負業者について言えば、リハビリテーション法第508条に基づき、WCAGレベル2.0のWebアクセシビリティ基準に準拠することが求められます。一方、ほとんどの民間企業においては、特定のアクセシビリティ基準に準拠することは、法的には求められていません。ただし、この回答にはやや微妙な部分があります。

というのは、米国障害者法（ADA）では、「公共施設の場所」にはアクセシビリティを導入することが定められているからです。ただし、この法には、Webサイトについての明示的な言及はありません。この法律が制定されたのが、Webサイトが一般的になる30年前だったからです。

それでも、現在、米国の多くの地域では、WebサイトがADAに基づく事業体の延長と見なされるようになりました。公共施設はアクセシビリティ基準を満たさなければなりませんから、Webの観点からは、WebサイトはWCAG基準を満たす必要があるということになります。明確に条文に記載されていないため、グレーエリアではありますが、Webアクセシビリティへの準拠はますます法的な問題とみなされるようになっています。

2019年には、障壁を取り除かずにいたとして、障害者差別を理由に起こされた企業に対する訴訟は1万件以上に上っています。これらの訴訟のうち20%は、Webサイトやモバイルアプリのアクセシビリティに関係するものです。こうした訴訟はADA、具体的にはADA Title IIIに基づいて提訴されています。Webアクセシビリティの訴訟は、スクリーンリーダーとの非互換性、キーボード操作、色コントラストなど、多様な問題に関連しています。

Webコンテンツアクセシビリティガイドライン（WCAG）2.0に準拠していれば、これらの訴訟のほとんどは回避できたかもしれません。

Dominos Pizza Ltd.は、これがどれほど重要であるかを昨年の10月に身をもって体験しました。ギレルモ・ロブレスという盲人は、スクリーンリーダーを使用してDominosのWebサイトとアプリでピザを注文できなかったことを訴え、同社に勝訴しました。それ以来、米国ではより多くの企業が、色コントラストを含めたWebアクセシビリティに真剣に取り組むようになっています。

世界の他の地域では、WCAGガイドラインへの準拠を行政が指示している場所もあります。トロントがあるカナダのオンタリオ州境北部では、従業員数が50人を超える企業は、2021年までに色コントラストを含め、WCAG 2.0レベルAAに準拠することが定められています。また、ほとんどのカナダ政府のWebサイト、銀行や金融といったより規制の厳しい業界の企業サイトは、すでにこれらの規則を順守しています。

Webアクセシビリティが法律で明確に定められていないとしても、デザイナーは、デザインのコントラストを高めてWCAGが規定する色コントラストのガイドラインを満たすことで、グレーエリアを取り除くことができます。引き続き多数の訴訟が発生するのであれば、いずれすべてのWebサイトがアクセシビリティの基準を満たさなければならなくなる日が来るかもしれません。今すぐ実践を始めて、より良いユーザー体験をつくり出すのは決して悪いアイデアではないでしょう。

Photoshopで色覚異常のソフトプルーフ

カラーユニバーサルデザイン（CUD）は、できるだけ多くのユーザーに最適な色を表示するためのガイドラインとして、一部のデザイナーが採用しているデザインシステムです。その内容は、WCAGガイドラインにほぼ沿ったものになっています。

色覚異常のあるユーザーには、赤に対する感度が低い人（P型）や緑に対する感度が低い人（D型）、さらにそのほかの色覚異常のタイプも存在し、言うまでもなく各色に対する感度のレベルもさまざまです。

このソフトプルーフの例は、元の画像 (A)、色覚以上の簡易確認 (B)、より最適化されたデザイン (C) の例を示す。

元の画像 (A)、色覚以上の簡易確認 (B)、より最適化されたデザイン (C) の例

色コントラストの規約にあまり詳しくないのであれば、デザインが色覚異常のユーザーにどのように見えるかを確認できるツールが役立ちます。ソフトプルーフは、さまざまな環境で色がどのように見えるかを確認するための方法です。以下は、PhotoshopやIllustratorのソフトプルーフを使って、デザインがCUDに準拠しているかどうかを判断する際のアドビが推奨する手順です。

  1. ドキュメントをRGBカラーモードに変換します。これにより色覚異常に対する、最も正確なソフトプルーフを得られます。
  2. （任意）元のドキュメントとソフトプルーフを同時に表示するには、Illustratorでは [ウィンドウ] > [新規ウィンドウ]、Photoshopでは [ウィンドウ] > [アレンジ] > [新規ウィンドウ] を選択します。
  3. [表示] > [校正設定] を選択し、「P型 (1型) 色覚」または「D型 (2型) 色覚」を選択します。（CUDに準拠するには、両方でドキュメントを確認します）

ソフトプルーフの結果は、色コントラストが非常に重要な理由を理解する助けになるでしょう。しかし、これはユーザーに色がどのように見えるかを探る方法のひとつにすぎません。たとえばToptalが作成した「Colorblind Web Page Filter」は、URLを入力すると、さまざまな種類の色覚異常を持つユーザーに対してWebがどのように見えるかを確認することができます。

終わりに

だいぶ技術的な内容になってしまいましたが、覚えておくべき重要なガイドラインは、ほとんどの色が 4.5：1 の色コントラストを満たす必要があるということです。

この最小比を満たす背景色と前景色を選択する習慣を身に付けることができれば、より幅広いユーザーに見てもらえるデザインを自然に作成できるようになるでしょう。デザイナーにとっては、有利なことです。

この記事はAccessibility Design 101: Color Contrast Considerations for UX Designers（著者:Sheena Lyonnais）の抄訳です