こんにちは！mizuki（@kikapyon）です。
コントラスト比が何なのかは理解できているけど、どうやってデザインに生かしていけるのか？という疑問にお答えすべく、具体的な改善事例と手法をご紹介していきます。
今回は画像編とテキスト編に分けてご紹介していきます。
そもそもコントラスト比って何？という方はこちらをぜひご覧ください！
【関連記事】【初心者向け】デジタルプロダクトにおける最適なコントラスト比を考えよう
目次
コントラスト比の改善手法
コントラスト比を改善するために、ユーザビリティを無視して無理にデザインを変更する必要はありません。使いやすいデザインと美しいデザインのどちらかを選択する必要はなく、両方を意識していけば、どちらも損なわずにデザインができます。
数値を軽微に調整するだけでも、コントラスト比の改善が可能なので、ぜひ使ってみてください。
ユーザビリティを損なわず改善していくために：画像編
背景画像とテキストのコントラスト比が低い場合、認知に時間がかかってしまうため、ユーザーに読んでもらえないこともあります。少しのデザイン変更で読みやすくするために意識できることをまとめました。
意識できること
まず、テキストが装飾やロゴでない場合は、必ずコントラスト比を保ちましょう。
画像は、デザインにおいて非常に重要な役割を果たしています。多くの場合、デザイナーは画像の上にテキストを配置して、写真の目立つという側面を活用し、テキストのコンテンツを乗せて情報を伝えます。ただし、テキストと背景のコントラストが低すぎる場合には裏目に出てしまいます。
アイトラッキングの調査によると、画像がユーザーのタスクに関連している場合、人々は情報を伝える写真に惹きつけられることがわかっています。しかし、画像が純粋に装飾的に見える場合、それらは完全に無視されてしまう可能性があります。
色のコントラストに関するアクセシビリティ要件に従い、テキストのコントラスト比は、少なくとも4.5:1にする必要があります。また、W3Cによって定義されている「大きいテキスト」の場合は3:1です。
大きいテキスト とは
太字でないテキストは少なくとも18ポイント(日本語は22ポイント)以上、太字のテキストは少なくとも14ポイント(日本語は18ポイント)以上。
「引用：W3C 「コントラスト (最低限)達成基準 1.4.3 を理解する」」
軽く手を加えることで、簡単にコントラスト比を高めることができます。その改善事例をご紹介していきたいと思います。
改善事例1 背景の不透明度をあげる
色のついた背景の上にテキストを配置したい場合です。今のままだとコントラスト比が低く、ユーザーがわざわざ注視しないと文字が読みにくい状況です。
不透明度を30%から50%にわずかに上げることで、ボックス内のテキストがコントラスト比3:1に合格できました。ほんの少し数値を変えるだけでコントラスト比が変化して、グッと見やすくなります。
半透明のオーバーレイ(画像全体またはテキスト部分のみ)、ぼかし、テキストの影または輪郭、またはこれらの手法の組み合わせなどで効果を発揮します。
改善事例2 ぼかしを入れる
画像の上にテキストを配置したい場合です。写真によっては該当テキスト部分はコントラストが低いため読みにくく、他の認知しやすいアイテムが優先されてしまい、無視されるかもしれません。
写真にぼかし効果を追加すると、サイトのデザインに多少の影響がでますが、すべての画像を暗くするよりは、デザインを損なわずに改善することができます。読みやすくなることで、ユーザーに無視されずに1つのコンテンツとして認知してもらえます。
さらに、テキスト領域を画像の端に近い一定の場所に配置することで、追加するぼかしが特定領域に限定され、画像への影響が少なくなります。特に写真の下部は、ぼかし、暗くなるようなグラデーションオーバーレイ（別名「フロアフェード」）、またはテキストの半透明の色付きの背景などの追加効果に適している傾向があります。
画像を暗くすることなく、画像上のテキストを読みやすくしたいときには以上のような方法が効果的です。読みづらかった文字の背景にぼかしを入れる&色を黒にすることでパッと読みやすくなりました。
ユーザビリティを損なわずに改善していくために：テキスト編
ここまでは、画像の例を紹介してきました。ここからはテキストの改善事例をお伝えします。
改善事例 要素をすっきり見せるためにコントラスト比を下げない
昨今トレンドのミニマムなデザインは、要素を排除しシンプルに洗練された印象を与えることができます。ただし、そのデザインを使う上での注意点があります。
ページに重要なコンテンツ要素が多くある場合、デザインに対するミニマリズムなアプローチは適していません。デザイナーの妥協案として、要素のコントラストを下げることになるからです。すると一見、ページは依然として最小限に見えるようになります。
しかし、コントラスト比が低くなることで文字が認識しにくくなり、悪影響が出てきてしまいます。背景と文字に色の差が低く解読しづらいサイトは離脱したくなりますよね。
コンテンツが多いページだけどすっきり見せたい！と思って、コントラストを下げて存在感を薄くする方法は、初心者がしてしまいがちですので気をつけましょう。
NOT GOOD
GOOD
意識できること
情報密度を下げる。
テキストのコントラスト比を下げると、読みやすさが低下してしまい認知的負担が増えるだけです。代わりに、重要でないものを該当ページから削除するか、情報の表示がより簡潔になるように検討してください。
場合によっては、展開可能なアコーディオンを使用すると、ユーザーがクリックまたはタップして関心を示した場合にのみ詳細を表示することで、混乱を減らすことができます。
アコーディオンとはWEBサイトにおけるナビゲーションメニューのひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるものです。その項目を再度クリックすると、表示されていた画面はまた元のように隠れます。
「引用：アコーディオンメニューとは？メリット・デメリットも解説/アコーディオンとは」
フォントサイズを調整する。
ユーザーがWebページの文章を読み込む場合、基本的に大きなテキストが先に読まれます。一部のテキストを大きくし、他のテキストを小さくしても問題ないですが、小さくなりすぎて判読しにくくならないよう注意してください。
【関連記事】デジタルプロダクトで読みやすいフォントサイズを模索する4つの方法
アクセシビリティの色の組み合わせを確認する。
色の組み合わせが十分なコントラストを保てているかどうかをチェックしてください。フォントサイズが十分に大きい場合でも、組み合わせた色を必ず確認しましょう。
重要性の低い要素を再配置する。
コントラストの高いテキストが目立って気になる場合は、コントラスト比を下げずに画面上のテキスト配置を変えてみてください。多くの場合、要素の位置を変更したり、周りにパディングを追加したりするだけで、ページ上で目の行く箇所を変えることができます。
おわりに
いかがでしたでしょうか？
素敵なデザインを邪魔せずに、アクセシビリティを高める具体的な方法をいくつか挙げてみました。みなさんのより良いデザインに繋がれば嬉しいです。
参考文献
Ensure High Contrast for Text Over Images
Low-Contrast Text Is Not the Answer
