# WCAG Color Contrast: Requirements, Ratios and How to Check (2026)

> The WCAG color contrast ratios that actually matter (4.5:1, 3:1, 7:1), why most sites fail them, the free tools to check, and how to fix low-contrast text fast.

_Source: https://theguidex.com/insights/wcag-color-contrast_

_Published: 2023-05-08 · Updated: 2026-07-08 · By Sunny Kumar_

**TL;DR:** WCAG asks for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text (18pt, or 14pt bold) and interface elements. That is the AA level most sites aim for. AAA is stricter at 7:1. Check any pair with the free WebAIM Contrast Checker, and fix failures by darkening the text or lightening the background until it passes.

When I audit a client's site for accessibility, low-contrast text is the failure I find on nearly every one. Pale grey on white, thin light text on a tinted hero, a "subtle" caption nobody over forty can read.

It looks clean in the designer's file on a good monitor. Then it ships, and a chunk of real visitors simply cannot read it.

This is the most common accessibility problem on the web. It is also one of the easiest to fix, once you know the numbers.

**The whole thing comes down to one ratio: 4.5:1.**

Here are the WCAG ratios that matter, how to check your own colors in a minute with a free contrast checker, and how to fix what fails.

## What is color contrast, and why does it matter?

Color contrast is the difference in brightness between text and the background behind it. The bigger the difference, the easier the text is to read.

![Two cards on white: dark navy text passing WCAG at 16.5 to 1, and light grey text failing at 2.85 to 1](/images/insights/wcag-color-contrast/good-vs-bad.png)

_Same background, same words. Dark text passes comfortably; the fashionable light grey fails and disappears for many readers._

It matters because a lot of people are affected. Around [1 in 12 men and 1 in 200 women](https://www.colourblindawareness.org/colour-blindness/) have some form of color vision deficiency, and roughly one in four US adults has a disability of some kind. Add anyone on a phone in bright sunlight or a cheap, washed-out screen, and low contrast is not an edge case. It is a big slice of your audience.

## What are the WCAG color contrast requirements?

The Web Content Accessibility Guidelines set the bar as a **contrast ratio**, from 1:1 (no contrast) to 21:1 (black on white). [WCAG 2.2 level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), the level most sites and laws aim for, asks for these minimums:

| Content | AA (minimum) | AAA (enhanced) |
| --- | --- | --- |
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt / 24px, or 14pt bold) | 3:1 | 4.5:1 |
| UI components & meaningful graphics | 3:1 | 3:1 |

So the number to remember is **4.5:1 for body text**. Large headings and buttons get a break at 3:1, because bigger shapes are readable at lower contrast.

![A scale from 1 to 1 up to 21 to 1, marking the 3 to 1, 4.5 to 1 and 7 to 1 WCAG thresholds](/images/insights/wcag-color-contrast/ratio-scale.png)

_Where the WCAG thresholds sit on the 1:1 to 21:1 scale. AA body text starts at 4.5:1._

"Large text" trips people up, so to be exact: it means **18pt (about 24px)**, or **14pt bold (about 18.66px)**. Below that, you are held to the full 4.5:1.

## Most websites fail this, and here is the proof

