Text contrast on slides: WCAG ratios, the math and 5 fixes for photos

Is WCAG contrast a rule for TikTok and Instagram slides?

No. WCAG is a web accessibility standard. As of the W3C page updated on 6 September 2026, success criterion 1.4.3 (Contrast Minimum, level AA) asks for a ratio of at least 4.5:1 for text and 3:1 for large-scale text (opens in a new tab). W3C counts 18 point, or 14 point bold, as large. The stricter Contrast Enhanced criterion (opens in a new tab) asks for 7:1, or 4.5:1 for large text.

WCAG is written for web content and sets no minimum font size, and we found no TikTok or Instagram rule that applies it to photo posts. Applying it to a slide image is an analogy. We use it as a benchmark because it is the best public yardstick for "can people read this", and it gives you a number instead of an opinion. The slideshow design guide lists it as rule 3 of 8.

How is a contrast ratio calculated?

The ratio compares the relative luminance of two colors. Here it is worked by hand for white text on a sage green, #5E8C61.

1. Convert each channel to a 0 to 1 value. Red 94 gives 0.3686, green 140 gives 0.5490 and blue 97 gives 0.3804.
2. Linearize each value. If it is 0.04045 or less, divide by 12.92. Otherwise compute ((value + 0.055) / 1.055) to the power 2.4. That gives 0.1119, 0.2623 and 0.1195.
3. Weight them: L = 0.2126 x 0.1119 + 0.7152 x 0.2623 + 0.0722 x 0.1195 = 0.0238 + 0.1876 + 0.0086 = 0.2200.
4. White has L = 1. The ratio is (lighter + 0.05) / (darker + 0.05). White text: 1.05 / 0.27 = 3.889, shown as 3.88. Black text: 0.27 / 0.05 = 5.4 (5.3998 with the unrounded luminance, shown as 5.39).

We cut results to two decimals instead of rounding, so a near miss never shows as a pass. The result: white text on this green fails 4.5:1 but passes 3:1, while black text passes 4.5:1. Neither is obvious by eye, which is why you measure.

One consequence of the formula is worth knowing. On any single flat color, the better of black and white text reaches at least 4.58:1. The two ratios are equal when (L + 0.05) squared equals 0.0525, and that ratio is the square root of 21. So on a flat background you can always find a passing text color. Trouble starts with photos, where one line of text crosses light and dark patches.

What ratio do you get over photo patches?

A photo is many backgrounds at once. The table lists five made-up patches, such as you might sample from a landscape. The hex values are illustrative.

For a line of text, use the worst patch under it, not the average. White text across the sky and the foliage scores 1.46, the sky's value. Black text across the same two patches scores 5.75, the foliage's value, and passes. Across the sky and the water, black scores 2.25 and white 1.46, so neither color works as it is, and you need a fix.

How do you check a slide?

1. Export the slide as you will post it, so you measure the real pixels.
2. Zoom in on each text block and find the lightest and darkest patch behind it with any color picker. For light text, the lightest patch is the worst case. For dark text, it is the darkest.
3. Enter the text color and that patch color in the free slide contrast checker, or work the four steps above.
4. Compare the result with 4.5:1 for body text and 3:1 for headline-size text.

What counts as large? WCAG's 18 point is about 45 to 50 px on a 1080 px slide, and 14 point bold about 35 to 39 px, using the roughly 2.5 to 2.8 times scale from the words per slide page. That is our estimate, not a W3C figure. We apply 3:1 only to headline-size text and keep body text at 4.5:1.

What are five fixes for text over a photo?

1. Switch the text color. Pick whichever of black and white scores higher on the worst patch. On the foliage, black gives 5.75 and white 3.65. This costs nothing but only works when the patches under the text are similar.

2. Add an overlay. A black layer at opacity a multiplies each channel by (1 - a). The table shows the lowest opacity we found for white text on each patch, in steps of 0.01. It assumes a simple per-channel blend of sRGB values, so sample your result, because some tools blend differently. The ratios in this section come from unrounded blends, so re-measuring a printed hex value can differ by up to 0.04.

At opacity 0.5 the bright sky becomes #606D77, and white text scores at least 5.3.

3. Put the text on a label box. A box at black opacity 0.75 turns even a pure white photo into #404040, so white text scores at least 10.3 whatever the picture is. The cost is that the box covers part of the picture.

4. Move the text. Moving a headline from the sky to the water raises white text from 1.46 to 9.30. Check that the new position stays clear of the interface (see the safe zone page).

5. Make the line headline-size. White text on the foliage passes 3:1 (3.65) but not 4.5:1. If the line is a headline of 72 px or more, 3:1 is the benchmark you hold it to. If it is body text, use fix 1, 2 or 3 instead.

Outlines, blur panels and scrims are compared by how they look and where they fail on the text over images page. The ratios above are the numbers behind them.

What should you check before you export?

• You sampled the worst patch behind every text block, not the middle.
• Body text reaches 4.5:1 and headline-size text 3:1.
• Any overlay was sampled after it was applied.
• Light text sits on the darkest areas, and dark text on the lightest.
• You looked at the slide on a phone, not just the ratio.