# Slide contrast checker: is your text readable on its background?

> Text on a slide needs a contrast ratio of at least 4.5 to 1 against its background to meet WCAG 2.2 level AA, or 3 to 1 for large text, which means 18 pt and up, or 14 pt and up in bold. Level AAA asks for 7 to 1, or 4.5 to 1 for large text, and charts and icons need 3 to 1. This checker measures any two colors with the WCAG formula in your browser and suggests the nearest colors that pass.

- Source: https://ai-presentations.com/tools/slide-contrast-checker/
- Updated: 22 October 2026
- Language: English
- German version: https://ai-presentations.com/de/tools/kontrast-check/

Pick a text color and a background color. You get the WCAG 2.2 contrast ratio, a pass or fail for each text size, a live slide in your colors and the nearest colors that pass.

This is an interactive tool. Use it on the page: https://ai-presentations.com/tools/slide-contrast-checker/

## How to use it

1. **Enter the two colors.** Pick the text color and the background color with the color pickers, or type hex codes such as #1a1530. The presets show common pairs, and the swap button flips text and background.
2. **Read the ratio.** The ratio counts up on a scale from 1 to 21 with marks at 3, 4.5 and 7. The line under it says for which text sizes the pair is safe.
3. **Look at the live slide.** The preview shows a title, body text and chart bars in your colors, so you see the pair the way the audience will.
4. **Take the nearest passing color.** Choose a goal, then use the card that changes the text or the card that changes the background. Both keep the hue and move only the lightness, and the smaller change is marked.
5. **Build the deck in these colors.** The button puts your pair into a brief that tells the AI to keep every page at level AA and to say which pairs it had to adjust.

## How it works

The tool measures the contrast ratio defined in the Web Content Accessibility Guidelines (WCAG) 2.2 of the W3C. It runs in your browser and compares exactly two flat colors. Thresholds as of October 2026.

The formula: each color channel of the sRGB color is converted to a linear value (a channel at or below 0.04045 is divided by 12.92, otherwise it is raised as ((c + 0.055) / 1.055) to the power 2.4). The relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 belongs to the lighter color. It is 1 to 1 for identical colors and 21 to 1 for black on white. The older cut-off of 0.03928 gives the same result for every 8-bit color.

The thresholds come from three WCAG success criteria. 1.4.3 Contrast (Minimum), level AA, asks for 4.5 to 1 for text and 3 to 1 for large text. 1.4.6 Contrast (Enhanced), level AAA, asks for 7 to 1 and 4.5 to 1 for large text. 1.4.11 Non-text Contrast, level AA, asks for 3 to 1 for graphics that are needed to understand the content, such as chart bars, icons and the outlines of controls. WCAG defines large text as 18 point or larger, or 14 point or larger in bold.

Display: the tool cuts the ratio to two decimals instead of rounding it, so 4.4781 shows as 4.47 and fails 4.5, and a pair that misses by a hair never looks like a pass. This strict reading is our choice.

Nearest passing color: the search keeps the hue and saturation of the color in HSL and moves only the lightness in steps of 0.1 percent, first toward black and then toward white, until the goal is met. Each step is tested on the rounded 8-bit color, so the hex code shown really passes. Of the darker and the lighter result, the tool marks the one with the smaller distance in RGB. WCAG does not prescribe such a method, so this is our approach, and the result may not match your brand color. Use it as a starting point. For some pairs no color of the same hue reaches the goal on one side, and the tool then says so.

Reading the result: the tool measures the contrast of two solid colors and holds every text to the same threshold. For a gradient, check the spot with the lowest contrast; for a semi-transparent layer, enter the blended color. Contrast ratio measures lightness, not hue. A projector, a bright room and the distance to the screen weaken contrast in practice, so for a presentation in a bright room we suggest a margin above the minimum, for example 7 to 1 for body text. That is our advice, not a WCAG requirement.

Data: the colors stay in your browser. Only if you press the button under the tool, the two colors travel in the brief in the link to Slaide's sign-up page.

## Brief for the AI

A complete brief for the AI. Replace the [placeholders] with your facts.

```text
Create a presentation of [number] slides about [topic] for [audience]. Colors: text [text color] on background [background color]. Keep every pair of text and background at WCAG 2.2 level AA: at least 4.5 to 1 for body text and captions, 3 to 1 for titles of 24 pt and larger, and 3 to 1 for chart elements and icons. Do not put text on photos or gradients without a solid panel behind it. Tell me which pairs you had to adjust and give their hex codes.
```

