アクセシブルなeラーニングのためのコントラストに関する考察

原文「Contrast Considerations for Accessible E-Learning」

eラーニングは視覚的なメディアです。ゲームベースの楽しいシナリオを作るにせよ、基本的なクイズを作るにせよ、eラーニングのビジュアルデザインは体験の雰囲気を決定づけます。

アクセシブルなeラーニングをデザインする場合、コースデザインを確実にするために、さらに考慮すべき点がいくつかあります。その1つがコントラストです。

このブログでは、コントラストとは何か、なぜ重要か、誰に影響を与えるか、どのように測定するか、そしてeラーニングコースに最適なレベルについて説明します。

コントラストとは何か？

アクセシビリティの文脈でコントラストについて語るとき、それは2つの色の明るさの違いを意味します。この違いを表現するために、比率を使用します。

たとえば、白い背景に白いテキストの場合、背景と前景に差がないため、コントラスト比は1対1（1:1）となり、最も低くなります。一方、白地に黒文字の場合は、21対1（21:1）という最も高いコントラスト比になります。

最初の数字が大きいほど2つの色の間のコントラストが高くなり、その逆もまた然りです。

なぜ気にする必要があるのか？

テキストやボタンと背景のコントラストが低すぎると、学習者の中には内容が見づらい、つまり理解しにくい、操作しづらいと感じる人が出てくる可能性があります。これは、あなたがデザインしているコースの重要なポイントになり、大きな問題です。

言うまでもなく、国や企業によっては、コントラストに関するガイドラインに従うことが法的に義務付けられている場合があります。これらのガイドラインに従わない場合、訴訟に発展する可能性があります。

あなたの国で適用される法律については、こちらのリソース「Web Accessibility Laws & Policies」を参照してください。

コントラストを最適化すると、誰が得をするのか？

コントラストを最適化するようなアクセシビリティは、一部の人しか恩恵を受けられないと思われがちです。一部の学習者のために余分な努力をする価値があるのだろうかと考えがちです。しかし、実際には、これらの機能が役立つと感じる人の範囲は非常に広いのです。

最適なコントラストは、生まれつき弱視の人だけに役立つわけではありません。加齢とともに視力が低下している人や、晴れた日や暗い屋外でコンテンツを見る人にも最適です。また、視覚に障がいのない方でも、最適なコントラストで表示されるデザインは喜ばれます。目に優しいからです。

例えば、以下の画像を見てください。

左の文字が読みにくくなっているのがわかりますか？これは、コントラスト比が低すぎるため、文字が背景に溶け込んでしまっているからです。

最適なコントラストなどのアクセシビリティは、コンテンツにアクセスするために必要な人だけでなく、すべての人にとって有益な機能なのです。

理想的なコントラスト比とは？

アクセシビリティの観点からは、一般的にコントラストが高い方が良いとされています。しかし、白地に黒文字、またはその逆（21:1）のような極端なコントラストは、きつすぎて目が疲れるので避けた方がよいでしょう。

この違いがどのようなものか、ご覧ください。

もちろん、白とダークグレー以外の色を使いたい、あるいは使う必要がある場合もあるでしょう。そのような場合は、画面上のテキストのコントラスト比を4.5:1以上にすることをお勧めします。

このコントラスト比を満たしているかどうかは、どのように判断すればよいのでしょうか？その方法をご紹介します。

コントラスト比を測定する

コントラスト比は、自分の感覚を信じるだけでなく、専用のツールで測定することが重要です。視力や明るさなど、さまざまな要因で見え方が変わります。

下の例を見てください。

このスライドのコントラスト比はかなり良いように見えます。濃いピンクの背景に、白い文字がよく映えています。しかし、この色をコントラストチェッカーにかけると、コントラスト比が十分でないことがわかり、驚きました。

スクリーンショットにあるように、この色のコントラスト比は3.36:1であり、目標の4.5:1を下回っています。幸いなことに、コントラストチェッカーは、目標のコントラスト比を満たす代替色も提案してくれたので、デザインを調整するのがとても簡単になりました。

以下は、提案された色を適用した後の様子です。

この画像を並べてみると、2番目のバージョンがより良いことは容易に分かりますが、感覚でしかありません。そのため、コントラストチェッカーを使用することが不可欠なのです。

朗報は、コントラストを測定できる無料のツールがたくさんあることです。どれも微妙に機能や使用例が異なります。ここでは、筆者のお気に入りをいくつか紹介しましょう。

Polypaneはウェブアプリで、コントラスト比が十分高いかどうかを教えてくれるだけでなく、そうでない場合はいくつかの選択肢を与えてくれます。唯一の欠点は、スポイトツールがなく、HEXコードを入力しなければならないことです。
Colour Contrast Checkerは、便利なスポイトツールを使ってコントラスト比をチェックすることができるChrome拡張機能です。
Color Contrast Analyserは、Colour Contrast Checkerと似ていますが、デスクトップアプリケーションである点が異なります。PCとMacの両方で動作します。
Material Design Color Toolは、コントラスト比を確認しながら配色を調整できるウェブアプリです。まだ色を決めていないときに始めるには最適なツールです。

他にも無料のカラーコントラストアプリはたくさんあります。もし、これらのアプリに満足できない場合は、検索して他のアプリを探してみてください。

デザインに関する考慮点

コントラストに関するウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）（注1）には、圧倒されるような印象を受けるかもしれません。それは、各基準がガイドラインだけでなく、いくつかの例外も概説しているからです。

しかし、主なガイドラインを守り、例外を無視すれば、何をすべきかを簡単に思い出すことができ、学習者にとってよりよいコースにすることができます。

このことを念頭に置いて、コースをデザインする場合、コントラストに関して覚えておくべき4つの主要な事柄があります。

すべてのテキストのサイズは12以上でなければなりません。
すべてのテキストの背景とのコントラスト比は4.5:1（注2）以上でなければなりません。
コンテンツを理解するために必要なインターフェースの部分（ボタンなど）やグラフィックは、背景に対して少なくとも3:1のコントラスト比を持つ必要があります。
テキストを含まず、意味を伝えない純粋に美しいグラフィックには、コントラストの要件はありません。

これらのルールに従えば、コントラストの観点からは問題ありません。

では、例を見てみましょう。

これはメニュースライドなので、これらの四角はそれぞれクリック可能であり、したがってインターフェースの一部とみなされます。つまり、テキストがボタンの色に対して十分なコントラスト（4.5：1）を持つ必要があるだけでなく、ボタン自体も背景色に対して十分なコントラスト（3.1）を持つ必要があるのです。ボタンが接している場合は、ボタン同士のコントラスト（3:1）も必要です。この例の場合には間に空間があるので、その必要はありません。

最初からコントラストを考慮するためには、この配色設計テンプレートや、このようなアクセス可能なカラーパレットビルダーアプリを使用するとよいでしょう。