デザイナーもエンジニアも知ってほしいコントラスト比について

こんにちは森田です。
今回はデザイナーもエンジニアも知ってほしいコントラスト比についての話です。

Web サイトを見ていて文字色が薄かったり見えにくかったりした時はないでしょうか？
例えば背景が画像であったり、文字がグラデーションで一部が読みにくいこともあると思います。
その様なサイトは色覚異常（ロービジョン）の方は文字が見えていない可能性があります。

どんな方でもサイトを見れるようにコントラスト比を意識してみましょう。

コントラスト比について

ここで話すコントラスト比とは背景色と文字色の輝度の差のことです。
表記は「21:1」や「3:1」などと比率で表記されます。

このコントラスト比についてのガイドラインがアクセシビリティの国際規格であるWCAG(Web Content Accessibility Guidelines) にて定められています。

達成基準 1.4.3: コントラスト (最低限)を理解する

コントラストについては WCAG 達成基準 1.4.3 (レベルAA)にて定められています。

参考：達成基準 1.4.3: コントラスト (最低限)を理解する

達成基準 1.4.3 コントラスト (最低限) (レベル AA): テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く:

大きな文字
サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

https://waic.jp/docs/WCAG21/Understanding/contrast-minimum

そして「大きな文字」とは

サイズの大きな (テキスト) (large scale (text))
少なくとも 18 ポイント、又は 14 ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。

https://waic.jp/docs/WCAG21/Understanding/contrast-minimum#dfn-large-scale

14ポイントと18ポイントは約 18.5px と 24px に相当するとのことで、要約しますと

文字サイズ24px以下はコントラスト比 4.5:1 以上
文字サイズ24px以上、または18.5px以上の太字はコントラスト比 3:1 以上

ということになります。

24以上の文字は見出し以外ではあまり使わないのでコントラスト比 4.5:1 以上を意識すれば良さそうです。

※ より高い基準のレベルAAAになるとコントラスト比 7:1 になりますが今回は最低限の基準での数値です。

確認方法

コントラスト比は当然肉眼ではわからないので、ツールを使って確認します。

アプリで確認する

アプリでは Contrast というアプリが簡単でオススメです。

私が購入した時は有料アプリだったのですが無料になったようです。
迷わずインストールしていい良アプリです！

メニューバーからいつでもカラーピッカーで2つの色のコントラスト比を比べることがきます。
コントラスト比とAA＋など達成レベルも表示してくれます。

ブラウザで確認する

ブラウザでもコントラスト比を確認するツールは沢山あります。
こちらのサイトは達成レベルも表示されて分かりやすいです。

色のコントラストチェッカー

まとめ

もしもコントラスト比が足りてないデザインを実装していたら、デザイン通りに作るのではなくコントラスト比についてデザイナーに改善案を出してみてみるのも良いと考えます。
（もちろん色々と事情があって対応していない場合もあるので全てのサイトで必ずやろうとは言えませんが…）

昨今はダークモードなどもありコントラストのパターンも色々と考慮しないといけない場面が増えていると感じます。
ダークモードについて弊社デザイナー今西がの考察記事を書いておりますので、こちらもご覧いただけると幸いです。

関連リンク

• 達成基準 1.4.3: コントラスト (最低限)を理解する
• Contrast – Guide