Slide contrast checker

How it works

The ratio follows the formula in the Web Content Accessibility Guidelines (WCAG) 2.x. Each color channel of an sRGB color is converted to a linear value, and the relative luminance is 0.2126 red, plus 0.7152 green, plus 0.0722 blue. The contrast ratio is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. It runs from 1:1 for two identical colors to 21:1 for black on white.

The thresholds come from the W3C: level AA asks for at least 4.5:1 for normal text and 3:1 for large text (Contrast (Minimum)), and level AAA asks for 7:1 and 4.5:1 (Contrast (Enhanced)). Large text means 18 point, or 14 point bold. The pass and fail marks use the exact ratio, and the displayed ratio is cut to two decimals, never rounded up, so 4.499 is not shown as 4.50.

Limits. WCAG is written for web content. Neither TikTok nor Instagram requires its ratios for photo posts, and WCAG sets no minimum font size. Whether your slide text counts as “large” depends on how big it appears on the viewer’s screen, which varies with their phone, so treat that choice as approximate. The tool checks two flat colors. Text over a photo has a changing background, so check the lightest and darkest parts behind the words, or put a solid or semi-transparent panel behind the text.

The “closest shade” suggestion moves your text color toward black or white in small steps until it reaches the target, so the result stays as close to your original as it can. For some backgrounds, no shade works, and then the answer is to change the background.

How to use the result

Aim for at least AA. Headlines can use the large-text value of 3:1, and body-size text should reach 4.5:1. A pair that passes AAA at 7:1 gives you extra room, which helps on dim screens, in sunlight, and for people with low vision.

A passing ratio does not make text readable by itself. Size, weight, line length and what sits behind the words all count. Look at the preview at the size of a phone screen, and then look at the real slide on a phone. Do not rely on color alone to carry meaning either, since some viewers cannot tell certain colors apart.

If a photo makes the background uneven, choose one of three fixes: darken or lighten the picture under the text, place the text on a solid panel, or move it to a calmer part of the image. Then run the pair through the checker again with the color of the panel.

This is a guide, not a promise about performance: we make no claim that higher contrast brings more views. The point is that people can read what you wrote. For more on contrast and readability on a phone, see the slideshow design guide. To check where covered areas fall, use the safe zone checker.