Ads by Google
新しい記事を書く事で広告が消せます。
文字の配色
自分では見やすいと思っていても意外と他の人はすごく読みづらいと感じることが多いのが背景色と文字色の配色です。
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
6つの見本を作ってみましたがどれも一般的には読みづらいと感じる配色になっています。
中には別に読みにくくないよ!という人がいるかも知れませんが、これは一文なので文章の全てがこの配色だと目がチカチカしてブログを読む気が起こらないのではないでしょうか?
この他にもたくさんの読みにくい配色はたくさんありますが、自分のブログは大丈夫と思っても意外と気がつかないのが、色覚障害(色盲)への配慮です。
色覚障害といっても赤色系だけ見にくい人、青色系だけ見にくい人、緑色系だけ見にくい人と色々な人がいます。これらを全部あわせるとなんと男性の20人に一人は色盲なんです。
せっかく何百万、何千万とあるサイトの中から自分のブログを見に来てくれたのに、読みにくいから去ってしまうなんてもったいないですよね。
見やすい配色にしようと思っても他の人が読みやすいのか読みにくいのか、なかなか自分の主観だけでは的確に判断できないし、色覚障害の人がどんな風に見えるのかがわからないのでどうすれば見やすい配色になるのか迷ってしまうと思います。

そこで「ColorSelector」という便利なソフトがあるのでこれを使って配色します。
「ColorSelector」は、一般・白内障・第一色覚・第二色覚・第三色覚の人が見やすい配色なら○、見にくい配色なら×の判定をしてくれるソフトなんです。もちろん無償です。
1.まず自分のブログを開いておいてからColorSelectorを起動させます。
2.起動したら「文字色を指定」にあるスポイトボタンをクリックします。すると上の画像の様に左に開いておいた自分のブログが表示されるので文字の所でマウスをクリックします。
3.次は「背景色を指定」のスポイトで同じ様にブログの背景色の色をとります。
4.すると右側にある判定結果に○や×がついてるので確認してみます。ここで全部○ならOKですが1つでも×があった場合、文字色か背景色を変える必要があります。
5.一番下のパレットに×がついていないものが全員に○の色なのでそこから選んで下さい。
色を決めたら実際にブログの色を変えましょう。変え方がよくわからない人は「文字・リンクの色を変えたい!」・「背景の色・画像を変えたい!」を見てみてください。
見にくい文字の配色の見本
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
あなたはこの文字が見やすいですか?ちゃんと見えますか?目が疲れませんか?
6つの見本を作ってみましたがどれも一般的には読みづらいと感じる配色になっています。
中には別に読みにくくないよ!という人がいるかも知れませんが、これは一文なので文章の全てがこの配色だと目がチカチカしてブログを読む気が起こらないのではないでしょうか?
色覚障害(色盲)への配慮
この他にもたくさんの読みにくい配色はたくさんありますが、自分のブログは大丈夫と思っても意外と気がつかないのが、色覚障害(色盲)への配慮です。
色覚障害といっても赤色系だけ見にくい人、青色系だけ見にくい人、緑色系だけ見にくい人と色々な人がいます。これらを全部あわせるとなんと男性の20人に一人は色盲なんです。
| 錐体細胞 | 名称 | 症状 | 頻度 | ||
|---|---|---|---|---|---|
| 青 | 緑 | 赤 | |||
| ○ | ○ | ○ | 正常色覚 | 症状は無い | 多数派 |
| ○ | ○ | × | 第一色覚異常 | 緑〜赤の色の見分けに問題が生ずることがある | 男性の20人に一人 |
| ○ | × | ○ | 第二色覚異常 | ||
| × | ○ | ○ | 第三色覚異常 | 症状はほとんど無い | 稀 |
| × | × | ○ | 全色盲 | 色は識別できないが視力は良好 | 稀 |
| × | ○ | × | |||
| ○ | × | × | 色が識別できず視力も低い | ||
| × | × | × | |||
せっかく何百万、何千万とあるサイトの中から自分のブログを見に来てくれたのに、読みにくいから去ってしまうなんてもったいないですよね。
見やすい配色にする
見やすい配色にしようと思っても他の人が読みやすいのか読みにくいのか、なかなか自分の主観だけでは的確に判断できないし、色覚障害の人がどんな風に見えるのかがわからないのでどうすれば見やすい配色になるのか迷ってしまうと思います。

そこで「ColorSelector」という便利なソフトがあるのでこれを使って配色します。
「ColorSelector」は、一般・白内障・第一色覚・第二色覚・第三色覚の人が見やすい配色なら○、見にくい配色なら×の判定をしてくれるソフトなんです。もちろん無償です。
ColorSelectorの使い方
1.まず自分のブログを開いておいてからColorSelectorを起動させます。
2.起動したら「文字色を指定」にあるスポイトボタンをクリックします。すると上の画像の様に左に開いておいた自分のブログが表示されるので文字の所でマウスをクリックします。
3.次は「背景色を指定」のスポイトで同じ様にブログの背景色の色をとります。
4.すると右側にある判定結果に○や×がついてるので確認してみます。ここで全部○ならOKですが1つでも×があった場合、文字色か背景色を変える必要があります。
5.一番下のパレットに×がついていないものが全員に○の色なのでそこから選んで下さい。
色を決めたら実際にブログの色を変えましょう。変え方がよくわからない人は「文字・リンクの色を変えたい!」・「背景の色・画像を変えたい!」を見てみてください。
- 関連記事 ; 画面の解像度
- 関連記事 ; パソコン・ブラウザの種類
- 関連記事 ; レイアウト
- 関連記事 ; Javaスクリプトでの違い
コメント
この記事のトラックバックURL
http://rgrg.blog61.fc2.com/tb.php/590-37a2bc24









