Key takeaways
- A 2025 review in the journal Healthcare puts red-green colour vision deficiency at up to 8% of males and 0.5% of females of Northern European descent. On a male-skewed channel that is thousands of viewers per upload who do not see the colour difference your frame is built on.
- Reading is done by lightness, not hue. Published reading research found legibility is determined primarily by luminance contrast rather than by which colours were used — which is why red text on a same-brightness green shimmers for everyone, not only for colour-blind viewers.
- Pure red on pure green scores about 2.9:1 by the standard contrast formula, below the 4.5:1 the web accessibility guidelines ask of normal text. The eye has almost no brightness edge to lock onto.
- Colour-blind-safe and readable are two different tests. The Okabe–Ito colour-universal palette's sky blue on its orange is distinguishable to every vision type and still only 1.02:1 of luminance contrast — unreadable as text at any size.
- The 60-second fix is the greyscale test: desaturate the export. Anything that disappears was relying on hue, and it was also going to lose to compression and to a 168-pixel sidebar slot.
- Chrome and Edge both ship a vision deficiency simulator in developer tools, which costs nothing to run on a thumbnail before upload.
Nobody designs a thumbnail to be unreadable. The failure happens the other way round: you build the frame on a colour relationship that works beautifully on a calibrated monitor at 1280 pixels wide, it looks punchy in the editor, and a measurable slice of the feed sees a flat, muddy rectangle where your contrast was supposed to be. They do not complain. They do not comment. They scroll.
This is the least-discussed design constraint in packaging, and it is also the most mechanical. Unlike most thumbnail advice, it does not depend on taste or on what is trending. There is a number behind it, the number is computable from your own file, and the fix tends to improve the thumbnail for people with ordinary colour vision too — because the thing that breaks for a colour-blind viewer is the same thing that breaks at small sizes, under chroma compression, and on a phone held at arm's length in daylight.
What follows is the whole argument: how many of your viewers are affected, what their vision actually does to specific colour pairs, why luminance rather than hue carries legibility, the design patterns that quietly depend on hue, the palette question most guides get wrong, and a ten-minute audit you can run on a back catalogue.
How many of your viewers this actually is
Start with the population, because the design effort has to be justified by it. A 2025 narrative review by Ali Almustanyir, published in Healthcare and indexed on PubMed Central, reports red-green colour vision deficiency in up to 8% of males and 0.5% of females of Northern European descent, with lower rates in Asian and African populations. Eight per cent is roughly one man in twelve, the figure UK broadcast coverage of the issue usually quotes.
Broken down by type, the open-source simulation tool Color Oracle gives approximate rates of about 5% of males for the deuteran types and about 2.5% for the protan types, with tritanopia under 0.3% of people of either sex, and notes that published estimates across the literature run from 1% to 12% depending on the population and the test used. Treat 6–8% of men as a planning figure rather than a precise one; the design response does not change if the true number for your audience is 5%.
Then apply it to your own channel rather than to the internet. YouTube Analytics gives you a gender split under Audience, and that figure is the only one that matters: aggregators citing Statista put YouTube's global audience near 54% male, while gaming, tech, motoring, DIY and finance channels routinely run well above it. Take a video with 200,000 views and a 70% male audience. That is about 140,000 male viewers, of whom something in the region of 8,000 to 11,000 have a red-green deficiency — plus a few hundred women. They did not all see your thumbnail, and not all of those who did were affected by the specific colours you chose. But the order of magnitude is thousands of people per upload, not a rounding error.
There is a second finding in that review which matters more than the prevalence number. Although the condition is almost always congenital, many people remain unaware of it until adolescence or adulthood, because routine screening is limited. Your viewer may not know. They will not write "the red on green is illegible to me" in the comments, because they do not experience it as illegible — they experience your video as the one that looked boring.
What colour blindness does to a thumbnail, specifically
"Colour blind" is a bad name for it. Total absence of colour vision is vanishingly rare. What is common is a shifted or compressed response in one of the three cone types, which collapses certain pairs of colours towards each other while leaving the rest of vision intact.
The US National Eye Institute's page on the types of colour vision deficiency describes four red-green variants. Deuteranomaly is the most common; it makes certain shades of green look more red, and the Institute calls it mild. Protanomaly makes certain shades of red look more green and less bright — that second clause is the one that wrecks thumbnails, and I will come back to it. In the much rarer blue-yellow family, tritanopia makes it hard to tell blue from green, purple from red, and yellow from pink.
Translated into the decisions you actually make in an editor:
| Pair you probably use | What happens | What to do instead |
|---|---|---|
| Red text or arrow on green | The classic collapse. Both hues converge, and the pair carries almost no brightness difference to fall back on. | Keep the hues if you like them, but drive one of them much lighter or much darker. |
| Red on black | Protan viewers see red as darker than you do, so a pair that looked acceptable on your screen sinks into the background. | Lighten the red towards orange, or add a light outline. |
| Green against orange | Two mid-luminance saturated hues that converge for the most common deficiency type. | Replace one with a near-white or near-black. |
| Pink against grey | Pink reads as a grey of similar lightness, so a pink accent simply disappears. | Deepen to magenta and separate the lightness. |
| Blue against purple | Converges for the rare tritan types and is already a weak pair at small sizes. | Shift the purple towards red, or change its lightness. |
Notice what every fix in that last column has in common. None of them is "do not use red". The problem is never a colour; it is a pairing whose two halves are the same brightness.
Football solved this in public, and the lesson transfers
The best-documented large-scale version of this problem is not on the web — it is kit clashes in football, where millions of people watch two teams whose shirts converge for anyone with a red-green deficiency.
After a 2021 Liverpool–Manchester United fixture produced what Colour Blind Awareness chief executive Kathryn Albany-Ward described as the most complaints the charity had ever received, the Premier League issued kit-selection guidance on colour blindness. Reported coverage of that document flags red against green, red against black, and green against orange as the most problematic pairings, and the league's rulebook asks clubs to provide sufficient contrast for colour-blind players, match officials and spectators. Albany-Ward's criticism of the response to that match is instructive: United were warned about the clash and changed their socks, which she said was not a sufficient solution. The English Football League went further, and from the 2022-23 season allowed clubs to wear an away or third kit at home to avoid a clash.
Three things carry straight across to a thumbnail. First, the problem list is the same one: red versus green, red versus black, green versus orange. Second, partial fixes do not work — changing the socks is the thumbnail equivalent of adding a thin outline to text that has no lightness separation from its background. Third, and most usefully, the sport's answer was not to ban colours but to change one side's lightness. A team in a dark shirt against a team in a light shirt is legible to everyone, in any hue.
Why lightness is doing the work, and hue mostly is not
This is the part worth internalising, because it converts an accessibility question into a measurable design rule.
Reading research established decades ago that legibility is driven by luminance contrast rather than by the particular colours involved. Gordon Legge and colleagues, in their long series of psychophysics-of-reading papers, compared luminance contrast against colour contrast directly and found that reading performance tracked luminance; with very high colour contrast, readers could match their luminance-contrast reading speed, but colour alone was not where the legibility came from. That is a statement about normal colour vision. It means hue-dependent text is a weak design even before anybody's cones are unusual.
The web accessibility guidelines encode the same physics. Their contrast formula computes each colour's relative luminance by weighting the linearised channels 21.26% red, 71.52% green and 7.22% blue, then takes the ratio of the lighter to the darker as (L1 + 0.05) / (L2 + 0.05), giving a scale from 1:1 to 21:1. Success criterion 1.4.3 asks for at least 4.5:1 for normal-size text and 3:1 for large text, where large means about 24px regular or 18.7px bold. Those thresholds govern web text, not images, and no standard applies to a YouTube thumbnail — but the formula is measuring exactly the thing a thumbnail needs, which is whether an edge survives when hue information is unreliable.
Run some familiar thumbnail colours through it and the results are uncomfortable. The figures below are computed with that formula:
| Pair | Contrast ratio | Verdict |
|---|---|---|
Pure red #FF0000 on pure green #00FF00 | 2.9:1 | Fails normal text. Maximum hue contrast, almost no lightness contrast. |
| Pure red on black | 5.3:1 | Passes on paper, and still collapses for protan viewers who see red darker. |
| Pure green on white | 1.4:1 | Effectively invisible. Green carries 71% of the luminance weight. |
| Pure yellow on white | 1.1:1 | Gone. The pair nearly everyone has shipped at least once. |
| Pure yellow on black | 19.6:1 | Near the theoretical maximum, which is why it is the default creator palette. |
Pure blue #0000FF on black | 2.4:1 | Fails. Blue carries only 7% of the luminance weight, so it is already dark. |
The green weighting explains most of the surprises in that table. A saturated green is a bright colour in luminance terms and a saturated blue is a dark one, regardless of how vivid both look. If you have ever wondered why yellow-on-black text became the universal thumbnail treatment while every other high-energy pairing looks cheap, the answer is 19.6:1.
The red-on-black trap
Red on black is the pairing most likely to pass a contrast check and still fail in the feed. By the formula it clears the 4.5:1 bar, so a checker tells you it is fine. But the National Eye Institute's description of protanomaly includes the detail that affected reds look less bright — the deficiency does not merely shift the hue, it removes luminance. For those viewers a red-on-black pair loses the very thing the measurement said it had. If red on dark is your brand, push the red towards orange or vermillion, which keeps the energy and raises the lightness.
Small sizes and compression make it worse before anyone's eyes get involved
There is a second, purely technical reason hue-dependent edges fail in a feed: the image pipeline throws colour detail away on purpose.
JPEG and video codecs exploit the fact that human vision resolves brightness detail far more finely than colour detail — one commonly cited estimate puts the chromatic channels at around a third of the resolution of the luminance channel. In 4:2:0 chroma subsampling, the colour channels are stored at half resolution both horizontally and vertically, discarding about 75% of the original colour information while keeping luminance intact. (Recent work has questioned how well that assumption holds specifically in the red-green direction, which is a nice irony given everything above.)
The consequence for packaging is direct. An edge defined by a brightness difference survives compression and downscaling, because luminance is what the encoder protects. An edge defined only by a hue difference is the first thing the pipeline degrades, and it then gets scaled to a sidebar slot of around 168 pixels wide. That is the same mechanism behind most complaints about thumbnails looking blurry after upload: detail that lived in colour rather than in contrast does not make it through.
So the colour-blind audit and the small-size audit are the same audit. That is the practical case for doing it: you are not spending design effort on 8% of viewers, you are spending it on an edge quality that affects 100% of them.
The greyscale test
Here is the whole method, and it takes under a minute per thumbnail.
- Export the thumbnail as you normally would.
- Duplicate it and desaturate the copy completely — in any editor, a hue/saturation layer at −100, or a black-and-white adjustment.
- Scale the greyscale copy down to roughly 200 pixels wide and look at it from a normal phone-viewing distance.
- Ask one question: is every element that carries meaning still separate from what is behind it? The text, the subject's outline, the arrow, the number, the logo.
- Anything that has merged into its background was being held apart by hue alone. Fix it by changing lightness, not by changing hue.
The reason this works is that greyscale is a harsher test than any single simulation. It models no specific deficiency; it removes hue entirely, so whatever survives is surviving on luminance, which every viewer has. If your frame reads in grey, it reads for deuteranopes, protanopes, tritanopes, a compressed sidebar thumbnail, a dim phone in sunlight and a television across the room.
For the fix itself, two habits make it quick. Pull the actual hex values out of your frame with the free colour palette extractor rather than guessing them, and keep a rule of thumb in mind while you adjust: separate your two key colours by lightness until one of them is clearly in the top third of the range and the other clearly in the bottom third. Then check the result at real feed sizes in the thumbnail preview tool, since the 168-pixel view is where a borderline pair declares itself.
Simulate it properly, once per template
Greyscale tells you whether the frame survives without hue. A simulator tells you what a specific viewer type sees, which is useful when you want to keep a colour relationship and need to know how far it shifts.
Chrome's developer tools include an "Emulate vision deficiencies" control in the Rendering panel
(open the command menu, then More tools, then Rendering), offering protanopia, deuteranopia,
tritanopia, achromatopsia and blurred vision. Chrome's own announcement notes that the milder
forms such as protanomaly are the common ones and vary between individuals, so the simulations are
deliberately severe to cover them. Edge ships an equivalent tool with the same caveat, and
Puppeteer exposes the feature through page.emulateVisionDeficiency(), which is enough
to script a check over a whole folder of thumbnails. Color Oracle does the same job as a desktop
application.
Two warnings. A simulator approximates perception and cannot reproduce an individual's real experience — the game accessibility community, which has worked this problem longer than anyone, is explicit that simulators are a first pass and that testing with actual colour-blind players is the real check. And you do not need to run this per upload. Run it once on each template or channel style, fix the palette at that level, and the per-video check is just greyscale.
The palette question most guides get wrong
Search for colour-blind-safe palettes and you will find the Okabe–Ito set, devised by Masataka Okabe and Kei Ito for colour-universal design and widely recommended in scientific publishing. It is a genuinely good tool, and it is also the source of the most common mistake in this area.
| Okabe–Ito colour | Hex | Contrast vs white | Contrast vs black |
|---|---|---|---|
| Orange | #E69F00 | 2.3:1 | 9.3:1 |
| Sky blue | #56B4E9 | 2.3:1 | 9.1:1 |
| Bluish green | #009E73 | 3.4:1 | 6.1:1 |
| Yellow | #F0E442 | 1.3:1 | 15.9:1 |
| Blue | #0072B2 | 5.2:1 | 4.1:1 |
| Vermillion | #D55E00 | 3.9:1 | 5.4:1 |
| Reddish purple | #CC79A7 | 3.1:1 | 6.9:1 |
Every one of those is distinguishable from the others for all common deficiency types. Now put two of them together: that sky blue on that orange is 1.02:1. Text in one on a field of the other is not merely hard to read, it is invisible, for every viewer on the platform including you.
Colour-blind-safe and legible are two separate tests, and a palette can pass one while failing the other completely. Safe-for-identification is about telling two categories apart when they sit side by side with a label; legible-at-size is about a brightness edge. A thumbnail needs the second test always, and the first only when hue is carrying meaning.
The most useful single recommendation I found comes from the game accessibility guidelines, which have handled this problem at scale for years: where you only need a couple of colours to be told apart, orange against blue works for the three most common deficiency types, and if you also build in a lightness difference — light blue against dark orange, for instance — you cover the edge cases too. Creators arrived at orange-and-teal independently because it looks good; it is also, as it happens, the most robust two-colour choice available. Our guide to the best colours for YouTube thumbnails covers which pairings actually attract clicks; this post is about which of them survive being seen.
Patterns that depend on hue without you noticing
Colour is rarely decorative in a thumbnail. It is usually carrying a claim, and that is the part that fails. The web accessibility guidelines' first-level criterion on the use of colour makes the general rule plainly: when an image conveys meaning through colour differences, that meaning has to be available by some other visual means as well.
The thumbnail versions of that failure, and what to replace them with:
- Red cross against green tick. The most common one in comparison and myth-busting thumbnails. The shapes already differ, which saves it — as long as the shapes are large enough to resolve at 168 pixels. If you have drawn both as coloured circles, the distinction is gone. Keep the shape difference and make the cross darker than the tick.
- Team or faction colours. Gaming and sport thumbnails that put red versus green sides of a battle, or two kits, next to each other. Separate them by lightness or add a silhouette difference.
- Before and after by colour grade. A cool-graded half against a warm-graded half reads as one continuous image when hue separation weakens. Add a hard dividing line, a label, or a lightness step.
- Green-for-money, red-for-loss. Finance thumbnails lean on this constantly. The arrow direction is doing the real work; make sure the arrow is big and that its lightness differs from the background.
- Heat maps, health bars, damage numbers. Anything lifted from a game UI arrives pre-loaded with hue-coded meaning that the game itself probably offers a colour-blind mode for. If the point of the frame is the number, put the number in text.
- Coloured text for emphasis. One word in red inside a white sentence is an emphasis signal that weakens for a protan viewer. Use weight, size or a background highlight as well. Our guide to thumbnail fonts covers the weight-and-stroke side of that.
Do not build two thumbnails
Games ship colour-blind modes because they can: the renderer can recolour the interface per player. You cannot. The only per-viewer thumbnail variation YouTube supports is language localisation, so there is no accessible variant to toggle. That constraint is clarifying rather than limiting — it forces you to pick a design that works for every viewer at once, which is the same design that works at sidebar size and under compression.
What this is worth, honestly
I have not found a peer-reviewed study measuring the click-through effect of colour-blind-safe thumbnail design, and anyone who quotes you a percentage for it is making it up. The honest version of the claim is narrower and still worth acting on.
The nearest real data on thumbnail features is an analysis of 740 popular YouTube videos from 2020 that found about 72% of their thumbnails contained a human face and 88% were described as colourful. It measures popular videos with no unpopular comparison group, so it cannot tell you what caused anything. What it does suggest is that the competitive set is saturated and colourful, which is precisely the environment where a frame built on lightness separation stands out — it has structure where its neighbours have vibrance.
The mechanism to expect, then, is not "accessibility raises CTR". It is that enforcing luminance separation is a quality discipline with three compounding payoffs: the frame survives the 168-pixel slot, it survives chroma compression, and it works for the several thousand viewers per upload whose vision was never going to deliver your hue contrast. If you want a number for your own channel, that is what Test & Compare is for — run the hue-dependent version against the lightness-separated version and let the platform measure it, using the method in our thumbnail A/B testing guide rather than eyeballing the result.
A ten-minute audit for a back catalogue
- Open your channel page and screenshot the grid of your last twelve thumbnails.
- Desaturate the screenshot. You now have the honest version of your channel's recognisability.
- Mark every thumbnail where the text has merged into the background, or the subject has merged into the backdrop.
- For the marked ones, note which pair is responsible. It will nearly always be two mid-lightness saturated colours.
- Fix the template rather than the files: raise one colour towards near-white or drop it towards near-black, and keep the hues you like.
- Run one simulator pass on the fixed template for deuteranopia and protanopia.
- Re-export the worst two or three published thumbnails with the corrected palette. Changing a thumbnail on an older video is low-risk and sometimes recovers suggested-feed impressions.
- Add the greyscale check to your pre-upload routine. It is one keyboard shortcut.
If your channel is watched largely on a television, run the same grid check at distance as well — the failure modes overlap, and packaging for the living-room screen has its own geometry.
The rule, in one line
Design the frame so that hue is the reward and lightness is the information. Colour can carry mood, brand and energy — all the things it is good at — as long as nothing a viewer must read or recognise depends on it. That is a single constraint, it is checkable in seconds by desaturating your export, and it quietly covers the colour-blind viewer, the compressed sidebar thumbnail, the phone in sunlight and the television across the room with one decision.
It is also the kind of constraint worth building into a template rather than remembering per upload. When you generate thumbnails with Thumblore, the thing to lock in is the lightness relationship: one near-white or near-black element that the text always sits against, with the brand colour doing everything else. Fix that once and the greyscale test stops finding anything, which is the point.
For the colour choices themselves, our breakdown of which colours perform in a feed is the companion piece to this one: it tells you what to pick, and this tells you how to pair it so the pick survives the journey to someone else's eyes.