Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。

普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。

そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。

Webアクセシビリティにおけるコントラストとは？

contrast.jpg
イメージ画像 / Unsplash

*コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率のことを言います。

しかしながら、Webアクセシビリティの文脈での「コントラスト比」とは、JIS規格(JIS X8341-3:2010)で採用されているコントラスト比のことです。

具体的に言うと*「テキスト及び画像化された文字の視覚的な表現には、少なくとも4.5：1のコントラスト比がなければならない」*というルールがWebアクセシビリティの一般ルールとなっています。

JIS規格の実践で挙げられている実例を取り上げてみましょう。

良い例：コントラスト比が4.5：1以上

Webマーケティングなら、ferretにおまかせ。

上記の場合、文中で強調されている文字の赤字(＃CE0000)と背景色(＃FFFFFF)とのコントラスト比が5.8：1あり、コントラスト比が十分あるといえます。

悪い例：コントラスト比が4.5：1未満

Webマーケティングなら、ferretにおまかせ。

上記の場合、文中で強調されている文字の赤字(＃FF0000)と背景色(＃FFFFFF)とのコントラスト比が4.0：1しかなく、コントラスト比が不十分であると言えます。

一見同じように見える色でも、少し彩度が変わるだけでコントラスト比が大きく変わってしまいます。Webアクセシビリティの基本として、標準サイズの文字は「4.5：1」以上あるか、改めて確認してみましょう。

参考：
7.1.4.3 最低限のコントラストに関する達成基準 - Fujitsu Japan