Thumbnail colors
hex · or picker
thumbnail use
normal text ≤ 18pt · large text ≥ 18.66pt (or bold ≥ 14pt) · UI/non-text uses the 3:1 graphic-object bar
live thumbnail preview
◆
SUBSCRIBE
16:9 · subject over text
subject (background tone) sits behind the text — check both the subject tone and its contrast with the text overlay.
Thumbnail readability cues
small sizes · bright overlaysBeyond the raw ratio, how a thumbnail renders at small feed sizes matters:
- Feed size: thumbnails render from ~360×202 down to ~120×68 px. What reads at 16:9 full size may blur at small scales.
- Bold, high-weight fonts hold contrast better when downscaled — prefer bold for overlay text.
- Bright overlays: a white or bright subject cut across by text needs a higher ratio to stay legible over the bright area — text overlapping a bright spot should be measured against that bright tone, not just the average.
- Text shadow / outline adds an effective dark backing — if present, the text can pass even over busy backgrounds.
- Short text: 3–5 words max. Small and high-density is an accessibility failure waiting to happen.
The UI / icons mode uses the 3:1 non-text threshold — the right bar for play buttons, duration badges and channel overlays rather than body text.
Contrast verdict
waiting on both colorsIdle
Enter a background/subject color and a text color to compute the WCAG contrast ratio.
— : 1
WCAG relative luminance contrast ratio
OFF
Normal text
WCAG 1.4.3 AA · small text (≤ 18pt regular)
needs 4.5 : 1
OFF
Large text
WCAG 1.4.3 AA · ≥ 18pt regular or ≥ 14pt bold
needs 3 : 1
OFF
UI components / non-text
WCAG 1.4.11 AA · play buttons, badges, icon overlays
needs 3 : 1