色と文字の選び方 | 情報の基礎: プログラミングとデータ

読めないスライド

発表のスライドを作りました。白い背景に、うすい灰色の文字です。おしゃれだと思いました。

でも、教室の後ろの席からは、ほとんど読めません。プロジェクターの光では、さらにうすく見えます。

今日は、だれにでも読みやすい色と文字の選び方を学びます。

ことば	いみ	れい
背景色	文字の後ろに広がる色のことです。	白いスライド
文字色	文字そのものの色のことです。	黒い文字
コントラスト	二つの色の明るさの差のことです。差が大きいほど読みやすくなります。	白と黒は差が大きい
コントラスト比	その差を数字にしたものです。1から21までです。	白と黒は21
ゴシック体	線の太さが同じで、画面で読みやすい文字です。	スマホの文字
明朝体	線に強弱があり、長い文章に向く文字です。	小説の本文

学生が入力するセルは、このプレビューでは空白です。

コード: web

<p class="a">A 黒い文字: 夏祭りのお知らせ</p>
<p class="b">B こい灰色の文字: 夏祭りのお知らせ</p>
<p class="c">C うすい灰色の文字: 夏祭りのお知らせ</p>
<p class="d">D とてもうすい文字: 夏祭りのお知らせ</p>

読みやすさは、感覚だけで決めなくても大丈夫です。

二つの色の明るさの差は、コントラスト比という数字で表せます。白と黒がいちばん大きく、21です。

世界で使われている目安では、ふつうの大きさの文字は4.5以上にします。

学生が入力するセルは、このプレビューでは空白です。

やってみよう

3問

挑戦してみましょう。回答はここで採点され、その後は保存されません。点数を残したい場合や、続きから再開したい場合はログインしてください。ログインして点数を保存

答えはここで採点され、保存されません。アカウントがあれば、結果が残ります。

学生が入力するセルは、このプレビューでは空白です。

注意

黄色の背景に白い文字は、明るい色どうしなので、読めません。赤と緑は、色がちがっても、明るさが近くて読みにくい組み合わせです。

画面で読む文字は、ゴシック体が読みやすいです。長い文章を紙で読むなら、明朝体もよく使われます。

大きさは、スマホなら本文を16ピクセル以上にします。小さい文字は、目の疲れのもとです。

行と行の間も、少しあけると読みやすくなります。