A thumbnail color analyzer for the moment before you publish
This thumbnail color analyzer looks at a YouTube thumbnail (or any cover image) the way a viewer’s screen will: tiny, next to other videos, sometimes in dark mode, sometimes by someone with colour-blindness. Drop in one image or up to six versions to compare, or paste a YouTube link to check an existing video’s thumbnail.
You get the palette with the share of the picture each colour covers, the warm/cool balance, saturation and brightness histograms, a WCAG contrast ratio for your title text, a preview at 168 × 94 and 120 × 90 pixels among grey placeholder videos, a blurred greyscale “squint test” and protanopia, deuteranopia and tritanopia views. It measures legibility; it doesn’t promise clicks, because no study reliably links particular colours to click-through rate.
How to use the Thumbnail Color Analyzer
- Drop a thumbnail onto the upload area (or several, to compare versions), paste a screenshot with Ctrl+V, or paste a YouTube link and press Load thumbnail.
- Read the palette: each swatch shows its HEX code, share of the image and whether white or black text reads better on it. Switch between 4, 6 and 8 colours or between k-means and median cut.
- Under Text contrast, click a letter of your title, then the background right behind it, to get the WCAG ratio with pass/fail badges.
- Check the small-size test in light and dark mode, then the squint test and the three colour-blind views.
- Export the palette with Copy HEX list, Download CSS or Download JSON.
Thumbnail Color Analyzer features
Palette with proportions
OKLab k-means or median cut finds 4–8 colours; the bar draws each colour’s share of the picture to scale.
WCAG 2.2 contrast
Two clicks give the exact contrast ratio between title and background, rounded down so a pass is never overstated.
Text-like area detection
Areas with sharp, repeated light–dark changes are outlined and measured automatically as a starting point.
Real small-size preview
Your thumbnail at 168 × 94 px in an up-next style list on #FFFFFF and #0F0F0F backgrounds, plus 120 × 90 tiles.
Colour-blind and squint views
Machado (2009) simulation matrices and a luminance-only blur show whether the image still reads without colour.
Compare up to six versions
A side-by-side table of dominant colour, brightness, saturation, warm/cool split, colourfulness and contrast.
How the contrast numbers work
Contrast uses the WCAG 2.2 formula. Each colour is converted to relative luminance (sRGB channels linearised, then weighted 0.2126 red, 0.7152 green, 0.0722 blue) and the ratio is (lighter + 0.05) ÷ (darker + 0.05). White on black gives the maximum, 21:1. Mid-grey #767676 on white has a luminance of 0.1812, so 1.05 ÷ 0.2312 = 4.54:1, just above the 4.5:1 that WCAG asks for normal text.
Thumbnail titles are usually “large text” in WCAG terms (at least 24 px, or 18.66 px bold, at the size it is read), where the minimum is 3:1. On a 168-pixel-wide thumbnail, though, a 120 px title on a 1280 px canvas shrinks to about 16 px, so aiming for 4.5:1 is a sensible safety margin. WCAG was written for web pages, not images; here it is simply an objective, published yardstick for legibility.
Worked example: the sample thumbnail
The sample loaded on this page is a navy-to-blue gradient with a white “5 HABITS” title, a yellow strip reading “IN 10 DAYS” and an orange circle. The palette finds blue #14368E (28.3%) and navy #0F2864 (21.2%) as the largest colours, then yellow #FBDD65 (20.9%) and orange #F87417 (10.1%). The balance bar reads about 27% warm, 5% neutral and 68% cool, and the colourfulness score of 142 is “extremely colourful” on the Hasler–Süsstrunk scale.
Detection outlines both lines of text: white on navy measures about 14.5:1 and navy on yellow about 9.7:1, so both pass every WCAG threshold (exact figures can shift slightly with your system’s fonts). In the protanopia and deuteranopia views the orange circle turns olive and moves close to the yellow strip in hue, but both stay much lighter than the navy, so the design still reads: it relies on lightness differences, not hue alone.
Reading the other measurements
- Warm, neutral and cool. Pixels with an HSV saturation under 15 % (or nearly black) count as neutral. Hues from 330° through red, orange and yellow to 75° are warm; greens, cyans, blues and purples are cool.
- Colourfulness is the Hasler & Süsstrunk (2003) metric, from 0 (greyscale) upwards; their anchor points run from “slightly colourful” at 15 to “extremely colourful” at 109.
- Brightness is OKLab lightness, which tracks perceived lightness better than a plain RGB average; saturation is HSV saturation.
- The 120 × 90 tiles show YouTube’s smallest stored size (default.jpg), which is 4:3, so a widescreen thumbnail gets black bars, as the YouTube Thumbnail Downloader also shows.
Related tools
Fix the design in the YouTube Thumbnail Maker, test any two colours in the contrast checker, get a lockable palette from the Color Palette Extractor and more vision types in the Color Blindness Simulator.
Thumbnail Color Analyzer FAQ
What does this thumbnail color analyzer check?
The palette and how much of the picture each colour covers, warm/cool balance, saturation and brightness, the WCAG contrast of your title text, how the thumbnail looks at 168 × 94 and 120 × 90 pixels in light and dark mode, a blurred greyscale squint test and three colour-blind simulations.
What contrast ratio should thumbnail text have?
WCAG 2.2 asks for at least 3:1 for large text and 4.5:1 for normal text. Because thumbnails are viewed very small, aiming for 4.5:1 or more between title and background is a safe target.
Will a certain colour get more clicks?
This tool doesn’t claim that, because no study gives a reliable link between particular thumbnail colours and click-through rate. It measures legibility and colour balance; test real performance with YouTube’s own thumbnail testing and analytics.
Are my thumbnails uploaded?
No. Images you drop or paste are analysed in your browser. Only a pasted YouTube link causes a request: that video’s public thumbnail is fetched through this site’s image fetcher, or directly from YouTube’s image server if the fetcher is unreachable.
Why is the detected text area not exactly my title?
Detection looks for small patches with strong, repeated light–dark changes, which letters create, but so can foliage or patterned clothes. Use two clicks on your actual title for a precise ratio.
How accurate are the colour-blind views?
They use the published Machado, Oliveira and Fernandes (2009) matrices at full severity in linear RGB, which model typical dichromat vision. Real vision varies, so treat them as a check for colour-only differences, not an exact picture.