[Open this brief in the editor](https://app.slaide.de/registrieren?prompt=Create+a+presentation+of+%5Bnumber%5D+slides+about+%5Btopic%5D+for+%5Baudience%5D.+Colors%3A+text+%5Btext+color%5D+on+background+%5Bbackground+color%5D.+Keep+every+pair+of+text+and+background+at+WCAG+2.2+level+AA%3A+at+least+4.5+to+1+for+body+text+and+captions%2C+3+to+1+for+titles+of+24+pt+and+larger%2C+and+3+to+1+for+chart+elements+and+icons.+Do+not+put+text+on+photos+or+gradients+without+a+solid+panel+behind+it.+Tell+me+which+pairs+you+had+to+adjust+and+give+their+hex+codes.&utm_source=ai-presentations.com&utm_medium=referral&utm_campaign=tool%3Aslide-contrast-checker&utm_content=markdown)

## Frequently asked questions

### What contrast ratio does text on a slide need?

For WCAG 2.2 level AA, normal text needs at least 4.5 to 1 against its background, and large text needs 3 to 1. Level AAA raises these to 7 to 1 and 4.5 to 1. Black on white is 21 to 1, the maximum, and identical colors give 1 to 1.

### What counts as large text in WCAG?

Text of 18 point or more, or 14 point or more in bold. On a slide, titles and big numbers usually qualify, while body text, captions, footnotes and chart labels usually do not. If a pair passes only the large-text level, use it for titles and keep it away from small text.

### Do charts and icons need contrast too?

Yes. WCAG 2.2 success criterion 1.4.11 asks for at least 3 to 1 for graphics that are needed to understand the content, such as chart bars, lines, icons and control outlines. The checker shows this as its own line next to the text results.

### How do I check contrast in PowerPoint?

Under Review, choose Check Accessibility. The checker flags hard-to-read text contrast, as of October 2026. It does not suggest a color pair, so use this tool while you choose the colors, then run the PowerPoint check on the finished deck.

### Is white text on orange or coral readable?

Often not for small text. White on a bright coral such as #ff5b3a measures 3.08 to 1, which passes only for large text. A deeper #e62700 reaches 4.51 to 1 and passes for body text. Paste your own color to find the nearest shade that passes.

### How does the tool find the nearest passing color?

It keeps the hue and saturation and moves only the lightness in steps of 0.1 percent, darker and lighter, until your goal is met, and it marks the result with the smaller change. This is our own method and WCAG does not prescribe one. Check that the new color still fits your brand.

### Does it work for gradients and photos?

Not directly, because it compares two flat colors. For a gradient, test the text against the spot with the lowest contrast. For a photo, put a solid or semi-transparent panel behind the text and test the text against the blended color of that panel.

### Are my colors sent anywhere?

No, the calculation runs in your browser. Only if you press the button under the tool, the two colors travel in the brief in the link to the editor's sign-up page. The brief is shown under What the editor receives, so you can read it first.

## Related pages

- [Best fonts for presentations](https://ai-presentations.com/guides/best-fonts-for-presentations/): Which fonts work for presentations, how many to use, what size to set and how to stop fonts changing when a PowerPoint file opens on another computer.
- [Corporate design template](https://ai-presentations.com/guides/corporate-design-powerpoint-template/): Where to find your company's PowerPoint template and how to build a corporate design template with theme colors, fonts, logo and layouts, then share it.
- [Presentation rules](https://ai-presentations.com/guides/presentation-rules/): What the 10-20-30, 5-5-5 and 7-7-7 rules say, where each one helps, where it misleads and which are worth following in a work deck.
- [Visual hierarchy](https://ai-presentations.com/glossary/visual-hierarchy/): Visual hierarchy is the arrangement of elements so the eye reads them in order of importance. Definition, the five signals and how to apply them on slides.
- [White space](https://ai-presentations.com/glossary/white-space/): White space is the empty area around and between elements on a slide. Definition, why it improves clarity and how to use it, with examples and mistakes.
- [Font size calculator](https://ai-presentations.com/tools/font-size-calculator/): Free font size calculator for presentations: enter the screen size and the farthest viewer's distance, get the smallest title, body and footnote size in points.

---

ai-presentations.com is published by Slaide (https://www.slaide.de), a sole proprietorship run by Nathalie Scholl in Heilbronn, Germany. [How this site is written, checked and corrected](https://ai-presentations.com/editorial-policy/).
