Colours that survive the YouTube feed

Two different problems wearing one question

"What colours work on a thumbnail" is really two questions with different answers, and mixing them is why the advice you find is so vague.

The first is separation from the interface: your frame has an edge, and that edge sits directly against YouTube's own background. This one is computable, and most of this guide is about it.

The second is separation from your neighbours: inside the frame, you are not competing with the interface but with the other thumbnails in the row. That one has no universal answer, because it depends entirely on what those thumbnails look like.

The interface is one of exactly two colours

YouTube's page is near-black in dark mode and white in light mode. The dark value is #0F0F0F, near enough that treating it as black in your head is the mistake — it is a dark grey, and a true black thumbnail is darker than the page it sits on.

You do not get to know which of the two a viewer is using. The same file has to hold up on both, which means a colour's usable contrast is not its best case but its worse one.

Those two values are what the mock in the preview tool reproduces, and why it has a light and dark switch: it is the same file against the two grounds it will actually land on.

What the numbers actually are

Contrast ratios, computed the standard way, for a set of colours you would plausibly put at the edge of a thumbnail. The last column is the one that matters, because it is the case you cannot rule out: These are contrast ratios in the sense WCAG defines them, so the numbers mean the same thing here as they do anywhere else on the web.

These measure separation between two flat colours, not the legibility of text — that has its own numbers, in the guide on text size. Read the table as: how visible is the boundary where my thumbnail stops and the page begins.

The result is the opposite of the usual advice

Look down the last column and the pattern is not what "use bright colours" predicts. The brightest options are the worst performers, because bright almost always means high luminance, and high luminance is invisible against white.

White edges score 1.0:1 in light mode — literally no boundary. Yellow, cyan and light grey are barely better at 1.3 to 1.5. Every one of them looks magnificent in a dark-mode screenshot, which is exactly how they get chosen.

The colours that survive both grounds are the mid-luminance saturated ones: red, blue, magenta, orange, and even a plain mid grey. None of them wins either column outright, and that is the point — they are the only ones that never lose badly.

Where this applies, and where it does not

This is a rule about the outer band of the frame, not about the whole design. The middle of a thumbnail never touches the interface, so a white middle is not a problem; a white edge is.

Which is a smaller constraint than it sounds, and a specific one: the last few per cent of the frame decides whether your thumbnail reads as an object on the page or bleeds into it. A bled edge does not just look untidy — it makes the thumbnail smaller, because the part that dissolved into the background stops counting as yours.

Inside the frame, the contest changes

Once the edge holds, colour stops being a measurable problem and becomes a comparative one. There is no best colour for the inside of a thumbnail, because the only thing that matters is what it is next to.

A saturated red thumbnail stands out in a row of muted greys and disappears in a row of saturated reds — and the row is not yours to choose. In most niches the convention converges, which means the colour that reads as most professional is also the colour everyone else is using.

That is why the useful question is never "which colour is best" but "which colour is missing here". Looking at your design in the feed it will actually appear in answers it in a few seconds, and no amount of theory does.

Hue stops working before luminance does

One more reason to think in light and dark rather than in colour names: at the size a thumbnail is actually seen, hue contrast is the first thing to collapse.

Red on blue is vivid at full size and mud at tile size, because a few pixels of each get averaged together and what survives is their similar brightness. Light against dark survives the same treatment, because averaging light and dark still leaves a difference.

The check is to look at the design in greyscale. If it falls apart without colour, it was relying on colour, and the scale it will be displayed at takes colour away first.

The white border, and when it is a crutch

A thin white or bright border around the whole thumbnail is the standard fix for the bleeding-edge problem, and it works — on dark mode. In light mode it is the invisible case from the table, so a border chosen for one theme can be no border at all in the other.

The version that survives both is a border in a mid-luminance colour, or a two-tone edge, or simply a composition whose outer band happens to carry mid-tone content rather than an extreme. The last of those is the one that never looks like a workaround.

It is also worth asking whether the border is solving a problem or hiding one. A design with no clear subject does not become clearer with a frame around it; it becomes a labelled unclear design.

A three-minute check

None of this needs a colour theory. It needs three looks at the same file, in the order that finds problems fastest.

1. Look at the edge on both groundsPut the thumbnail on white and on #0F0F0F. If the boundary disappears on either one, that is the colour to change — and it is a change to the outer band only.
2. Look at it in greyscaleIf the design stops working, it was carried by hue, which is what the display size will take away first.
3. Look at it beside its neighboursIn the feed it will appear in, at the size it will appear at. This is the only step that can tell you whether the colour that survives the interface also stands out from the row.

What to take from this

The short version: mid-luminance saturated colours at the edges, because they are the only ones that hold against both interfaces. Extremes of light and dark inside the frame, where they cost nothing. Luminance contrast rather than hue contrast, because hue does not survive the size. And the actual choice made against the row you will appear in rather than against a theory.

That last part is the only step no article can do for you, including this one, because it depends on a set of thumbnails that changes every week.

Questions people ask about this