What Is Color Contrast (and Why Does WCAG Set Ratios)?
Updated 4 November 2026
Jump to section
Color contrast is the measured difference in luminance, or perceived brightness, between text and the background behind it, written as a ratio from 1:1 to 21:1. WCAG, the web accessibility standard, sets minimum ratios so text stays readable. It asks for at least 4.5:1 on normal text (W3C, updated September 2026) and 3:1 on large text at the AA level. Pale gray on white is the classic failure.
How a contrast ratio is measured
A contrast ratio compares the relative luminance of two colors, meaning how much light each one reflects. WCAG expresses it as (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 the darker.
The scale runs from 1:1 to 21:1. Black text on white sits at 21:1, the maximum, while two close shades of gray might land near 1.5:1, far too low to read.
The WCAG levels for contrast
WCAG sets different ratios at different conformance levels. The common AA target asks for 4.5:1 on normal text and 3:1 on large text.
The stricter AAA level raises that to 7:1 for normal text and 4.5:1 for large.
"Large" has a specific meaning here. It means at least 18 point, or 14 point bold, roughly 24 and 18.5 pixels. Bigger, heavier text reads more easily, so it is allowed a lower ratio.
| Text or element | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt, or 14pt bold) | 3:1 | 4.5:1 |
| Icons, buttons, graphics | 3:1 | Not set |
Source: W3C, WCAG 2.2 Understanding documents, success criteria 1.4.3, 1.4.6, and 1.4.11 (linked in this section).
Icons, form borders, and focus outlines fall under a separate rule, Non-text Contrast, which asks for 3:1 against whatever sits next to them.
Why the ratios exist
The ratios exist because readability can be measured, and it varies by eyesight. Low contrast that a young designer reads fine can be invisible to an older customer, or to anyone squinting at a phone in bright sunlight.
WCAG chose 4.5:1 to make up for the contrast sensitivity lost with moderately low vision, color deficiencies, and aging, and its rationale ties the figure to roughly 20/40 vision. Large text is allowed 3:1 because, in WCAG's words, text that is larger and has wider character strokes is easier to read at lower contrast.
This is why low-contrast text is the most common failure in WebAIM's February 2026 scan of one million home pages. It is easy to introduce with a fashionable pale palette, and quick to fix once you spot it.
A pattern we see is owners judging a design by how it looks rather than how it works for a visitor. Pale body text chosen because it looks elegant is that mistake in its most common form, and it fails the readers who most need clear text.
Checking and fixing contrast
Checking contrast takes seconds with a free tool. The WebAIM Contrast Checker reports the exact ratio for any text-and-background pair, and Chrome's built-in Lighthouse audit flags failing text across a whole page.
When a color fails, darken the text or lighten the background until it passes. You can also increase the size and weight so it qualifies as large text and clears the lower bar.
Contrast has to pass in every theme, too. A gray that passes on white can fail on a dark background, because the ratio changes completely.
Good visual hierarchy does not depend on faint text. Guide the eye with size, weight, and spacing instead of by making secondary text hard to read.
Frequently asked questions
What contrast ratio does my website need?
At least 4.5:1 for normal text and 3:1 for large text, which meets the common AA standard. That is the AA level, the usual target for business sites. The stricter AAA level asks for 7:1 on normal text, which is worth aiming for on body copy but hard to hold everywhere. For most business sites, meeting AA cleanly is the realistic and sufficient goal.
What counts as large text in WCAG?
Text at 18 point or larger, or 14 point bold or larger, counts as large. In pixels that is roughly 24 pixels, or about 18.5 pixels when bold, though the standard is written in points. Large text is allowed a lower contrast ratio, 3:1 instead of 4.5:1, because the extra size keeps it legible. Headings usually qualify; body text usually does not.
Is pure black on white too harsh?
For some readers, yes, because a full 21:1 ratio can cause glare and visual strain on a bright screen. A very dark gray on an off-white background can read more comfortably while staying well above the 4.5:1 minimum. The goal is strong, comfortable contrast, not the maximum possible. Test your specific colors rather than assuming black-on-white is always best.
How do I check my website's color contrast?
Use a free checker that reports the exact ratio. The WebAIM Contrast Checker lets you paste two colors, and Chrome's built-in Lighthouse audit flags failing text across a whole page in one run. Design tools like Figma also have contrast plugins. Check your real text colors against their real backgrounds, including any dark theme, since a passing pair in one theme can fail in another.
Do icons and buttons need to meet contrast rules?
Yes, under a separate rule called Non-text Contrast, which sets a 3:1 minimum. It covers interface parts a user must see to operate the page, like button edges, form field borders, focus outlines, and meaningful icons. Purely decorative graphics are exempt. The practical takeaway is that a faint gray icon or a barely-visible field border can fail accessibility just as text does.
Does color contrast affect SEO?
Not directly, because search engines rank content and relevance, not color choices. The overlap is indirect but real. Good contrast improves readability and accessibility, which keeps visitors on the page and supports the page experience signals that do matter for ranking. Poor contrast that drives people away works against you, even though no algorithm measures the ratio itself.
Readable beats fashionable
Storming Solutions builds custom-coded websites for Malaysian businesses from Kuala Lumpur, and runs SEO, AEO, and GEO. We set text contrast to clear AA from the first design draft. A palette that looks refined on a designer's monitor still has to work for a real customer in a sunlit shop.
Our honest view is that faint, low-contrast text is one of the most common and most avoidable design mistakes. Not sure your site is readable for everyone? Talk to us about web development, and we will check it against the standard.