Understanding WCAG color contrast

Contrast requirements are the accessibility rule most people meet first, usually as a red cross in an automated report. The number itself is simple. What it means, and what it deliberately ignores, is worth understanding before you start moving colours around to satisfy it.

What the ratio measures

The contrast ratio compares the relative luminance of two colours (how much light each one sends to your eye) on a scale from 1:1 to 21:1. Identical colours give 1:1; black on white gives 21:1.

Getting there takes three steps.

First, each channel is converted from its stored value to linear light. sRGB stores colour through a transfer curve of roughly 2.2, which spends more of the available numbers on dark tones where the eye is more sensitive. That curve has to be undone before any physical comparison is meaningful.

Second, the three linear channels are weighted and summed: 0.2126 × red + 0.7152 × green + 0.0722 × blue. Those weights reflect how much each primary contributes to perceived brightness. Green does nearly three quarters of the work; blue contributes almost nothing. This is why a saturated blue on black is so much harder to read than a green that looks similarly "medium".

Third, the two luminances are compared as (lighter + 0.05) ÷ (darker + 0.05). The 0.05 accounts for ambient light bouncing off a real screen in a real room. Without it, black on very-dark-grey would score absurdly high.

The thresholds

The 4.5:1 figure is not arbitrary. It was chosen to accommodate roughly 20/40 vision, the sort of loss that is common by around age 80 or with mild uncorrected impairment, while still being achievable in ordinary design. AAA's 7:1 targets about 20/80.

What counts as large text

At least 18 point, which is about 24 CSS pixels, or at least 14 point bold, which is about 18.66 pixels. Two things trip people up here. It is the rendered size that matters, not the size in a design file at some zoom level. And bold only counts if the font is genuinely bold. A font that is merely heavier than its lightest weight does not qualify.

The allowance exists because larger, thicker letterforms put more coloured area in front of the reader, so they stay legible at lower contrast. The lower threshold follows from that physical fact; it is not a loophole.

Non-text contrast

Success criterion 1.4.11 extends the 3:1 requirement to things that are not text but still have to be seen:

• the parts of a component you need to operate it, such as an input's border, a toggle's track or a checkbox outline;
• the state of a component, such as the focus indicator or a checked mark;
• parts of a graphic that carry meaning, like the line in a chart or the shape of an icon that distinguishes it.

Purely decorative graphics are exempt, as are inactive controls, and so is anything whose appearance is determined by the browser rather than by you. A very common failure is an input whose border is a light grey against white at around 1.5:1, which is invisible to a lot of people and technically a failure.

Transparency

A contrast ratio is only defined between two opaque colours. If your text has an alpha value below 1, the ratio has to be computed on the composited result: the colour a reader actually sees once the background shows through.

This catches people using opacity for a "muted" text style. Text at 60 percent opacity on white is a completely different measurement from the same colour at full strength, and if the background can change (a card that sits on white in one place and on a tinted surface in another), the same style passes in one context and fails in another. Prefer a solid muted colour over an opacity value for exactly this reason.

What the ratio does not tell you

The formula takes two flat colours and returns one number. Everything it cannot see is still your problem:

• Font weight and letterform. A hairline weight at 4.5:1 can be harder work than a medium weight at 4:1. The formula is blind to both.
• Backgrounds that are not one colour. Text over a photograph, a gradient or a video has a different ratio at every point. Measure the worst point, not the average.
• Quantity. A short label and three paragraphs of body copy have very different demands, and the threshold is the same for both.
• Colour vision deficiency. Contrast and hue confusion are separate problems. Red and green of similar luminance can pass comfortably and still be indistinguishable to some readers. That is why status must never be signalled by colour alone.
• Wide-gamut displays. The maths assumes sRGB. On a P3 display showing P3 content, the real ratio can differ.

The known weak point is dark mode. The WCAG 2 formula systematically overrates light text on dark backgrounds: pairs that measure well above 4.5:1 can still look glaring and hard to read. APCA, the model being developed for future guidelines, handles this better. But WCAG 2.2 remains what most accessibility regulations are written against, so it is the number reported here and the one an audit will use.

Fixing a failing pair

Change lightness, not hue. Luminance responds strongly to lightness and barely at all to hue, so rotating a colour around the wheel will not rescue a failing ratio while moving it toward black or white will, usually by less than you expect.

A few practical moves:

• Darken the text rather than lightening the background. Usually less disruptive to the rest of the design.
• Watch the green channel. Because green carries most of the luminance, adjusting it moves the ratio fastest.
• Do not chase AAA everywhere. 7:1 across an entire interface tends toward pure black on pure white, which many people find harsh. Meet AA reliably, and reserve AAA for long-form reading.
• Check the sampled colour, not the intended one. If your background came out of a photograph, test the lightest and darkest parts of the area the text will sit on. The image color picker makes that quick.

The contrast checker reports all five thresholds at once, composites alpha before measuring, and will suggest the nearest foreground that reaches AA while holding your hue and saturation steady.