【初心者向け】デジタルプロダクトにおける最適なコントラスト比を考えよう

kikawa mizuki

UIデザイナー

2022.12.01

この記事は約9分で読めます。

こんにちは！mizuki（@kikapyon）です。

デザインをしていてなんだか見にくいな、はっきりしないなという時ありますよね。今回はなんとなく見にくいデザインを改善できるコントラスト比について解説したいと思います。

コントラスト比という概念を知り、ここを押さえるだけでこんなにも見やすさが違うんだと驚きました。とても重要な知識だと思ったので、集めた論文や記事と共に紹介していきます。

そもそもコントラスト比とは？

まず前提として、コントラスト比は何なのかについて詳しく紹介します。

コントラスト比は画面内の「白（最大輝度）」と「黒（最小輝度）」の輝度比である。

色覚異常は非常に多様であるため、定量的なデータに基づく (コントラストのための) 有効で一般的な色の組み合わせを規定することは、実現不可能である。十分な輝度コントラストを要求することは、色の知覚から独立したコントラストを要求することによって、これに対応している。

簡単に言うと、コントラストは色の対比のことです。差が大きければ大きいほど、コントラストも高くなります。

つまり「見やすさ」を色の組み合わせで定義することは、色盲の種類などによって個人差が大きく難しいのですが、コントラスト比として数値化することで、見やすさを示す一定の規定ができた！ということです。

コントラスト比の基準にはカラーとテキストサイズの２つがあります。それぞれ紹介します。

3:1 のコントラスト比
標準的なテキスト及び視力において推奨されている最低限のレベルである。
4.5:1 のコントラスト比
約 20/40 (0.5) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、選択された比率。(20/40 (0.5) は約 4.5:1 と計算される)。中度の弱い視力、先天的又は後天的な色覚異常、もしくは典型的な加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮するためにこの規定で使用される。
7:1 のコントラスト比
約 20/80 (0.25) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、選択された比率。7:1 のレベルは、一般に支援技術を使用していないロービジョンの利用者によって経験されるコントラスト感度の低下に対する補償を提供し、同様に色覚異常の利用者に対してもコントラストの強化を提供するレベル。

小さいテキスト
太字でないテキストは18ポイント(日本語は22ポイント)未満、太字のテキストは14ポイント(日本語は18ポイント)未満。
大きいテキスト
太字でないテキストは少なくとも18ポイント(日本語は22ポイント)以上、太字のテキストは少なくとも14ポイント(日本語は18ポイント)以上。

ただし、装飾及び情報を伝えないテキストは含まれません。
例：背景デザインとしてとても淡い文字で単語がランダムに並んでいるなど。（デザインの一部）

サイズの大きいテキスト及び文字の線幅が広めのテキストは、低めのコントラストでも読みやすいため、より大きいテキストに対して求められるコントラスト要件は、より低い。

見やすさと見つけやすさが低下しますページ上の要素を認識できないと、その要素を使用できません。もし認知できたとしてもコントラストの低い要素は目立ちません。
読みやすさが損なわれますコントラストが低すぎると、ユーザーはテキストを解読しようとするため、眼精疲労を感じます。さらに、人々は読みにくいテキストをあまり信頼しないことが分かっています。
モバイルの使用はさらに困難になります明るい太陽の下を歩きながら、モバイルデバイスでコントラストの低いテキストを読もうとしているところを想像してみてください。コントラストの高いテキストでも、まぶしさがあると読みにくくなりますが、コントラストの低いテキストの場合はほぼ不可能です。
ユーザーの信頼度が低下します
現代的なWebサイトでタスクを行うことができない時、多くのユーザーが「文字が見えない」「文字を読むのに苦労する」と自分を責めていることが分かります。文字が見づらく読むことにストレスを感じる場合にもその場を離脱する可能性が高くなります。

障害ユーザーやロービジョンユーザーが見にくい・読みにくいだけでなく、直射日光が当たる場面などの環境によっては健常者にも悪影響がある場合もあります。決して他人事ではない問題ですね。

ですが、逆に言えばコントラスト比を活用し、ユーザーが文章を読みやすい快適なページを作ることができます。