デザインの話題「色のコントラスト比」



ウェブページやスマホアプリを作成している際に「少し文字が見づらいかも」と思ったことはありませんか?その原因は文字の大きさや太さ、書体の種類などいくつかあげられますが、色のコントラストもその一つです。

文字色と背景色のコントラストが弱ければ見づらく、逆に強ければ見やすくなります。文字を白や黒で縁取ればたいていは解決しますが、シンプル傾向のトレンドと逆行してしまいます。縁取らずに十分なコントラストを維持するにはどうすればよいのか。実はコントラストには基準値が定められているのです。

「テキスト及び画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる」ことができれば、色弱者の方でも読むことができ、健常者は非常に読みやすくなるのです。といってもそのコントラスト比、正直なところ算出か難しくてよく分かりません。そこで便利なソフト「カラー・コントラスト・アナライザー」を活用します。

https://weba11y.jp/tools/cca/

ここから無料でダウンロードすることができます。スポイトツールで色を吸い取るだけでコントラスト比を算出し、その数値が基準値を満たしているかどうかを表示してくれます。

みなさんも文字の大きさや太さと同時に、コントラストによる見やすさも考慮してみてはいかがでしょうか。

(Betonacox Design)