文字と背景の配色
ページ上の配色について、補色や閲覧者の目につかれない色の関係を意識しましょう。
1.
ページ構成において文字と背景の色の関係は非常に重要です。まず読める配色、次に読みやすい配色を考えていきましょう。
例）
あいうえお
パターン1
背景：#FFFFFF
文字：#00000
あいうえお
パターン2
背景：#00000
文字：#FFFFFF
あいうえお
パターン3
背景：#FF000
文字：#FFFFFF
あいうえお
パターン4
背景：#FFFF00
文字：#000000
あいうえお
パターン5
背景：#000FF
文字：#FFFFFF
どのパターンもメリハリが効いていて文字の視認率は良いですが、逆に言うと目も疲れるはずです。例）のように短文ならば問題ないですが、長文を掲載し、読んでもらうためには、以下の例のように文字の色もしくは背景の色調を下げると良いでしょう。
例）目にやさしい配色
あいうえお
パターン1-a
背景：#FFFFFF
文字：#33333
あいうえお
パターン2-a
背景：#33333
文字：#CCCCC
あいうえお
パターン3-a
背景：#99000
文字：#CCCCCC
あいうえお
パターン4-a
背景：#FFFF99
文字：#333333
あいうえお
パターン5-a
背景：#003399
文字：#FFFFFF
本文中の文字指定色（BODY TEXT）には、原則的に白または黒に近い色を使用して、背景色を（BG COLOR）決定していくことをお勧めします。
どうしても文字に色を入れたい場合は『補色』の関係について、多少理解しておくことをお勧めします。
例）補色
あいうえお
補色1-a
背景：#FF0000
文字：#0000FF
あいうえお
補色1-b
背景：#0000FF
文字：#FF0000
あいうえお
補色2-a
背景：#9900FF
文字：#FF0000
あいうえお
補色2-b
背景：#FF0000
文字：#9900FF
あいうえお
補色3-a
背景：#006600
文字：#FF3300
あいうえお
補色3-b
背景：#FF3300
文字：#006600
難しく説明すると、補色とは色相環（色を一定の規則に基づき、輪のように配置した図）において対局に位置する色のことで、通常デザインにおいてタブーとされる配色です。
上記の補色1〜3は、いわゆる『きつい』配色です。
この補色の関係が成り立ってしまうような配色では、どんなにすばらしい文章や論文を掲載しても、目が疲れてしまい誰も読んでくれないでしょう。
以 上