サムネイルの文字はどのくらいのコントラスト比が必要？

文字と背景の間で 4.5:1 以上を目指してください。通常のウェブテキストのアクセシビリティの最低基準です。大きく太い文字なら 3:1 でも機能しますが、写真の上では高い方が安全です。

明るい色はクリックを増やす？

明るい色が役立つのは、フィードや画像の他の部分とコントラストを生むときだけです。落ち着いた背景に鮮やかなアクセントを1つ置くのが通常最も効果的です。

ダークモードで機能するサムネイルにするには？

黒い枠や暗すぎる縁を避け、平均の明るさを約 22% 以上に保ち、ほぼ黒の背景に対して画像の縁を確認します。

RMS コントラストとは？

画像の輝度の標準偏差です。0.20 以上なら、縮小しても残る強い明暗の変化があることを意味します。

色覚特性への配慮はどう確認する？

色覚シミュレーションと、何より重要なグレースケール表示を使います。被写体が明るさだけで分離していれば、ほぼ誰にでも機能します。

どのカラースペースで書き出すべき？

sRGB です。他のプロファイルはブラウザやアプリで予測できない変換をされることがあります。

サムネイルの色とコントラスト：ダークモード、ライトモード、グレースケールテスト

要点

色よりコントラストが重要です。平均の明るさを約 22%〜80% に保って暗いフィードや明るいフィードに溶け込まないようにし、RMS 輝度コントラストは 0.20 以上を目標に、文字には背景に対して 4.5:1 以上のコントラスト比を持たせます。そのうえでグレースケールと色覚シミュレーションで確認し、被写体がまだ背景から分離していれば、そのデザインは誰にでも機能します。

2合格すべきフィードテーマ

0.20強い RMS コントラスト

22–80%安全な明るさの範囲

フィードサイズでは色よりコントラストが勝つ理由

画像が 168×94 ピクセルまで縮むと、細かな色の違いは平均化されます。同じ明るさの2つの鮮やかな色——たとえば赤と緑——は、輪郭や形を見るのに主に使う目の輝度チャンネルではほぼ同じ灰色になります。一方、明と暗の差は縮小、画面の反射、安いディスプレイにも耐えます。

だからアクセシビリティのガイドラインは、許可された色のリストではなく輝度の比でコントラストを規定しています。通常のウェブテキストは 4.5:1 以上、大きな文字は 3:1 以上です。サムネイルの文字は大きく太いことが多いものの、平らな背景ではなく写真の上に載るので、4.5:1 を目標にすると余裕が生まれます。

“テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある”
Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2 · 引用は英語原文からの翻訳

明るさとコントラストの目標値

ThumbProof のビジュアル監査は、コントラストに関する3つの数値を報告します。平均の明るさは 0%（黒）から 100%（白）までの画像の平均輝度。RMS コントラストは輝度の標準偏差で、明暗の変化の量を安定して測る指標です。シャープさは 168×94 に縮小した後の細かな輪郭を測ります。

指標	弱い	中程度	強い／目標
平均の明るさ	< 22% または > 80%	22–30% または 70–80%	30–70%
RMS コントラスト	< 0.12	0.12–0.20	≥ 0.20
文字のコントラスト比	< 3:1	3:1–4.5:1	≥ 4.5:1
168×94 でのシャープさ	< 0.05	0.05–0.09	≥ 0.09

これらのしきい値はツールが使う実用的な目標で、プラットフォームの規則ではありません。全体が暗いドラマチックなサムネイルも、明るい被写体が強いコントラストを生んでいれば機能します。明るさのチェックは、暗いフィードに消えるかもしれないと警告するだけです。

ダークモードとライトモード

ダークモードではフィードはほぼ黒の背景に、ライトモードでは白か明るいグレーの背景に表示されます。黒い枠や暗いビネットのあるサムネイルはダークモードで輪郭を失い、淡いパステル調のサムネイルはライトモードで輪郭を失います。多くの視聴者は夜はスマホでダーク、昼はパソコンでライトを使うので、両方に合格する必要があります。

最も早い確認方法は、プレビューでフィードのテーマを切り替えることです。被写体ではなくサムネイルの輪郭を見てください。どちらのテーマでも、画像とページの間にはっきりした境界が必要です。境界が消えるなら、シャドウを少し持ち上げるか、明るい背景要素や控えめな枠を加えます。

色覚特性

色覚特性は珍しくありません。米国国立眼病研究所（NEI）によると、赤緑の色覚特性が最も多く、女性より男性にはるかに多く見られます。大勢の視聴者の中には、赤い矢印と緑の背景の違いが見えない人が一定数います。

ThumbProof は1型（赤）、2型（緑）、3型（青）、全色盲（色なし）をシミュレーションします。それぞれに合わせて別々にデザインする必要はありません。グレースケールのチェックに合格すれば——つまり被写体が明るさだけで背景から分離していれば——ほぼすべての色覚タイプで機能します。

シミュレーション	変化	典型的な失敗
1型色覚	赤が暗く茶色っぽく見える	暗い背景の赤い文字が消える
2型色覚	赤と緑が混ざる	緑と赤の「良い／悪い」比較
3型色覚	青と黄がずれる	水色の上の黄色い文字
全色盲	明るさだけが残る	明るさが同じ色の組み合わせすべて

5ステップで色とコントラストを確認

