Quality control

Color Contrast Checker for Thumbnail Text

Bright text on a bright background is the classic thumbnail mistake: white on yellow looks bold in an editor and measures under 1.5 : 1, so it melts away once the image shrinks into a feed.

1 · Your two colours

Text colour

Background colour

Preview text

Type a hex code such as #FFD400 or FD0, or use the colour pickers.

2 · Contrast ratio

1.00 : 1

Full size

Phone feed size

Greyscale

Closest text colours that pass

3 · Pick colours from your thumbnail (optional)

Drop a thumbnail to sample its colours or choose a file · paste with ⌘V / Ctrl+V · stays on your device

How the color contrast checker works

This color contrast checker measures how far apart two colours are in brightness, using the contrast ratio defined in the Web Content Accessibility Guidelines (WCAG). It works out the relative luminance of the text colour and the background colour, then divides the lighter by the darker, with a small offset for ambient light. The result runs from 1 : 1, two identical colours, to 21 : 1, black on white. Because the formula weights green far more heavily than blue, colours that look equally vivid can measure very differently: pure yellow is nearly as light as white, and pure blue is nearly as dark as black.

How to check the contrast of text on a thumbnail

Drop your thumbnail in. It is drawn on a canvas in your browser; nothing is uploaded.
Click inside a letter, then just beside it. The first click sets the text colour, the second the background. Click the middle of a stroke rather than its edge, where the pixels blend into the background. If your text has an outline, check the text against the outline and the outline against the background separately: the outline is what the eye reads against the image.
Read the result and the previews. The ratio is shown against each WCAG level, alongside a full-size, phone-feed-size and greyscale preview of the pair. If it falls short, the tool offers the closest text colour that passes, made by darkening or lightening your colour as little as possible so it keeps its hue where it can.

Which ratio to aim for

WCAG asks for at least 4.5 : 1 for normal text and 3 : 1 for large text at level AA, and 7 : 1 and 4.5 : 1 at level AAA. Large means at least 18 point, or 14 point bold. These levels are written for web pages, and YouTube publishes no contrast rule for thumbnails, so treat them as a well-tested yardstick rather than a requirement. Thumbnail text is almost always large, but it is also viewed shrunk on a phone and over a busy image, which is why 4.5 : 1 is a safer target than the large-text minimum.

Why check from the image

Most contrast checkers ask you to type two hex codes, which means opening an editor first to find them. This one samples the real pixels from your thumbnail, runs entirely in your browser with no signup, and suggests a fix instead of only a pass or fail. Ratios are truncated rather than rounded, so 4.49 : 1 never shows as a pass.

To choose colours that work before you design, read the best colours for YouTube thumbnails and how to make thumbnails colourblind friendly, pull a palette with the color palette extractor, see the result at real feed sizes with the thumbnail preview, or make a thumbnail with Thumblore.

Last updated November 6, 2026.

Frequently asked questions

What is a good color contrast ratio?

At least 4.5 : 1 for normal text and 3 : 1 for large text, which are the WCAG AA levels. AAA raises them to 7 : 1 and 4.5 : 1. For thumbnail text that will be seen small on a phone, clearing 4.5 : 1 is a sensible target even though the text is large.

How do I check the contrast of text in an image?

Sample the text colour and the background colour from the image and compare them. Drop the image into this tool, click inside a letter and then just beside it, and the ratio appears at once. Click the centre of a stroke, because edge pixels are blended with the background.

How is the contrast ratio calculated?

It is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker. Relative luminance converts each sRGB channel to linear light and weights red, green and blue by 0.2126, 0.7152 and 0.0722, which is why green and yellow read so much lighter than blue.

Does YouTube have a contrast requirement for thumbnails?

No. YouTube does not publish a contrast rule for thumbnails. The WCAG levels are written for web content, but they are a well-tested measure of whether text stays readable, which is exactly what a thumbnail needs at small size.

Is my thumbnail uploaded anywhere?

No. The image is read and sampled by your own browser, and nothing is sent to a server. You can disconnect from the internet once the page has loaded and the tool keeps working.

Stop designing thumbnails. Start generating them.

Describe your video, pick your face, and Thumblore returns click-ready 1280×720 thumbnails in seconds — free to start.

Try Thumblore free