What Is Color Contrast and How to Meet WCAG

Colour contrast is the measured difference in brightness between two colours — most importantly between your text and the background behind it. It is expressed as a ratio from 1:1 (two identical colours, invisible) up to 21:1 (black on white, maximum). The more contrast, the easier text is to read. WCAG sets minimums because low contrast is one of the most widespread barriers online: at Level AA you need 4.5:1 for normal text and 3:1 for large text and meaningful UI; Level AAA raises that to 7:1. The encouraging part is that meeting these thresholds rarely costs you a good-looking design — it usually just means choosing slightly darker or lighter shades. This guide explains the ratios, why they matter, how to measure them, and how to fix failures without making your site ugly.

It builds on what web accessibility is and why it matters and on the conformance levels covered in what WCAG is and the difference between A, AA and AAA.

What contrast ratio actually measures

When accessibility people talk about contrast, they mean a specific, calculated figure: the ratio of the relative luminance of the lighter colour to that of the darker one. Relative luminance is a model of how bright a colour appears to the human eye, weighting green most heavily, then red, then blue, because our eyes are most sensitive to green. The formula takes the two colours, computes each one's luminance, and divides the lighter by the darker, adding a small constant so the result lands between 1 and 21.

You do not need to run the maths by hand — every contrast checker does it for you — but the intuition is useful. 1:1 means the two colours are identical and the text is invisible. 21:1 is the theoretical maximum, pure black (#000000) on pure white (#FFFFFF). Everything else sits between. Mid-grey text on white might be 3:1; a typical dark-grey body text on white is comfortably above 10:1. Crucially, contrast is about luminance, not hue, which is why two colours that look very different (say, a medium red and a medium green) can still have poor contrast with each other — and why relying on colour differences alone is a separate accessibility problem from contrast.

The WCAG contrast requirements

WCAG specifies different thresholds for different things, and the distinctions matter. Here is the full picture across the levels:

What	WCAG AA minimum	WCAG AAA minimum
Normal text (under ~24px regular / ~18.66px bold)	4.5:1	7:1
Large text (≥24px regular / ≥18.66px bold)	3:1	4.5:1
UI components & graphical objects (form borders, icons, focus indicators, chart parts)	3:1	(covered by the same AA criterion)
Incidental / disabled / pure decoration	No requirement	No requirement

A few points unpack this table. Normal versus large text: WCAG calls text "large" at roughly 18 point (about 24 CSS pixels) for regular weight, or 14 point (about 18.66 CSS pixels) for bold. Large text gets the easier 3:1 threshold because bigger, heavier shapes stay legible with less contrast. What counts is the size as actually rendered, so a heading you have styled down to 20px regular is treated as normal text and must hit 4.5:1.

Non-text contrast (the 3:1 rule): introduced in WCAG 2.1, this requires that the visual information needed to identify user-interface components (the border of a text field, the outline of a button, a toggle's on/off state, the focus indicator) and the meaningful parts of graphics (the segments of a pie chart, the line in a line chart) have at least 3:1 against adjacent colours. A beautifully minimal form whose input borders are a barely-there light grey can fail this even if the text inside is fine.

Exceptions: logos and brand names have no contrast requirement, nor does text that is purely decorative, incidental, or part of an inactive (disabled) control. But do not over-claim the exception — text you actually expect people to read is never "decorative."

Why contrast matters

Contrast is not a pedantic technicality; it is the difference between content people can read and content they cannot. Several groups are affected directly:

• People with low vision. Reduced visual acuity, cataracts, and other conditions make low-contrast text blurry or invisible. Sufficient contrast is often the single biggest factor in whether they can read a page at all.
• People with colour-vision deficiencies. Around one in twelve men and one in two hundred women have some form of colour blindness, which can flatten the perceived difference between certain colours and reduce effective contrast.
• Older users. The eye's lens yellows and the pupil shrinks with age, reducing the light that reaches the retina, so contrast needs rise for almost everyone over time.

And then there is everyone else, in the right situation: bright sunlight on a phone screen, a cheap or dimmed monitor, glare in an office, or a screen at low brightness to save battery. High contrast is the textbook example of accessibility helping the whole population — design for low vision and you have also helped the commuter squinting at a phone outdoors. This is exactly the "designing for the edges improves the centre" principle from what web accessibility is and why it matters.

It is the most common failure on the web

If you take one fact from this article, take this: low-contrast text is the most common accessibility failure online, by a wide margin. WebAIM's 2025 Million report — an automated analysis of the home pages of the top one million websites — found low-contrast text on 79.1% of those home pages. It was the single most prevalent WCAG failure type in the study, ahead of missing alt text, empty links, missing form labels and missing document language. The same report found that 94.8% of home pages had detectable WCAG failures of some kind, and contrast was the largest contributor to that total.

Two lessons follow. First, contrast problems are endemic, so if you have never checked yours, you very probably have some. Second, because contrast is both highly detectable by automated tools and usually straightforward to fix, it is one of the highest-leverage places to begin — a quick win that measurably reduces a site's most common barrier. That is why a contrast check is an explicit step in how to check if a website is accessible.

How to measure contrast

You never have to guess. Several free tools report the exact ratio and whether it passes:

• WebAIM Contrast Checker — paste two hex colours and it shows the ratio with clear pass/fail markers for AA and AAA, normal and large text. The canonical quick check.
• Browser DevTools — Chrome and Firefox include a colour picker that, when you inspect a text element, displays the live contrast ratio against its actual background and flags whether it meets AA or AAA. Chrome even draws a line on the colour picker showing which shades would pass and can auto-suggest a compliant colour.
• axe DevTools and WAVE — these scanners flag contrast failures as part of a full page scan, pointing you straight at the offending elements.
• Design-tool plugins — contrast checkers exist for Figma and similar, so you can catch problems before a single line of code is written.

When you test, do not stop at body text. Check link text (especially inline links that rely on colour), button labels, placeholder text (a classic offender — placeholders are often too light), text over images and gradients (where the effective background varies across the text), and secondary or muted text like captions, timestamps and helper copy, which designers tend to lighten until it fails. Text over photos is best handled with a solid or semi-opaque overlay so the contrast is reliable regardless of which part of the image sits behind the words.

How to fix contrast without ugly design

The most common objection to contrast requirements is aesthetic: teams fear that "accessible" means high-contrast black-on-white severity that wrecks a carefully tuned brand. In practice that is almost never the trade-off. A few techniques resolve the vast majority of failures while keeping a design looking exactly as intended:

Adjust the shade, not the hue. You can usually keep your brand colour's character and simply darken or lighten it until it passes. A brand blue that fails as text at 3.1:1 often passes comfortably at 4.5:1 a few steps darker, and most people will not perceive it as a different colour — just a slightly richer one. Keep the bright, light version of the colour for large areas, backgrounds and decoration, where contrast rules are looser or absent, and use a darker variant for text.

Build a two-tier palette. Maintain accessible text colours separately from decorative brand colours. The pale, punchy tints that define a brand can live in hero backgrounds, illustrations and large headings; the text that people must read uses tested, compliant values. This is how most mature design systems reconcile brand and accessibility.

Do not lighten secondary text into failure. The instinct to make captions, metadata and helper text a very light grey is the most frequent self-inflicted contrast wound. Use a grey that still meets 4.5:1 (or 3:1 if the text is genuinely large) — there is plenty of room between "primary black" and "fails WCAG" to express visual hierarchy.

Give UI components real contrast. Ensure input borders, focus rings, toggles and icon controls meet 3:1 against their surroundings. A focus indicator that is required at AA must also be visible, which means it needs sufficient contrast too — a point we stress in how to make a website keyboard accessible.

Handle text on imagery deliberately. Add a scrim (a semi-transparent dark or light layer) behind text over photos, or use a text-shadow or solid panel, so the contrast does not depend on the unpredictable colours of the image.

Never use colour as the only signal. Contrast is about legibility; a related rule (WCAG 1.4.1) says you must not convey information by colour alone. An error shown only by turning a field red, or a required link distinguished only by a colour change with no underline, fails colour-blind users regardless of contrast. Pair colour with text, an icon, or an underline.

Run through those and the overwhelming majority of contrast problems disappear without anyone outside the team noticing a design change — except that the page is now more readable for everyone.

A quick contrast checklist

• Body text meets 4.5:1; large text and headings meet at least 3:1 (aim higher).
• Link text — especially inline — meets 4.5:1 and is not distinguished by colour alone.
• Placeholder, caption, metadata and helper text are not lightened below the threshold.
• Buttons, badges and labels meet contrast for their text size.
• Form-field borders, focus indicators and meaningful icons meet 3:1 (non-text contrast).
• Text over images and gradients has a scrim or panel guaranteeing contrast.
• Charts and infographics meet 3:1 for the parts needed to read them.
• You have tested with a real contrast checker, not by eye.

The bottom line

Colour contrast is the measurable brightness difference between text (or a UI element) and its background, and WCAG sets clear minimums: 4.5:1 for normal text, 3:1 for large text and meaningful UI at Level AA, rising to 7:1 at AAA. It matters because low contrast is the web's most common accessibility failure — present on 79.1% of home pages in WebAIM's 2025 Million report — and because it affects people with low vision, colour deficiencies and ageing eyes, plus anyone in bright light. Measure it with a contrast checker or DevTools, and fix failures by tuning shades rather than abandoning your brand. For the wider testing picture, see how to check if a website is accessible, and to fold it into a routine, how to run an accessibility audit.

Want to know whether your text passes WCAG contrast, alongside a full accessibility, SEO and performance check? Analyse any URL with StackOptic — one report, free, no sign-up.