Thumbnails and colour blindness

Who this is about, and why a thumbnail is the hard case

Red-green colour blindness is the common one: it is usually quoted at about 8% of men and 0.5% of women of Northern European descent, in two forms — deuteranopia, the green-sensitive kind, and protanopia, the red-sensitive kind. Those are the two I simulated. Everything else is rare enough to be a footnote, and it gets one at the end.

A thumbnail is a hard case for this because there is nothing else to fall back on. A chart with a colour legend has labels; a website has text. A thumbnail has one image at 336 pixels wide, next to a title that describes the video rather than the image, and if two areas of it stop being distinguishable then the design has simply lost a boundary with nothing to replace it.

What changes, and what does not

This is the part worth measuring first, because it decides everything else. I ran the standard dichromat simulation over all 660 thumbnails in this tool's packs and compared each image with itself.

The overall brightness of an image barely moves: the median change in mean relative luminance is 0.59% under deuteranopia and 1.11% under protanopia. What collapses is the difference between hues. Pure red, rgb(255,0,0), comes out as rgb(147,147,0) — a dull yellow. A strong green, rgb(0,200,0), comes out as rgb(171,171,30). Those two are the same colour, differing only in brightness. White stays exactly white.

So the useful way to think about it is not that colours get worse. It is that the hue axis is deleted and the brightness axis is left intact. Any separation you built out of hue is gone; any separation you built out of brightness is untouched.

Individual saturated colours can shift in brightness — that same pure red rises from 0.213 to 0.271 relative luminance under deuteranopia and falls to 0.104 under protanopia. It is the image as a whole that stays put, because most of a photograph is not fully saturated.

How I measured it

The simulation is the Viénot, Brettel and Mollon (1999) linear approximation: convert sRGB to linear, then to LMS cone response, collapse the missing cone onto the plane the dichromat can see, and convert back. It is the standard method behind most colour-blindness simulators, and its known weakness is tritanopia, which is why this guide does not claim anything about that.

For each thumbnail I took the two dominant hue families — the two of twelve 30° sectors with the largest saturation-weighted share, both above 10% — and measured two things about that pair. The WCAG contrast ratio between their mean colours, which is a pure brightness measure, and the distance between those two colours in sRGB before and after simulation.

586 of the 660 thumbnails have two dominant hues that clear the 10% bar. Those are the ones the numbers below describe.

How much brightness separates two colours in a real thumbnail

The distribution is the finding. This is the contrast ratio between the two dominant colours of the same thumbnail, over the 586 that have a measurable pair.

The median is 1.57:1. For reference, WCAG asks 4.5:1 for body text and 3:1 for graphical objects — thresholds written for interfaces rather than photographs, so they are a yardstick and not a rule here. Only 2% of these thumbnails reach the first and 9% the second.

Which means four in ten lean on hue alone

267 of the 586 pairs — 46% of them, 40% of all the thumbnails measured — separate their two main colours with less than 1.5:1 of brightness contrast. Whatever is holding those two areas apart, it is mostly not brightness, which means it is mostly hue, which means it is the part that does not arrive for a red-green dichromat.

The simulation confirms it directly: across all pairs the distance between the two colours drops by a median of 9%, and within that low-brightness group it drops by 19%. The pairs that had the least brightness contrast to begin with are exactly the ones that lose the most of what they had.

And it is the same design decision that fails for a different reason at delivery size. A boundary made of hue and not brightness is also the boundary that dissolves when the file is re-encoded to 336 pixels wide, as measured in the guide on blurry thumbnails. Two separate failure modes, one cause, one fix.

The red-on-green warning is aimed at the wrong problem

The standard accessibility tip for colour blindness is not to put red next to green. Measured against real thumbnails, that combination is rare: 13 of 660, 2%, have a red family and a green family as their two dominant hues.

When it does happen it is bad — those pairs lose a median 35% of their colour distance, the worst of any group here, and 10 of the 13 have under 2:1 of brightness contrast as well. So the advice is not wrong. It is just narrow: it describes 2% of thumbnails while the general version of the same problem — two hues of any kind separated by almost no brightness — describes 40%.

It varies a lot by niche

Sorted by the share of measurable pairs that lean on hue alone. The pattern follows what the niches look like in the first place, which is measured in the guide on standing out: the bright, saturated rows have the most hue-only separation, because there is less brightness range left to separate anything with.

Fashion & Beauty and Politics are at 65% and 62%; Finance and Health & Fitness at 25% and 30%. If your niche is in the top half of this table, the odds are that the thumbnail you are about to copy the look of is one of the ones that flattens.

The fix is one you already have a number for

Separate by brightness first and treat hue as a bonus. That is the same conclusion the guide on colour reaches from the other end — the interface being either white or near-black — and it is the whole remedy here as well, because brightness is the axis the simulation leaves alone.

The cheap test is greyscale. Desaturate your design completely and look at whether the parts still read as separate parts: subject against background, text against whatever is behind it, one half of a split frame against the other. If it survives that, it survives dichromacy, because greyscale is the stricter test — it removes all hue information, while a dichromat keeps one axis of it.

Which also means the reverse is not proof. Something that fails in greyscale might still be partly visible to a real viewer with deuteranopia. Greyscale passing is sufficient; greyscale failing is a warning, not a verdict. The threshold is not ours: it is the contrast ratio defined by WCAG's success criterion for minimum contrast, which is the standard the rest of the web is held to.

Text is the case with the least margin

Text on a coloured background is where this gets decided fastest, because text is thin: a headline separated from its background by hue alone is illegible for a dichromat and merely difficult for everyone else. Only 2% of the pairs measured reach the 4.5:1 that interface text is expected to have.

The practical answer is not a contrast ratio but a stroke: an outline or a hard shadow in a colour whose brightness is far from both the text and the background, which is what the guide on text size measures for the downscale. The same outline that keeps a headline legible at 336 pixels keeps it legible without hue.

What this does not cover

Tritanopia, the blue-yellow form, is not simulated here. The Viénot approximation is known to be unreliable for it, and it is rare enough — well under 0.1% — that guessing would add nothing.

Total colour blindness, monochromacy, is rarer still, and the greyscale test above is precisely that case: if your design survives desaturation it survives monochromacy too.

And this whole guide is about hue. The other accessibility question for a thumbnail is size, which is not a disability question at all — everybody receives your design at 336 pixels wide, and the floors for that are in the guides on text size and faces.

The check, in a minute

Two passes over the same image. Desaturate it and see whether the parts still separate. Then put the colour version back into a real feed, because a thumbnail that separates internally can still lose its edge against the interface, which is a different measurement in a different guide.

That second pass is what the preview tool is for — your thumbnail among real competitors at the real rendered sizes. The first pass is one slider in whatever you designed it in, and it is the cheapest accessibility check available in this craft.

The questions everyone asks