先に結論
- 板の濃さは、背景の明るさで決まります。 白い字と暗い板なら、真っ白な背景でも58%で足りました。 中くらいの灰色で10%、それより暗い背景では板そのものが要りません。
- 目安は文字と面の明るさの比が4.5:1。 板を「薄い・濃い」で決めるのではなく、この比に届く最小の濃さを探します。
- 黄色の強調語を混ぜるなら、1〜2割濃くします。 白い字だけで決めた板の上では、黄色は3.2:1で沈んでいました。
- 板を濃くしても読めるようにならない文字色があります。板ではなく色を変える案件です。
座布団は「何のために」敷くのか
文字の後ろに敷く半透明の板を、よく「座布団」と呼びます。 いろいろな記事が「読みづらいときは座布団を敷く」と勧めていますが、どれくらい濃くすればいいかはほとんど書かれていません。 薄すぎれば意味がなく、濃すぎれば絵が黒板になります。
板の役目はひとつで、文字の下の面の明るさを、文字の明るさから引き離すことです。 白い字なら面を暗く、黒い字なら面を明るくする。 だから必要な濃さは、その場所の背景がどれだけ明るいかで決まります。 背景を見ずに「いつも50%」と決めると、明るい背景では足りず、暗い背景では無駄に濃くなります。
「引き離す」を数字にしたのがコントラスト比です。 Webのアクセシビリティ基準（WCAG AA）が通常の文字に求める4.5:1を、サムネイルにもそのまま使っています。 理由は「サムネイルがスマホで読めるかは、幅360pxで確かめる」に書きました。
測り方
白から黒まで10段の無地の背景を用意し、 サムネるが実際に使っている暗い板（#0D1220、ほぼ黒に近い紺）を敷いて、白い字が4.5:1に届く最小の不透明度を探しました。
濃さは計算ではなく、実際に描いた画素を読んで決めています。 画面上で色が混ざるときの計算と、明るさの計算は別のものさしで、 計算だけで解くと目標をわずかに外します（4.50を狙って4.45に着地した話は、上の記事に書きました）。 描いてから測れば、この差は出ません。
結果：背景の明るさと、必要な板の濃さ
| 背景 | 明るさ | 板なしの比 | 必要な濃さ |
|---|---|---|---|
#FFFFFF | 1.000 | 1.00:1 | 58% |
#E6E6E6 | 0.791 | 1.25:1 | 53% |
#CCCCCC | 0.604 | 1.61:1 | 46% |
#BCBCBC | 0.503 | 1.90:1 | 41% |
#A0A0A0 | 0.352 | 2.61:1 | 30% |
#808080 | 0.216 | 3.95:1 | 10% |
#606060 | 0.117 | 6.29:1 | 要らない |
#404040 | 0.051 | 10.37:1 | 要らない |
#202020 | 0.014 | 16.29:1 | 要らない |
#000000 | 0.000 | 21.00:1 | 要らない |
「明るさ」はWCAGの相対輝度（0〜1）、「必要な濃さ」は板の不透明度です。 白い字（#FFFFFF）と暗い板（#0D1220）の組み合わせで測りました。
表の読み方は3段階
- 明るい背景（明るさ0.5以上）：4〜6割。真っ白でも58%で届きます。6割を超える濃さは、白い字だけなら要りませんでした。
- 中くらい（0.2〜0.5）：1〜3割。ここは背景しだいで必要な濃さが大きく動きます。「いつも同じ濃さ」がいちばん外れる帯です。
- 暗い背景（0.12以下）：要らない。板を敷くと、読みやすさは変わらないまま絵が暗くなるだけです。
境目は中くらいの灰色（#808080）のあたりでした。 白い字を置いて「少し読みにくい」と感じる背景は、ちょうどこの帯にあります。 1〜3割の薄い板で足りるので、まず薄く敷いてみる価値があります。
同じ背景で、濃さだけ変えると
| 板の濃さ | 白い字の比 | 4.5:1 |
|---|---|---|
| 板なし | 1.81:1 | 届かない |
| 35% | 3.71:1 | 届かない |
| 65% | 7.78:1 | 届く |
| 90% | 14.82:1 | 届く（絵はほぼ消える） |
板なしの1.81:1は、縁取りと影を付けた状態の数字です。縁取りは比の計算に入りません（字の中の色と、字のまわりの面で測るため）。 縁取りだけでは足りない、と感じるときの正体はこれです。 35%で3.71:1まで来ますが届かず、この背景で4.5:1に届く最小は44%でした。 65%は十分すぎ、90%は絵が消えます。
黄色の強調語を混ぜるなら、1〜2割濃くする
ここが、いちばん見落としやすいところでした。 白い字の中の一語だけ黄色にする「強調語」は、サムネイルでよく使われます。 ところが白い字だけを見て板の濃さを決めると、黄色が沈みます。
| 背景 | 白だけで決めた板 | その板の上の黄色 | 黄色まで見た板 |
|---|---|---|---|
#FFFFFF | 58% | 3.17:1 | 68% |
#CCCCCC | 46% | 3.17:1 | 60% |
#A0A0A0 | 30% | 3.21:1 | 47% |
#808080 | 10% | 3.22:1 | 31% |
#606060 | 要らない | 4.39:1 | 2% |
黄色（#FFD400）は白より暗いので、白がぎりぎり4.5:1に届く板の上ではどの背景でも3.2:1前後で止まりました。 黄色まで4.5:1に乗せるには、板を10〜21ポイント濃くする必要があります。 強調語は「いちばん読ませたい一語」なので、ここが沈むと強調した意味がなくなります。板の濃さは、いちばん暗い文字色で決める。これが結論です。
もうひとつ見えたことがあります。真っ白な背景で黄色まで面倒を見ると68%になり、 サムネるが「板が主張しすぎない」線として置いている65%を超えます。 だからサムネるの板は2段構えで、まず65%以内で解き、 それで届かないときだけ90%まで踏み込みます。 濃い板は見た目としては損ですが、読めないほうが損だと決めています。
黒い字に白い板でも、形は同じ
明るい背景に墨の字（#1B2A2E）を置き、白い板を敷く組み合わせも測りました。 向きが逆になるだけで、表の形は同じです。
| 背景 | 板なしの比 | 必要な白い板 |
|---|---|---|
#FFFFFF | 14.82:1 | 要らない |
#A0A0A0 | 5.67:1 | 要らない |
#808080 | 3.75:1 | 11% |
#404040 | 1.43:1 | 41% |
#000000 | 1.42:1 | 56% |
明るい背景なら板は要らず、暗くなるほど濃い白い板が要る。 真っ黒な背景でも56%で届きました。 白い字の表を上下ひっくり返した形です。
板を濃くしても読めるようにならない色
座布団で救えるのは、はっきり明るいか、はっきり暗い文字色だけです。 明るさが真ん中あたりの色は、板の側を白と黒のどちらに振っても届きません。
鮮やかなオレンジ（#FF5A00、明るさ0.286）で試すと、 白い板は100%にしても3.13:1止まり。 暗い板は90%まで濃くしてようやく4.57:1で、絵はほぼ黒になります。 「板を濃くする」で解けないので、色そのものを変えるしかありません。 サムネるが最初に選んだ強調色のうち3つを捨てた経緯は、スマホで読めるサムネイルの記事に書いてあります。
板の見た目で、決めていること
濃さ以外に、サムネるの板で決めていることが3つあります。 どれも「板が貼ってある」と見えないようにするための工夫です。
- 縁をぼかして減衰させる。硬い縁の四角は、画面の中ほどに人工的な境界をつくります。 字の大きさの0.38倍の幅で縁を溶かしています。
- 余白は字の大きさに対する割合で。字面から0.22倍外へ広げています。 ピクセルで決めると、1280×720と3840×2160で見た目が変わるからです。
- 色は真っ黒にしない。板の色は、その配色の「いちばん暗い色」（紺・赤褐色・炭）にしています。 真っ黒の板は背景の色味から浮きます。少し色を持たせるだけで絵に馴染みます。 色を持たせたぶん板は少し明るくなるので、同じ背景で真っ黒より3〜4ポイント濃く敷く必要がありました（真っ白な背景で54%と58%）。
サムネるでは、この濃さを文字が乗る場所の画素を測って1段ごとに自動で決めています。 AIが背景に余白を残せば板はほとんど透明になり、明るく散らかっていれば濃くなります。 上の表は、その仕組みが内部でやっていることを、無地の背景で見えるようにしたものです。
今日からできること
- 文字の下の背景の明るさを見る。暗ければ板は要りません。中くらいなら1〜3割、明るければ4〜6割から始めます。
- 強調の黄色を使うなら、白い字で決めた濃さに1〜2割足す。板の濃さは、いちばん暗い文字色に合わせます。
- 縁取りは比に入らない。縁取りを太くしても足りないときは、板を敷きます。 縁取りの太さの目安は「サムネイルのフォント」に書きました。
- 板の縁はぼかす。硬い四角より、溶けた縁のほうが絵に馴染みます。
- 幅360pxに縮めて確かめる。板の濃さは大きな画面だと薄く見えます。判断は一覧の大きさで。
まとめ
- 板の濃さは背景の明るさで決まる。白い字なら、真っ白でも58%で足りた
- 中くらいの灰色で1割、それより暗ければ板は要らない
- 黄色の強調語を混ぜるなら、いちばん暗い文字色に合わせて1〜2割濃くする
- 縁取りは比に入らない。足りなければ板
- 明るさが真ん中の文字色は、板では救えない。色を変える