読みやすさ判定 ― 文字の色と地の色の組み合わせを比べる
案内の看板、資料、ウェブのページなどで、文字の色と地の色を決める場面があります。同じ文でも、色の組み合わせによって読みやすさが変わります。
この教材では、先に自分の目で読みやすさを答え、そのあとに数値（コントラスト比）を見ます。3つの課題で、自分の目と数値の関係を記録します。所要時間は5分ほどです。
課題 1文字の色と地の色を選んで、読みやすさを答える
文字の色と地の色を、それぞれ選んでください。同じ組み合わせで、3つの大きさの文を表示します。大きさごとに、読みやすさを答えてください。
#A7A7A5 #FFFFFF ここは小さな注記の文字です。日付や補足に使う大きさです。
色の組み合わせによって、同じ文でも読みやすさが変わります。この文は本文の大きさです。
見出しの大きさ
大きさごとに、読みやすさを選んでください。
この組み合わせのコントラスト比は です。
| 大きさ | あなたの答え | WCAG 2.2 の基準 |
|---|---|---|
| 注記（12px） | ||
| 本文（16px） | ||
| 見出し（28px・太字） |
基準は、大きな文字（18ポイント＝24px 以上、または14ポイントの太字以上）では 3:1（AA）、それ以外の文字では 4.5:1（AA）です。
課題 2読みやすくなる境目を探す
地の色を選び、文字の明るさだけをスライダーで動かします。文字は灰色で、色みはありません。本文の大きさの文が「読みやすい」と感じたところで、ボタンを押してください。押すまで数値は出しません。
#FFFFFF 色の組み合わせによって、同じ文でも読みやすさが変わります。この文は本文の大きさです。
課題 3色みは違っても、明るさが近い組み合わせ
3つの組み合わせは、文字と地の色みが大きく違います。それぞれ読みやすさを答えてください。
記録この端末での答え
答えはこの端末の中にだけ保存されます。
| 課題1 組み合わせ | — |
|---|---|
| 課題2 読みやすくなった境目 | — |
| 課題3 答え | — |
コントラスト比とは
コントラスト比は、2つの色の明るさの比を表す数値です。W3C（ウェブの標準を定める団体）の WCAG 2.2 で定義されています。1:1 から 21:1 までの値をとり、白と黒の組み合わせが 21:1 です。
計算には、色の明るさを表す「相対輝度」を使います。相対輝度は、赤・緑・青の値から、0.2126×赤＋0.7152×緑＋0.0722×青 で求めます（それぞれの値は、画面の色の値を明るさに直したもの）。明るい方の相対輝度を L1、暗い方を L2 として、(L1＋0.05)÷(L2＋0.05) がコントラスト比です。
色みの違いは、この式には入りません。課題3の組み合わせのように、色みが大きく違っても、明るさが近ければ比は小さくなります。
WCAG 2.2 の基準
- 達成基準 1.4.3（AA）: 文字のコントラスト比は 4.5:1 以上。大きな文字は 3:1 以上。
- 達成基準 1.4.6（AAA）: 文字のコントラスト比は 7:1 以上。大きな文字は 4.5:1 以上。
- 大きな文字は、18ポイント以上、または14ポイントの太字以上の文字です。CSS では 1ポイントが 1/72インチ、1px が 1/96インチなので、18ポイントは 24px にあたります。
この教材について
色彩101の「操作して学ぶ教材」の1本です。登録なしで使えます。答えはこの端末の中にだけ保存され、サーバーには送られません。数値は、画面に表示した色の値から計算しています。画面の明るさの設定や、まわりの明るさによって、見え方は変わることがあります。
参考文献
感想使ってみてどうでしたか
ご回答ありがとうございました。今後の教材づくりの参考にします。
