ThumbProof
Contrast matters more than color. Keep average brightness between about 22% and 80% so the image does not merge with a dark or light feed, aim for RMS luminance contrast of 0.20 or higher, and give any text at least a 4.5:1 contrast ratio against what is behind it. Then check the thumbnail in grayscale and with a color-vision simulation: if the subject still separates from the background, the design works for everyone.
Why contrast beats color at feed sizes
When an image shrinks to 168×94 pixels, fine color differences average out. Two saturated colors of the same brightness—say a red and a green—become nearly the same gray to the eye’s luminance channel, which is what we use most to see edges and shapes. Light against dark, on the other hand, survives scaling, screen glare and cheap displays.
This is also why accessibility guidelines specify contrast as a ratio of luminance, not as a list of allowed colors. The rule for normal web text is at least 4.5:1, and large text at least 3:1. Thumbnail text is usually large and bold, but it sits on a photo rather than a flat background, so aiming for 4.5:1 gives a safety margin.
“The visual presentation of text and images of text has a contrast ratio of at least 4.5:1”
Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2
Target numbers for brightness and contrast
ThumbProof’s visual audit reports three numbers that relate to contrast. Average brightness is the mean luminance of the image from 0% (black) to 100% (white). RMS contrast is the standard deviation of luminance, a robust measure of how much light and dark variation there is. Sharpness measures fine edge detail after scaling to 168×94.
| Measure | Weak | Moderate | Strong / target |
|---|---|---|---|
| Average brightness | < 22% or > 80% | 22–30% or 70–80% | 30–70% |
| RMS contrast | < 0.12 | 0.12–0.20 | ≥ 0.20 |
| Text contrast ratio | < 3:1 | 3:1–4.5:1 | ≥ 4.5:1 |
| Sharpness at 168×94 | < 0.05 | 0.05–0.09 | ≥ 0.09 |
These thresholds are practical targets used by the tool, not platform rules. A dramatic, mostly dark thumbnail can still work if a bright subject gives it strong contrast; the brightness check only warns you that it may disappear into a dark feed.
Dark mode and light mode
Feeds are shown on a near-black background in dark mode and on white or light gray in light mode. A thumbnail with a black border or a dark vignette loses its edges in dark mode, while a pale, pastel thumbnail loses its edges in light mode. Many viewers use dark mode on phones in the evening and light mode on desktops during the day, so you need to pass both.
The quickest check is to toggle the feed theme in the preview. Look at the outline of the thumbnail rather than the subject: you want a clear edge between the image and the page on both themes. If the edge disappears, lift the shadows slightly, add a brighter background element or a subtle frame.
Color-vision deficiencies
Color blindness is common. According to the U.S. National Eye Institute, red-green color blindness is the most common form, and it affects men far more often than women. In a large audience, a noticeable share of viewers will not see the difference between a red arrow and a green background.
ThumbProof simulates protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind) and achromatopsia (no color). You do not need to design for every case separately. If the thumbnail passes the grayscale check—meaning the subject separates by brightness alone—it will work for almost all color-vision types.
| Simulation | What changes | Typical failure |
|---|---|---|
| Protanopia | Reds look dark and brownish | Red text on dark backgrounds disappears |
| Deuteranopia | Reds and greens merge | Green vs red ‘good/bad’ comparisons |
| Tritanopia | Blues and yellows shift | Yellow text on light blue |
| Achromatopsia | Only brightness remains | Any same-brightness color pair |
Check color and contrast in five steps
- 01
Load the thumbnail
Drop your image into the safe zone checker or the feed preview.
- 02
Run the squint test
Blur the image. The subject should remain a clear shape.
- 03
Switch to grayscale
Remove color. Text and subject must still separate by brightness.
- 04
Toggle dark and light feeds
Make sure the edges of the thumbnail stay visible on both backgrounds.
- 05
Try color-vision modes
Switch through the four simulations, then read the brightness and contrast rows in the audit breakdown.
Choosing a palette that stands out
Look at what is already in your niche. If every gaming thumbnail uses saturated purple and blue, a warm yellow or orange accent will stand out more than another neon blue. Keep the palette small: one dominant background tone, one subject, and one accent for text or a key detail.
Use saturation for emphasis, not everywhere. When everything is saturated, nothing is. A muted background with a single saturated subject usually reads better at small sizes than a full-saturation image, because the eye goes straight to the one area that differs.
- One background tone, one subject, one accent
- Pick an accent that is rare in your niche
- Muted background, saturated subject
Text on busy photos
Text placed directly on a detailed photo almost always fails the contrast test somewhere along the letters. There are four reliable fixes: a thick outline (about 6–10% of the letter height), a soft drop shadow, a solid or semi-transparent box behind the words, or moving the text to a calm area of the image such as sky or a plain wall.
Check the result in grayscale. The letters should be clearly lighter or darker than everything around them along their whole outline, not just on average.
Contrast across a channel, not just one image
Viewers often see several of your videos next to each other on a channel page or in a playlist. If every thumbnail uses the same dark palette, the page looks like one block and individual videos are hard to tell apart. Keep a consistent style—fonts, accent color, framing—but vary the dominant background tone between neighboring uploads.
A practical rule is to alternate between a darker and a lighter background every few videos, and to make sure the accent color stays the same. That keeps the channel recognizable while each thumbnail still has its own edge. Use the channel page view in the preview to check a new upload next to the ones before it.
| Channel pattern | Effect on the channel page | Fix |
|---|---|---|
| All dark backgrounds | Videos merge into one block | Alternate dark and mid-tone backgrounds |
| Random colors every video | No recognizable style | Keep one accent color and font |
| Same layout, different tones | Recognizable and distinct | Keep doing this |
Screens, brightness and compression
Viewers see your thumbnail on everything from bright OLED phones to dim office monitors and TVs viewed from across the room. Dark detail is the first thing to disappear on cheap or dim screens, and phone night modes reduce contrast further. Keep important shapes out of the darkest 10% of the tonal range, where they turn into flat black.
Compression also eats contrast. JPEG compression smooths fine color variation first, so subtle gradients and low-contrast textures become blocky. If your design relies on a subtle glow or soft gradient for separation, strengthen it, or the effect may vanish after the platform re-encodes the image. A quick test is to export at JPEG quality 70 and see whether the design still holds; if it does, it will survive any platform processing.
- Keep key shapes out of the darkest tones
- Strengthen subtle glows and gradients
- Test a quality-70 export
Worked example: a low-contrast market scene
A travel creator uses a photo of a busy market: hundreds of colorful stalls, all at similar brightness, with yellow text “HIDDEN GEM” on top. At full size it looks lively. At 168×94 it turns into gray noise, the RMS contrast is 0.11, and the yellow text has a ratio of about 1.8:1 against the stalls.
The creator darkens the background by 30%, lifts one stall as the focal point, and puts the text in a dark box. RMS contrast rises to 0.24, the text ratio to 7:1, and the squint test shows one clear shape.
| Measure | Before | After |
|---|---|---|
| Average brightness | 48% | 36% |
| RMS contrast | 0.11 | 0.24 |
| Text contrast | 1.8:1 | 7:1 |
| Squint test | Noise | Clear focal point |
Common color and contrast mistakes
Same-brightness color pairs
Red on green or blue on purple looks vivid but merges in grayscale.
Dark borders and vignettes
They erase the edge of the thumbnail in dark mode.
Thin colored text on photos
Without an outline or box it fails contrast somewhere along the letters.
Over-saturating everything
When everything shouts, nothing stands out. Keep one accent.
Ignoring light mode
Pastel designs that shine in dark mode can vanish on white.
Wide-gamut exports
Display P3 or CMYK files can shift colors. Export in sRGB.
Video Thumbnail Size, Resolution, File Limits and Safe Zones
High-CTR Thumbnail Checklist: 7 Visual Principles That Get Noticed
Title Truncation by Device: Pixel Widths, Not Character Counts
Thumbnail Text: How Many Words, How Big, and Where to Put Them
Faces and Focal Point: Making One Thing Impossible to Miss