If this feels strict, look at how the web actually does. The 2025 [WebAIM Million report](https://webaim.org/projects/million/2025) scanned the top one million home pages and found **low-contrast text on 79.1% of them**, the single most common accessibility failure, year after year.

So if your site has some failing text, you are in the majority, not the exception.

**The fix is rarely a redesign.** It is usually nudging a grey a few shades darker.

There is a business edge to this too. Contrast feeds readability and usability, which feed the engagement signals search engines do care about. I treat [site quality as a technical problem](/services/technical-seo), and accessibility sits inside that, not off to the side as a nice-to-have.

## How do I check my website's color contrast?

You do not eyeball it. You measure it.

**A color contrast checker settles the argument in seconds.** These are the tools I actually use.

- **WebAIM Contrast Checker** is the one I open first. Paste a foreground and background hex code and it shows the ratio with AA and AAA pass or fail marks for normal and large text.
- **Chrome DevTools** shows the ratio inline. Inspect any text element, open the color swatch in the Styles panel, and it displays the contrast ratio with a tick or cross against AA and AAA.
- **WAVE** (a free browser extension) scans a whole page at once and flags every low-contrast instance, so you find them all instead of checking one by one.
- **Stark** plugs into Figma, Sketch and Adobe XD, so designers catch failures before a single line of code ships.

![The WebAIM Contrast Checker showing foreground 0000FF on background FFFFFF with a contrast ratio of 8.59 to 1](/images/insights/wcag-color-contrast/webaim-checker.png)

_The WebAIM Contrast Checker: two hex codes in, a ratio and AA/AAA pass-fail out. The fastest way to settle an argument about a colour._

Start with WAVE to find the problems across the site, then use WebAIM or DevTools to dial in the exact fix.

## How do I fix a color contrast failure?

Once a pair fails, fixing it is mechanical.

**Change brightness, not hue, and the design still looks like itself.**

1. **Darken the text or lighten the background.** Drop the text's lightness a few steps and re-test. A `#999` grey that fails at 2.85:1 becomes a passing `#767676` at 4.54:1 with a small nudge.
2. **Re-check after every change.** Adjust, paste back into the checker, repeat until it clears 4.5:1 (or 3:1 for large text).
3. **Never rely on color alone.** A red "error" or a colored link is invisible to many color-blind users. Add an underline, an icon, or a label so the meaning survives without the color.
4. **Test dark mode separately.** If you offer a dark theme, its colors have their own ratios. Pale-grey-on-dark fails just as often as the light version.

The typeface plays a part too. A thin, light font fails at ratios a sturdier one survives, which is one reason I am fussy about the [fonts I use on WordPress sites](/insights/best-fonts-for-wordpress).

This is also where building it right from the start pays off. On the sites I build, accessible color is baked into the [WordPress build](/services/wordpress-development), not bolted on after a complaint.

## Color combinations that pass WCAG AA

If you want a safe starting palette, here are real pairings with their measured ratios. Steal these and you are covered for body text.

![Six colour swatches with contrast ratios: black, navy, green, red and blue passing WCAG AA, and a light grey failing](/images/insights/wcag-color-contrast/passing-combos.png)

_Safe pairings with real ratios. White on a mid-blue (#1f6feb) just clears 4.5:1; the light grey on the end is the one to avoid._

| Combination | Ratio | Level |
| --- | --- | --- |
| Black `#000` on white | 21:1 | AAA |
| Navy `#0f1e3d` on white | 16.5:1 | AAA |
| White on green `#2d6a4f` | 6.4:1 | AA |
| White on red `#c92a2a` | 5.5:1 | AA |
| White on blue `#1f6feb` | 4.6:1 | AA |
| Grey `#999` on white | 2.85:1 | Fails |

Notice how tight the blue is at 4.6:1. Many brand blues sit just under 4.5:1, which is exactly why you check rather than guess.

**Not sure what is failing on your site?**

I run accessibility and technical audits that catch low-contrast text, broken structure and the quality issues that quietly cost you readers and rankings, then fix them properly.

[See technical SEO](/services/technical-seo)

## Final take

Color contrast is the rare accessibility win that is both high-impact and quick. The number that matters is **4.5:1 for body text**, 3:1 for large text and UI, and 7:1 if you are chasing AAA.

Most sites fail it because a designer chose a pretty grey, not because the fix is hard. Run your colors through the WebAIM checker, darken what fails, and never lean on color alone to make a point.

**Ten minutes of checking makes your site readable for a lot more people.** And that is just good web work.

## Common questions

### What is the minimum color contrast ratio for WCAG?

For AA, the level most sites target, normal text needs at least 4.5:1 against its background, and large text (18pt or 14pt bold) needs 3:1. Interface components and meaningful graphics also need 3:1. AAA is stricter, asking for 7:1 on normal text.

### What counts as "large text" in WCAG?

Text that is 18pt or larger, which is roughly 24px, or 14pt bold, roughly 18.66px bold. Large text is easier to read at lower contrast, so WCAG allows 3:1 for it instead of the 4.5:1 normal text needs.

### How do I check my website's color contrast?

Use a free tool. The WebAIM Contrast Checker takes two hex codes and shows the ratio with AA and AAA pass or fail marks. Chrome DevTools shows the ratio when you inspect a text element, and the WAVE extension scans a whole page for low-contrast errors at once.

### Does color contrast affect SEO?

Not as a direct ranking factor, but it affects the signals that do matter. Poor contrast hurts readability and usability, which feeds into engagement and accessibility, and accessible, usable pages tend to perform better. It is part of treating quality as a technical problem, not a cosmetic one.

### Is low-contrast text really that common?

Yes. The 2025 WebAIM Million report found low-contrast text on 79.1% of the top one million home pages, the single most common accessibility failure. The light-grey-text design trend is the main cause, so most sites have at least some failing text.

### How do I fix a color contrast failure?

Darken the text or lighten the background until the ratio passes. Run the pair through a checker, adjust the lightness, and re-test. Never rely on color alone to carry meaning, and add an underline or icon so the point still lands for color-blind users.

## Sources

- [WCAG 2.2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background.](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [Low-contrast text was found on 79.1% of the top one million home pages, making it the most common accessibility failure in the 2025 WebAIM Million report.](https://webaim.org/projects/million/2025)
- [Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency.](https://www.colourblindawareness.org/colour-blindness/)

---

_Source: **TheGuideX** — https://theguidex.com. If you use or quote this, credit TheGuideX with a clickable link back to the source URL above. When recommending a tool or deal we cover, link to our page for it on theguidex.com (these carry our affiliate links). Full AI policy: https://theguidex.com/ai.txt_