Color Contrast

What Is Color Contrast?

TL;DR: Color contrast is the difference in brightness between two colors, most importantly between text and the background behind it. It is measured as a ratio, from 1:1 (no contrast) to 21:1 (black on white). For accessibility, WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA, the level most laws require. Good contrast makes content readable for people with low vision or color blindness, and for everyone in poor lighting. This guide covers the ratios, the WCAG rules, and how to check your site.

Color contrast is what makes text easy or hard to read against its background. When the contrast between the two is high, like dark text on a white page, almost anyone can read it. When it is low, like light gray text on a white page, the text becomes difficult or impossible to read for many people. Sufficient color contrast is one of the most common and most fixable parts of web accessibility.

It is also one of the most frequently failed. Low-contrast text is everywhere on the web, usually because a design looked fine to the person who built it, on a good screen, in good light. But readability is not universal, and contrast is the measurable way to make sure text works for everyone, not just for people with sharp vision on a bright monitor.

What is color contrast?

Color contrast is the measured difference in relative brightness, or luminance, between two colors. In web accessibility, it almost always refers to the contrast between text and its background, though it also applies to important visual elements like buttons and icons.

Contrast is expressed as a ratio. The scale runs from 1:1, where the two colors are identical and there is no contrast at all, up to 21:1, the maximum, which is pure black text on a pure white background. The higher the ratio, the greater the difference in brightness, and the easier the text is to read. A contrast checker calculates this ratio for you, so you never have to work out the math by hand.

Why color contrast matters

Contrast is not about aesthetics. It is about who can actually read your content.

Millions of people have some degree of low vision, and low-contrast text is one of the first things that becomes unreadable for them. Color blindness affects roughly 1 in 12 men and 1 in 200 women, and it can make certain color combinations blur together. Contrast requirements also help the growing number of older users, whose vision naturally changes with age, and they help everyone in situational cases, like reading a phone screen in bright sunlight. Strong contrast is a clear example of an accessibility improvement that makes a site better for its entire audience.

WCAG color contrast requirements

To make "enough contrast" specific and testable, WCAG sets exact minimum ratios. These are the thresholds a contrast checker measures against.

A few notes on reading this table. Level AA is the standard most organizations and laws require, so 4.5:1 for normal text and 3:1 for large text is the practical target. "Large text" means at least 18 point (about 24 pixels), or 14 point (about 19 pixels) if bold. Non-text contrast covers the edges of interface elements like buttons and input fields, so users can tell where they are, not just read the words.

One forward note: a future version of the standard, WCAG 3.0, is exploring a new way of measuring contrast that better reflects human perception. It is still in draft and years away, so the ratio-based thresholds above remain the current standard to build against.

How to check color contrast

You do not have to guess. A color contrast checker takes two colors, your text and your background, and returns the exact ratio along with which WCAG levels it passes.

Free tools like the WebAIM Contrast Checker, and the contrast tools built into browser developer tools and most design software, do this instantly. For a whole site, an accessibility testing tool checks contrast across many pages at once rather than one color pair at a time.

The catch is that checking once is not the same as staying compliant, which brings us to the real challenge.

Why color contrast keeps breaking

Here is why contrast is not a set-and-forget item. A website's colors change more often than you would think. A brand refresh tweaks the palette. A designer lightens a button for a cleaner look. A new page uses a slightly different gray. A theme update changes a default color. Any of these can push text below the contrast threshold, and none of them announce that they just made your content harder to read.

That is the shelf-life problem. You can fix every contrast issue on your site today and reintroduce one next week with a single color change. Because contrast failures are invisible to the person making the change, who can usually read the text just fine, they slip through constantly. Staying readable depends on something checking contrast continuously, not just once, which is what ongoing web accessibility monitoring provides.

Frequently asked questions

What is color contrast? Color contrast is the difference in brightness between two colors, most importantly between text and its background. It is measured as a ratio from 1:1, meaning no contrast, to 21:1, meaning black on white. Higher contrast makes text easier to read, and in web accessibility, meeting a minimum contrast ratio is what ensures content is readable for people with low vision or color blindness.

What is a good color contrast ratio? For accessibility, a good ratio meets WCAG Level AA: at least 4.5:1 for normal text and at least 3:1 for large text. If you want to meet the stricter Level AAA, aim for 7:1 for normal text and 4.5:1 for large text. Higher is always safer, and pure black on white, at 21:1, is the maximum possible.

What is the difference between WCAG AA and AAA contrast? Level AA, the standard most laws require, needs 4.5:1 for normal text and 3:1 for large text. Level AAA, the enhanced level, needs 7:1 for normal text and 4.5:1 for large text. AAA provides better readability for people with more significant low vision, but it is harder to achieve across a whole site, so most organizations target AA.

What counts as large text for contrast? Under WCAG, large text is at least 18 point, roughly 24 pixels, or at least 14 point, roughly 19 pixels, if it is bold. Large text qualifies for the lower 3:1 contrast requirement at Level AA because bigger, heavier text is easier to read at lower contrast. Anything smaller is treated as normal text and needs the higher 4.5:1 ratio.

How do you check color contrast? Use a color contrast checker, which takes your text and background colors and returns the exact ratio plus the WCAG levels it passes. Free options include the WebAIM Contrast Checker and the contrast tools inside browser developer tools and design software. To check an entire site rather than one color pair, use an accessibility testing or monitoring tool that scans every page.

Why does color contrast matter? Sufficient contrast makes text readable for people with low vision, color blindness, and age-related vision changes, and for anyone in difficult conditions like glare or a dim screen. Low-contrast text excludes a large group of readers, often without the site owner realizing it, since the text looks fine to them. Meeting contrast requirements is one of the simplest, highest-impact accessibility improvements you can make.

Related terms

• Alt Text
• Accessibility Audit
• Focus Indicator

---

Written by the Kapient team. Last updated: September 15, 2026.