はじめに
モバイルアプリやWebサイトについて「文字が読みづらい」場合、あるいは「なんか文字が見えない...」的な意見が届いた際に、どのようなアプローチで解決できるかをまとめました。
視力や色覚は人それぞれであり、また使用しているデバイスも様々です。そのため、ある人にとっては問題なく読めるテキストも、別の人にとってはそうでなかったりします。
より読みやすいテキストにするためのアプローチ
テキストを読みやすくするためには、大きく分けて以下のアプローチがあります。
- 文字を大きくする
- 文字ストロークを広くする
- 背景に対するコントラストを強化する
- 混同色を避ける
文字を大きくする
当然、小さな文字よりも大きな文字の方が読みやすくなります。文字を大きくするには、以下の方法が考えられます。
- サイズを大きくする
- ウェイトを重くする
サイズを大きくする
最も簡単なアプローチですが、画面上の情報整理やデザイナーの意見によっては難しい場合があります。
ウェイトを重くする
サイズが大きくできない場合は、ウェイトを重くすることで僅かながら文字を大きくすることができ、読みやすさを向上することができます。そもそもウェイト調整ができるように多数のウェイトを揃えているフォントを使用しておくことも重要でしょう。
文字ストロークを広くする
文字同士の間隔を広く確保することで、読みやすさを向上できます。
ただし、単純に一定のサイズを開ければいいということではなく、使用するフォントやサイズによって適切な文字ストロークは異なります。例えば、
-
<H1>なら 2.2pt -
<H2>なら 2.0pt -
<p>なら 1.6pt - ...
といったようにフォントサイズに合わせた細かな調整を行うことで、読みやすくかつ美しいバランスのテキストを提供できます。
背景に対するコントラストを強化する
背景色と文字色のコントラストは非常に大切な要素です。
コントラスト比は数値化でき、Web Content Accessibility Guidelines (WCAG) 2.0では達成基準が示されているので参考にできます。
コントラスト感度は加齢・老化に伴い低下します。先天的なものだけではありません。自分自身も低コントラストの文字が今後見にくくなる可能性があります。
WCAG 2.0
ロービジョンの人は、背景とのコントラストがないテキストを読むのが困難なことがよくある。これは、コントラストをさらに低下させる色覚異常がある人の場合、深刻となりえる。テキストとその背景との間に最低限のコントラスト比を提供することで、たとえその人があらゆる色を見ることができなくても、テキストをより読みやすくすることができる。また、まれに全く色が見えない人にも有用である。
WCAG 2.0で示されているコントラスト達成基準は、文字サイズとウェイトによって異なります。
太字でないテキストが 18 ポイント未満、太字のテキストが 14 ポイント未満の場合
→ テキスト:背景 が 4.5:1 のコントラスト比を確保する
太字でないテキストが少なくとも 18 ポイント以上、太字のテキストが少なくとも 14 ポイント以上の場合
→ テキスト:背景 が 3.0:1 のコントラスト比を確保する
上記は最低限のコントラスト基準であり、さらに高度な基準もガイドラインに定められています。
判定ツール
コントラストの達成を判定するためのツールを使うと非常に便利です。
混同色を避ける
色覚型
色の見え方が人によって異なることは、意外と普段意識していない方も少なくないでしょう。実際、自分もその1人でした。色覚はその人に固有であり、他者の色覚を認識するには専用のツールを使う必要があります。さらに、「色覚多様性」と呼ばれる人の中でもその種類（色覚型）がさらに分かれています。
「色覚多様性」は決してレアケースではなく、程度の差はあれど一般的に存在するものです。
日本人の多くを占める黄色人では男性の約 5％（ 20人に 1人） が、また白人男性の約 8％、黒人男性の 4％が、赤や緑の混じった特定の範囲の色について差を感じにくいという色覚特性を持っている。日本人女性でも約 0.2％ （500人に 1人）が、同様の色覚特性を持つ。これは日本全体では男性の約 300万人、女性の約 12万人に相当する。
混同色
それぞれの色覚型において、同じような色に見えてしまう色の組み合わせがあります。これを混同色といいます。
- 「赤系と緑系」の判別がしにくい色覚
- 「青系と黄色系」の判別がしにくい色覚
- ...
Adobe Color
「色覚多様性」に対応した色の組み合わせを見つけることは簡単ではありませんが、Adobeから無料で利用できるツールが提供されています。
まとめ
テキストをより読みやすくするために、以下のアプローチがあります。
- 文字を大きくする
- 文字ストロークを広くする
- 背景に対するコントラストを強化する
- 混同色を避ける
また、便利なツールを使って、達成度を数値化し評価することができます。
感覚や加齢の問題として「人それぞれ」としてしまうと、中途半端な改善になってしまったり、本当に問題が解決したか曖昧になってしまう可能性があります。反対に、明確な基準を持って問題に対処できると自信を持ってリリースできますし、段階的な改善の計画が立てやすくなります。
参考
Fivotのエンジニアチームがお送りするBlogです。技術の話題に限らず、それぞれのエンジニアメンバーが個人的に語りたい雑多なトピックを発信していきます。社内の雰囲気が少しでも伝われば幸いです。
Discussion