Colour Contrast and Accessibility: The Complete Guide

Every year, WebAIM analyses the home pages of a million websites and publishes what it finds. Every year, the same failure tops the list by a wide margin. In the February 2026 analysis, 83.9% of home pages had low contrast text — more than missing alt text, more than unlabelled form fields, more than anything else.

There is a reason contrast wins this competition annually, and it is not that developers are careless. It is that contrast is where accessibility and brand design collide most directly. Someone chose that light grey for a reason. A designer picked that brand blue from a palette approved by a marketing director. Then the accessibility scan comes back and says it fails, and now there is a conversation to have.

This guide covers what the requirement actually is, why the fix is usually smaller than people fear, and where the standard itself has real limitations you should know about.

The ratios, exactly

Contrast is expressed as a ratio between the relative luminance of two colours, running from 1:1 (identical) to 21:1 (pure black on pure white). WCAG sets thresholds at three places.

1.4.3 Contrast (Minimum) — Level AA. Text and images of text need a contrast ratio of at least 4.5:1. Large text needs at least 3:1.

1.4.6 Contrast (Enhanced) — Level AAA. The same test at 7:1 for normal text and 4.5:1 for large text.

1.4.11 Non-text Contrast — Level AA. Introduced in WCAG 2.1, this covers everything that is not text: 3:1 against adjacent colours for the visual information needed to identify user interface components and their states, and for parts of graphics required to understand the content. This is the criterion that catches pale form-field borders, faint focus rings, low-contrast icons and chart segments you cannot tell apart.

Two exceptions apply to the text criteria. Incidental text — decorative text, text in an inactive control, text that is part of a picture with significant other visual content — has no contrast requirement. And logotypes: text that is part of a logo or brand name is exempt. That last one is worth knowing, because it means your wordmark does not have to pass. Your body copy does.

What counts as "large text"

This trips people up constantly, because the standard defines it in points while you work in pixels.

WCAG's normative definition of large scale text is at least 18 point, or 14 point bold. The W3C's own guidance gives the conversion: 1pt equals 1.333px, so 18pt and 14pt bold are equivalent to approximately 24px and 18.5px respectively.

So: 24px regular text and 18.5px bold text qualify for the gentler 3:1 threshold. Anything smaller needs 4.5:1. If you see 18px quoted as the bold threshold, that is a rounding error that has propagated widely — the W3C says approximately 18.5px.

One more precision point: these are threshold values and should not be rounded. A measured 4.499:1 does not meet a 4.5:1 requirement.

Fixing contrast without destroying your brand

The fear in most organisations is that accessible colour means beige, safe and generic. In practice, three moves solve the overwhelming majority of contrast failures with almost no visual cost.

Darken the text, not the brand. Most failures are body copy or secondary text in a light grey chosen for a soft, modern look. Moving from a grey that measures 3.8:1 to one that measures 4.6:1 is a change most people cannot perceive side by side, and it is invisible when they are not comparing. The elegance you were buying with pale grey survives the fix.

Keep the brand colour, change where you use it. A vivid brand colour that fails as small text on white frequently passes as a large heading, as a background with white text on top, or as a button fill. You are not being asked to abandon the colour; you are being asked to stop using it at 14px on a pale background.

Introduce an accessible variant. Many mature design systems carry two versions of a brand colour: the original for large areas, logos and marketing, and a darkened variant reserved for text and interface elements. This is the standard solution among brands with strong colour identities, and it is worth writing into your guidelines explicitly so it survives the next designer.

If you maintain formal brand guidelines, contrast belongs in them. A palette that documents hex, RGB, CMYK and Pantone but says nothing about which combinations are legible is an incomplete specification — and it guarantees the argument recurs on every project. Our guide to creating brand guidelines covers where this fits.

What scanners miss about contrast

Here is the practical problem with automated contrast testing that nobody selling a scanner likes to discuss.

An automated tool computes contrast by reading the CSS: it finds the text colour, finds the background colour, and does the arithmetic. That works perfectly when the background is a flat declared colour. It falls over when the background is an image, a gradient, a video, a semi-transparent overlay, or a parent element whose colour the tool cannot resolve. In those cases the honest tools do not report a pass or a fail — they report the check as *incomplete* and ask a human to look.

Incomplete results are where real contrast failures hide, because they are easy to ignore. A hero banner with white text over a photograph is the single most common example on the web: fine over the dark part of the image, illegible over the bright part, and invisible to a CSS-based check. This is exactly why our accessibility scans resolve those cases from the rendered screenshot pixels rather than leaving them unanswered — measuring the actual colours behind the actual text, and sampling across the whole text area rather than trusting one point.

The other thing scanners cannot judge is whether a contrast failure matters. A 3.9:1 ratio on the legal disclaimer in the footer and a 3.9:1 ratio on your primary call to action are the same number and very different problems.

The honest limitations of the WCAG contrast formula

You should know that the formula itself is contested among accessibility specialists — not because contrast does not matter, but because the maths does not model human vision perfectly.

The WCAG 2.x calculation is based on sRGB relative luminance, and it has three well-documented weaknesses. It overstates contrast for dark colour pairs, to the point that a technically passing combination can be functionally hard to read when both colours are near black — which is why the formula behaves poorly in dark mode. It is symmetric, treating light-text-on-dark and dark-text-on-light as equivalent, though they are not perceptually. And it largely ignores font weight, so a hairline typeface can pass while being genuinely difficult for many people to read.

A proposed alternative called APCA (the Accessible Perceptual Contrast Algorithm) addresses these by modelling perceived lightness difference and factoring in font size and weight. You will see it referenced as "the future of WCAG contrast". Be careful with that framing: APCA holds no normative status in any standard. It appeared as exploratory content in early WCAG 3 drafts and was removed in July 2023; it is not in the current draft, and the contrast approach for WCAG 3 remains undetermined.

The practical conclusion is not to ignore WCAG 2.x contrast. It is the tested, legally referenced measure and you should meet it. But if you are designing in dark mode, or using very thin type, treat 4.5:1 as a floor rather than a finish line, and check with your eyes as well as your calculator.

A working process

1. Audit your palette before your pages. Build a matrix of every text colour against every background colour you actually use, and mark each combination pass or fail at 4.5:1 and 3:1. Most sites use fewer combinations than they think, and fixing the palette fixes hundreds of pages at once.
2. Cover the non-text cases. Form field borders, focus indicators, icon buttons, toggle states, chart colours and required-field markers all fall under 1.4.11 at 3:1.
3. Never use colour alone. Contrast is a separate requirement from 1.4.1 Use of Colour. A red field border that is the only signal of an error fails regardless of how much contrast it has, because a colourblind user cannot perceive it. Add text, an icon or both.
4. Check the hard cases manually. Text over images, gradients and video needs a human or a pixel-level measurement, not a CSS calculation.
5. Re-check after every design change. Contrast regressions arrive quietly, usually as part of a theme refresh that nobody flagged as an accessibility change.

*Contrast ratios, exceptions and the definition of large-scale text are from the W3C's published WCAG 2.2 Recommendation. The 83.9% figure is from the WebAIM Million 2026 report — analysis run February 2026, published March 2026 — which used the WAVE engine and notes that automated tools cannot detect all conformance failures. ChecksTrue is not affiliated with or endorsed by the W3C or WebAIM.*