Short answer: Under WCAG level AA, normal text needs a contrast ratio of 4.5 to 1 or more against its background, and large text needs 3 to 1 or more. Chrome DevTools checks it for free: its Color Picker shows the ratio of any text, and CSS Overview lists every low-contrast text on the page. Check light and dark mode, buttons and small print, not only body text.
What WCAG asks for
The W3C’s rule for minimum contrast, level AA, sets the floor at 4.5 to 1 between text and its background. Large text, meaning 18 point or 14 point bold, needs at least 3 to 1. The stricter level AAA raises those to 7 to 1 and 4.5 to 1.
Logos and brand names have no contrast requirement, and neither do pure decoration or text in an inactive control. Chrome’s documentation calls low-contrast text the top accessibility issue on the web: in February 2022, 83.9% of the top million home pages had it.
Contrast targets by type of text
| Text | Level AA | Level AAA |
|---|---|---|
| Normal text | At least 4.5 to 1 | At least 7 to 1 |
| Large text: 18 point, or 14 point bold | At least 3 to 1 | At least 4.5 to 1 |
| Logos and brand names | No requirement | No requirement |
| Pure decoration | No requirement | No requirement |
| Text in an inactive control | No requirement | No requirement |
From the W3C’s «Understanding» pages for success criteria 1.4.3 and 1.4.6, read November 3, 2026.
How to check the contrast of your site
- Open the page in Chrome and open DevTools.
- Run CSS Overview or a Lighthouse report to list every low-contrast text on the page.
- Inspect each one and open the Color Picker next to its text color to see the ratio.
- Compare it with 4.5 to 1, or 3 to 1 if the text is large.
- When it fails, pick the suggested color closest to your brand.
- Switch your site to dark mode, if it has one, and check again.
- Emulate vision deficiencies in DevTools to see the page the way visitors with those conditions see it.
Contrast is one requirement among many: our ADA website compliance guide shows how to make a small business website accessible. Our call to action guide covers the size and contrast of buttons.
How our own text measures up
On November 3, 2026, we read the contrast of one of our guides the way a visitor gets it, on a 1,440-pixel screen, in light and dark mode. Body text reaches 17.96 to 1 in light mode and 15.83 to 1 in dark mode, and headings 19.45 and 16.79 to 1.
The lowest is our main button, at 4.67 to 1 in light mode and 5.17 to 1 in dark mode: it passes AA by a small margin. Our source lines and table headers, at 14 pixels, measure between 6.45 and 6.98 to 1: they pass AA and stay below the 7 to 1 of AAA.
Before you call your colors accessible
- Body text reaches 4.5 to 1 or more.
- Large text reaches 3 to 1 or more.
- Buttons and links pass too, not only paragraphs.
- Small print, captions and footers pass.
- Dark mode passes on its own.
- CSS Overview or Lighthouse lists no low-contrast text.
Remember4.5 to 1 for text, 3 to 1 for large text. Check every color pair your visitors see, in light and dark mode.
If you want your site’s colors fixed without losing your brand, see our web design service.
Quick answers about color contrast
What is a good color contrast ratio?
Level AA sets 4.5 to 1 or more for normal text and 3 to 1 or more for large text. Level AAA raises those to 7 to 1 and 4.5 to 1. Higher ratios read more easily.
What counts as large text in WCAG?
The W3C judges 18 point text, or 14 point bold text, large enough to need less contrast. Large text needs 3 to 1 at level AA instead of the 4.5 to 1 that normal text needs.
Does my logo need to meet the contrast ratio?
No. WCAG says text that is part of a logo or brand name has no contrast requirement. The same goes for pure decoration and for text in an inactive control, such as a disabled button.
How do I check color contrast for free?
In Chrome DevTools. Inspect a text element and open the Color Picker next to its color: it shows the contrast ratio and whether it meets AA or AAA. CSS Overview and Lighthouse list every low-contrast text on the page.
Do I need to check dark mode separately?
Yes, because the colors change. On our own guide, the main button measured 4.67 to 1 in light mode and 5.17 to 1 in dark mode. Body text went from 17.96 to 15.83 to 1.
Sources
Read on November 3, 2026. W3C Web Accessibility Initiative: Understanding Success Criterion 1.4.3: Contrast (Minimum) and Understanding Success Criterion 1.4.6: Contrast (Enhanced). Chrome for Developers: Make your website more readable. Our own case: the text contrast of one of our guides at 1,440 pixels, in light and dark mode, on November 3, 2026.