01
サムネイルを読み込む
画像をセーフゾーンチェッカーかフィードプレビューに入れます。
02
スクイントテスト
画像をぼかします。被写体ははっきりした形のままであるべきです。
03
グレースケールに切り替え
色を抜いても、文字と被写体は明るさで分離していなければなりません。
04
ダークとライトのフィードを切り替え
どちらの背景でもサムネイルの輪郭が見えるか確認します。
05
色覚モードを試す
4つのシミュレーションを切り替え、監査の内訳で明るさとコントラストの行を読みます。

目立つ配色の選び方

まずジャンル内にすでにあるものを見ましょう。ゲームのサムネイルがどれも鮮やかな紫と青なら、またネオンブルーを使うより暖かい黄色やオレンジのアクセントの方が目立ちます。配色は少なく：主な背景のトーン1つ、被写体1つ、文字や重要な部分のためのアクセント1つです。

彩度は強調に使い、全体には使わないこと。すべてが鮮やかなら何も目立ちません。落ち着いた背景に鮮やかな被写体が1つある方が、全面高彩度の画像より小さなサイズで読みやすくなります。目が違う1か所に直行するからです。

背景のトーン1つ、被写体1つ、アクセント1つ
ジャンル内で珍しいアクセントを選ぶ
背景は落ち着かせ、被写体は鮮やかに

ごちゃごちゃした写真の上の文字

細部の多い写真に直接置いた文字は、ほぼ必ずどこかの字画でコントラスト不足になります。確実な対策は4つ：太い縁取り（文字の高さの約 6〜10%）、柔らかいドロップシャドウ、文字の後ろの塗りや半透明の箱、または空や無地の壁など画像の落ち着いた部分への移動です。

結果はグレースケールで確認します。文字は平均ではなく輪郭全体にわたって、周囲よりはっきり明るいか暗いべきです。

1枚ではなくチャンネル全体のコントラスト

視聴者はチャンネルページや再生リストで、あなたの動画を何本も並べて見ることがよくあります。すべてのサムネイルが同じ暗い配色だと、ページは1つの塊に見え、個々の動画を見分けにくくなります。フォント、アクセント色、構図などのスタイルは統一しつつ、隣り合う動画で主な背景のトーンを変えましょう。

実用的なルールは、数本ごとに暗めと明るめの背景を交互にし、アクセント色は同じに保つことです。チャンネルの認識しやすさを保ちつつ、各サムネイルに独自の輪郭が生まれます。プレビューのチャンネルページ表示で、新しい動画を過去の動画の隣に並べて確認しましょう。

チャンネルのパターン	チャンネルページでの効果	対策
すべて暗い背景	動画が1つの塊に	暗い背景と中間トーンを交互に
動画ごとにランダムな色	認識できるスタイルがない	アクセント色とフォントを1つに固定
同じレイアウトで違うトーン	認識しやすく見分けやすい	このまま続ける

画面、明るさ、圧縮

視聴者は明るい OLED のスマホから暗いオフィスのモニター、部屋の向こうから見るテレビまで、あらゆる画面でサムネイルを見ます。安い画面や暗い画面では暗部の細部が真っ先に消え、スマホのナイトモードはさらにコントラストを下げます。重要な形は、平らな黒になってしまう最も暗い 10% の階調に置かないでください。

圧縮もコントラストを削ります。JPEG 圧縮はまず細かな色の変化をならすので、微妙なグラデーションや低コントラストの質感はブロック状になります。分離を微妙なグローや柔らかいグラデーションに頼っているなら強めましょう。プラットフォームが再エンコードした後に効果が消えるかもしれません。品質70の JPEG で書き出してデザインが保たれるか試すのが手早いテストで、保たれればどんな処理にも耐えます。

重要な形を最も暗い階調に置かない
微妙なグローやグラデーションを強める
品質70の書き出しでテスト

実例：低コントラストの市場の写真

ある旅行クリエイターが、にぎやかな市場の写真を使いました。何百ものカラフルな屋台がどれも同じくらいの明るさで、上に黄色の文字「HIDDEN GEM」。原寸では活気がありますが、168×94 では灰色のノイズになり、RMS コントラストは 0.11、黄色い文字の屋台に対するコントラスト比は約 1.8:1 でした。

クリエイターは背景を 30% 暗くし、屋台の1つを持ち上げて焦点にし、文字を暗い箱に入れました。RMS コントラストは 0.24、文字のコントラスト比は 7:1 に上がり、スクイントテストではっきりした形が1つ現れました。

指標	修正前	修正後
平均の明るさ	48%	36%
RMS コントラスト	0.11	0.24
文字のコントラスト	1.8:1	7:1
スクイントテスト	ノイズ	焦点がはっきり

色とコントラストのよくある間違い

明るさが同じ色の組み合わせ

緑に赤、紫に青は鮮やかに見えても、グレースケールでは混ざります。

暗い枠やビネット

ダークモードでサムネイルの輪郭を消してしまいます。

写真の上の細い色文字

縁取りや箱がないと、どこかの字画でコントラスト不足になります。

すべてを高彩度に

すべてが叫べば何も目立ちません。アクセントは1つに。

ライトモードを無視

ダークモードで映えるパステル調のデザインも、白の上では消えることがあります。

広色域での書き出し

Display P3 や CMYK のファイルは色がずれることがあります。sRGB で書き出しましょう。

サムネイルの色とコントラスト：ダークとライトのフィードで目立つために