ウェブデザインで可読性を考慮した背景と文字の色の組み合わせ方

ホワイトの背景にブラックの文字、ブラックの背景にホワイトの文字の組み合わせがベストでしょうか？

ウェブデザインにおいて、背景と文字の色の組み合わせ方で可読性を考慮するきっけかになるスタディをDevloungeから紹介します。

Color Choices for Better Readability

ホワイトとブラックの背景色と文字色のスタディ

ホワイトとブラックを使用したコントラストのスタディです。
上段の1と3はホワイトに#ffffff、ブラックに#000000を使用しており、最も高いコントラストをもっています。

下段の2と4はそれより若干低いコントラストになっています。

上記をモニター越しに見ると、下段の方がより読みやすく、デザイナーがホワイトの背景の場合に文字の色を#000000ではなく、#333333を使用したくなるのも頷けます。

カラフルの背景色と文字色のスタディ

※訳者注：オレンジの箇所のテキストが間違ってますが、そのまま掲載しています。

左と右を比べた場合、左のボックスの方に目を奪われると思います。しかし、このボックスタイプは長いパラグラフのテキストには向かないでしょう。

バナーをはじめ、広告などはこのボックスタイプを念頭におくとよいかもしれません。