こんにちは！
スタートレデザイナーのMです。
印刷物やWebサイトに限らず、「文字サイズは大きいのに、なんだか読みにくい…」と感じたことはありませんか？その大きな要因のひとつが、デザインに使われているカラーのコントラスト比です。
今回はコントラスト比の重要性と、デザインを作るときの気をつけるポイントをご紹介します！
コントラスト比とは？
コントラスト比とは、色と色を比較したときに「どの程度明るさの差があるか」を数値で表したものです。わかりやすい例で言えば、文字色と背景色の関係がイメージしやすいかと思います。
このコントラスト比の数値が大きいほど読みやすく、小さいほど読みにくいとされています。またコントラスト比が低いと、読みにくいだけではなく、目が疲れやすかったり、デザインにメリハリがなくなるといったデメリットも発生します。
WCAGの基準
コントラスト比の基準として、WCAG 2.1（国際的なWebアクセシビリティのガイドライン）では以下のように示されています。
- 小さい文字（本文など） 4.5:1以上
- 大きい文字（18pt以上 or 太字14pt以上）3:1以上
- UI要素（アイコン、ボタン、フォームラベルなど） 3:1 以上
※1pt = 1.333px
※14pt = 18.5px 18pt = 24px
このことから、デザイン上で使用する本文は4.5:1、見出しに使用するテキストは3:1以上確保することが必要となります。
ちなみに、企業ロゴはブランドアイデンティティが優先されるため、この基準から除外されますが、個人的には見やすいに越したことはないと思っています。
その他、背景などにいれる装飾的なテキストや無効化されたUI（グレーアウトされたものなど）は除外とされます。
実務ではどのように気をつければいいの？
本文テキストは必ず 4.5:1 以上を確保する
本文のテキストカラーと背景色は必ず4.5:1以上確保しましょう。
指定カラーが淡い場合
ブランドカラーや指定カラーが淡い場合は、そのままテキストカラーとして使用するのは避けましょう。
濃いサブカラーを使用したり、背景に色を敷いたりしてコントラストを確保しましょう。
背景画像の上に文字を置く場合
画像の上にそのまま文字を置くのではなく、必ず半透明の黒や白などのレイヤーを敷き、コントラストを確保しましょう。
グレー系のテキストを使用する場合
本文に薄すぎるグレーは使用しないようにしましょう。白背景に本文でグレーを使用する場合は、#999999以下を避けるのがおすすめです。（#FFFに対して#999はのコントラスト比は 3.0:1程）
基本的には、本文のテキストカラーは#666以上であれば安心だと言えます。（背景が#FFFの場合）
実務で使えるチェックツール
コントラスト比を目視で確認するのは大変なので、ツールを活用するのがおすすめです。制作中やデザインレビュー時にぜひ使ってみてください。
WebAIM Contrast Checker
https://webaim.org/resources/contrastchecker/
Chrome拡張：WCAG Contrast Checker
https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf
Figmaプラグイン：Contrast
https://www.figma.com/community/plugin/748533339900865323/contrast
まとめ
コントラスト比は、Webサイトのアクセシビリティや視認性を向上させるためにとても重要な指標です。
デザインを制作する時に「本当にこのコントラスト比は適切なのか」を、今一度考えてみてはいかがでしょうか？
チェックツールなども活用して、ぜひ実務に取り入れてみてください。