Contrast Checker (WCAG)

Knowledge Base

How to Use the Contrast Checker

The Contrast Checker (WCAG) analyzes your YouTube thumbnail design to ensure text and elements are readable at small sizes. Upload your thumbnail image and the tool highlights readability issues that could hurt click-through rate.

Why Thumbnail Contrast Matters

On YouTube's homepage, thumbnails are 168x94 pixels. On YouTube search, 120x90 pixels. On mobile, even smaller. If your thumbnail is beautiful at full size but unreadable when tiny, it won't get clicks. Contrast is critical.

Thumbnail Best Practices

• High Contrast: Light text on dark background or vice versa. Avoid light text on light background.
• Bold Fonts: Thin, delicate fonts disappear at small sizes. Use heavy sans-serif (Impact, Oswald, Montserrat Bold).
• Large Text: Minimum 24pt, 36pt+ is safer. No thin text smaller than 20pt.
• Focal Point: Put the most eye-catching element in the center. Avoid clutter on edges.
• Face Dominance: A large face with expression gets 30% more clicks than landscapes or objects.

A/B Testing Thumbnails

Create 2-3 thumbnail variations and upload the same video with different thumbnails. YouTube Studio shows click-through rate. Use the winner for similar future videos. Test bold colors, face expressions, and text phrasing.

FAQ

Q: Should my thumbnail match my brand or optimize for clicks?
A: Optimize for clicks first. Brand consistency is secondary to viewership growth. Your channel's subscriber base becomes your brand over time.

Q: Are all-caps titles better than title case?
A: ALL-CAPS is more impactful at small sizes. But multiple videos with all-caps can look spammy. Mix it up.

Meeting the contrast requirements

Contrast ratio compares the relative brightness of two colours, running from 1 to 1 for identical colours up to 21 to 1 for black against white. The accessibility standard asks for at least 4.5 to 1 for ordinary text and 3 to 1 for large text, which means about 24 pixels, or 19 pixels when bold. Interface components and meaningful graphics also need 3 to 1.

The ratio depends on brightness rather than on hue, which surprises people. Yellow on white fails badly despite the colours being obviously different, because both are bright. Dark blue on black fails for the same reason in reverse. If two colours have similar brightness, no amount of hue difference between them will pass.

Text over video or photography is the hard case, because the background changes from frame to frame. A caption passing against one shot fails against the next. The reliable fixes are a solid or semi-transparent plate behind the text, or an outline around the letters. Both guarantee a known background regardless of what the picture does.

Thumbnails need more contrast than the standard requires, not less. They are viewed small, often on a phone in daylight, and compressed heavily by the platform. Text passing at exactly 4.5 to 1 on a large monitor can become unreadable at thumbnail size, so treat the requirement as a floor rather than a target.

Vocabulary

Contrast ratio. A number comparing the relative brightness of two colours, from 1 to 1 for identical up to 21 to 1 for black on white. Calculated from brightness alone, so two very different hues of similar brightness score poorly.

WCAG. The Web Content Accessibility Guidelines, the international standard for making content usable by people with disabilities. Level AA is the level most organisations and regulations require, and it sets the 4.5 to 1 text contrast figure.

Large text. Text at roughly 24 pixels or above, or 19 pixels when bold. Permitted a lower contrast ratio of 3 to 1 because larger letterforms remain legible with less separation from their background.

Plate. A solid or semi-transparent shape placed behind text so it sits on a known background instead of directly on moving picture. The standard solution for captions and lower thirds over video.