Caption Color and Contrast for Readability
Use near-white text (not pure white), set a hard contrast separator behind it, a stroke, a drop shadow, or a semi-opaque background box, and pick the separator by what's behind the words, not by taste. That combination keeps captions readable over dark, bright, and busy footage alike. The color of the text matters far less than the separation between text and frame.
That last point is the one most people get wrong. They fuss over the perfect brand color for the caption and skip the part that actually decides whether anyone can read it: the contrast layer sitting between the letters and a moving background. A clip's background is never one color, it shifts every frame as someone leans, gestures, or the lighting changes. Static text over moving video is a contrast problem first and a design problem second.
Why contrast decides whether the clip works at all
Most short-form video is watched without sound. The commonly cited range is 75–85% on mute: ad-tech firm Sharethrough reported that about 75% of people surveyed keep their phone muted even while a video plays, and Digiday reported as far back as 2016 that about 85% of Facebook video is watched without sound. Those are publisher- and survey-reported, directional figures rather than a single audited number, but the direction is not in dispute. If the audio is off, the caption is the audio. A caption a viewer can't read in the first second is a clip that gets scrolled past.
There's a second, quieter reason to take this seriously. A meaningful slice of your audience needs the contrast regardless of sound, viewers with low vision, viewers watching on a cracked phone in daylight, viewers half-watching while doing something else. Designing for the hardest case makes the clip better for everyone. For the full accessibility picture beyond contrast, see our guide to building genuinely accessible captions.
What color should captions actually be?
White text. Near-white, to be exact, #F5F5F5 rather than #FFFFFF, paired with a dark separation layer behind it. White over a dark stroke is the most reliable combination because it survives the widest range of backgrounds, and pulling the white down a few points off pure white softens the harsh edge against very dark footage without costing legibility. Reserve color for one highlighted keyword, never the whole line.
Pure white on its own fails the moment the footage goes bright, a window, a white shirt, a sunlit wall, because white-on-white has no contrast at all. That's why the color question is a trap: any single text color will fail against some frame in a moving clip. The fix isn't a cleverer color. It's a contrast layer that travels with the text. Keep the palette boring on purpose: white body text, a black or near-black separator, and at most one accent color for emphasis. If you want to drive attention to a specific word instead of lighting up the whole line, read our keyword highlighting decision rule.
The three techniques that create contrast
Three rendering techniques carry the contrast load. Each handles a different kind of background, and a strong caption usually combines two of them.
1. Stroke (outline). A dark line traced around every letter. This is the workhorse, it gives the text a hard edge against busy, mid-toned footage where neither black nor white wins on its own. Set the stroke 8–12% of the cap height: thick enough to read, thin enough that letters don't fuse into a blob. Too thin and it disappears under compression; too thick and the counters (the holes in a, e, o) close up. Black or near-black (#0A0A0A) at full opacity.
2. Drop shadow. An offset, blurred copy of the text sitting behind it. Shadow is softer than stroke and reads beautifully over dark or evenly-lit footage where a hard outline would look heavy. On its own it's weaker than a stroke against bright backgrounds, which is why the best default is both: a tight stroke for the hard edge plus a subtle shadow for depth. Keep the offset small (2–4px) and the blur modest; a big soft shadow muddies more than it helps.
3. Background box. A semi-opaque panel, usually black at 60–75% opacity, sitting behind the caption line. This is the guarantee. A box forces contrast regardless of what's behind it, which makes it the right call for the hardest cases: bright outdoor footage, rapidly shifting backgrounds, or screen-recording clips where the background is unpredictable. The cost is that it covers more of the frame and reads as more "produced," so it's a deliberate look rather than a default. Round the corners slightly and add a few pixels of padding so the text never touches the edge.
The contrast targets you can actually hit
Aim the text-to-separator contrast at the WCAG large-text bar as a floor and the normal-text bar as your real target. The Web Content Accessibility Guidelines define a contrast ratio on a 1:1 to 21:1 scale, and WCAG 2.2 Success Criterion 1.4.3 sets the minimums. Captions are large text by definition (they're big and bold), so 3:1 is the floor, but you should clear 4.5:1, and white on a black stroke gets you near the 21:1 ceiling anyway.
| Conformance level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
The practical implication is freeing: you do not need a contrast checker open while you edit. If the white text sits on a solid black stroke or a 70%-opacity black box, you're already at roughly 21:1 against the separator, past every threshold. The contrast math only gets hard when you skip the separator and let raw text fight the footage. Check the exact ratio of a color pair with WebAIM's checker only when you're using a colored box or a non-black stroke.
The decision rule: pick the technique by what's behind the words
Don't apply the same caption treatment to every clip. Choose the separator by the footage type, because the background is the variable that breaks captions.
- Dark, evenly-lit footage (a studio with dark backdrop): shadow plus a thin stroke. The hard edge isn't doing much work here, so let the shadow give depth.
- Busy, mid-toned footage (most interview and on-the-go clips): a strong stroke. This is the default for the majority of podcast clips because the background is unpredictable but not blown-out.
- Bright or rapidly shifting footage (outdoor, screen-shares, fast cuts): a background box. Stop fighting the frame and guarantee the contrast.
If you only remember one thing: when you can't tell which case you're in, use a box. It costs a little screen real estate and reads as more produced, but it never fails.
Common mistakes (and the fix)
These are the contrast failures I see most when reviewing clips, in order of how often they sink an otherwise good edit.
- Raw text with no separator. The single most common one. White (or worse, gray) text dropped straight onto footage. It reads fine on the one frame the editor checked and vanishes on the next. Fix: never ship a caption without at least a stroke.
- Pure white on bright footage. White-on-white has zero contrast. Fix: add a box, or commit to a stroke heavy enough to hold the letters together against the brightness.
- Stroke too thin to survive compression. It looks crisp in the editor and turns to mush after the platform re-encodes the upload. Fix: size the stroke at 8–12% of cap height; if anything, err thick.
- Colored text for the whole line. Brand-blue or yellow body text drops the contrast and slows reading. Fix: keep body text near-white and use color on a single emphasis word only.
- A box so opaque it covers the speaker. A 100%-opacity black bar across the lower third hides the footage. Fix: 60–75% opacity, tight to the text, with rounded corners and small padding.
- Mismatched treatment across a clip's cuts. Captions look great over the intro and disappear at a brighter cut. Fix: pick the treatment for the worst frame in the clip, then apply it throughout.
A related judgment call is whether your captions are burned in or toggleable, which changes how much the contrast has to do on its own, we cover that in burned-in vs soft captions. And if your captions are auto-generated, fixing contrast is the easy part once the text itself is right; start with the full caption workflow and the auto vs manual caption tradeoff.
FAQ
What color should subtitles be for the best readability?
Near-white (#F5F5F5) text with a dark separator behind it, a black stroke, a drop shadow, or a semi-opaque box. White survives the widest range of backgrounds, and the separator is what actually creates the contrast. Save any accent color for a single highlighted keyword, never the whole line.
Do I need a background box behind captions?
Only for the hardest footage. A box guarantees contrast over bright, outdoor, or rapidly shifting backgrounds where a stroke alone might lose. For most interview and studio clips, a strong stroke plus a light shadow is enough and covers less of the frame. Use a box at 60–75% opacity, not solid black.
What contrast ratio do captions need to pass accessibility?
Captions count as large text, so the WCAG 2.2 AA floor is 3:1 and AAA is 4.5:1, per SC 1.4.3. You'll blow past both: white text on a black stroke or box sits near 21:1. The math only gets tight if you skip the separator and let raw text fight the footage.
How thick should the caption stroke be?
About 8–12% of the cap height. Thinner than that and platform compression eats it; thicker and the letters fuse and the counters close up. When in doubt, go slightly thick, a stroke that survives re-encoding beats a delicate one that looks better in your editor and worse on the feed.
Is yellow text better than white for captions?
No, not as a default. Yellow body text was a TV-era convention and reads slower than white at small sizes on a phone. White-on-dark-separator gives higher, more consistent contrast across backgrounds. Yellow can work as a single emphasis color on one word, against a dark stroke, but the body should stay near-white.