Color contrast glossary

A number from 1:1 to 21:1 describing how far apart two colors are in relative luminance.

It is computed as (lighter + 0.05) / (darker + 0.05), where each value is the color's relative luminance. Identical colors give 1:1 and black on white gives 21:1. The ratio ignores hue entirely, which is why two colors that look very different can still fail.

See alsoRelative luminanceWCAG

The perceived brightness of a color on a 0 to 1 scale, weighted for how the eye responds to red, green and blue.

Each sRGB channel is linearized, then combined as 0.2126R + 0.7152G + 0.0722B. Green dominates because the eye is most sensitive to it, which is why a saturated green and a saturated blue of the same nominal lightness behave completely differently in a contrast check.

See alsoContrast ratiosRGB

The Web Content Accessibility Guidelines, the standard nearly every accessibility law points at.

WCAG 2.1 and 2.2 define three conformance levels: A, AA and AAA. AA is the level referenced by the European Accessibility Act and by the US Department of Justice's ADA Title II rule, and it is the level almost every contract and procurement document means when it says 'accessible'.

See alsoLevel AALevel AAA

The conformance level regulators actually require: 4.5:1 for normal text, 3:1 for large text and UI components.

AA is the practical target. AAA exists and asks for 7:1, but WCAG itself says conformance at AAA is not achievable for all content, and no major regulation requires it.

See alsoWCAGLarge text

The strictest conformance level: 7:1 for normal text, 4.5:1 for large text.

Worth targeting for body copy on a content-heavy site, and worth ignoring as a compliance goal. WCAG explicitly does not recommend AAA as a blanket requirement.

See alsoLevel AA

Text at 24px or larger, or 18.66px or larger when the weight is 700 or more.

Large text only needs 3:1 rather than 4.5:1, because heavier strokes carry more of the color. The threshold is defined in points (18pt and 14pt bold) and converts to 24px and 18.66px. A 20px heading is not large text, which is the single most common false pass in hand-checking.

See alsoLevel AAContrast ratio

The default color space of the web, and the space WCAG contrast is defined in.

Hex colors in CSS are sRGB unless you say otherwise. Contrast ratios computed in any other space will not match what the specification asks for, so a checker that works in a different space is answering a different question.

See alsoRelative luminanceOKLCh

A perceptually uniform color space with axes for lightness, chroma and hue.

Unlike HSL, a fixed change in OKLCh lightness looks like the same size of change at every hue. That is what makes it the right space for repairing a failing color: you can move lightness until the contrast passes while holding hue exactly, and the result still reads as the same color.

See alsoChromaGamutsRGB

How saturated a color is, independent of how light it is.

In OKLCh, chroma is unbounded in theory but limited in practice by what a screen can display. Pushing a color lighter or darker often forces chroma down to stay inside sRGB, which is why a repaired color is sometimes very slightly less vivid than the original.

See alsoOKLChGamut

The set of colors a given space or device can actually show.

A color can be perfectly well described in OKLCh and still be outside the sRGB gamut, meaning no screen using sRGB can display it. Repairing a color sometimes requires giving up chroma to bring it back inside.

See alsoChromasRGB

A measure of how different two colors look to a person.

Computed in OKLab here, so a small number means a change nobody will notice and a large number means a visibly different color. It is the honest way to answer 'will anyone see this fix?', and a delta under about 0.02 is imperceptible side by side.

See alsoOKLCh

One foreground color on one background color, which is the unit a contrast failure actually lives in.

A page with 200 failing elements usually has fewer than a dozen failing pairs behind them. Fixing a pair fixes every element wearing it, which is why counting elements overstates the work and counting pairs describes it.

See alsoContrast ratio

EU legislation, applicable since 28 June 2025, requiring many digital products and services sold in the EU to be accessible.

It covers e-commerce, banking, transport, e-books and more. Enforcement is national, so penalties vary by member state, and they reach six figures in several. Its technical benchmark is EN 301 549, which points at WCAG level AA.

See alsoWCAGLevel AA

The part of the Americans with Disabilities Act covering state and local government, now with an explicit web rule.

The Department of Justice rule requires conformance with WCAG 2.1 level AA. The deadlines were extended in April 2026: entities serving 50,000 people or more have until 26 April 2027, smaller entities and special districts until 26 April 2028.

See alsoWCAGLevel AA

A third-party script that claims to make a site accessible without changing the site.

Overlays cannot fix color contrast in any durable way, because the colors are the site's own design. The US Federal Trade Commission has taken enforcement action against overlay vendors over their accessibility claims, and many accessibility practitioners consider them actively harmful.

See alsoWCAG

The open-source accessibility testing engine most automated tools are built on.

It runs inside a real browser and resolves the effective background of an element by walking up the tree and compositing alpha. That is the hard part of contrast testing, and it is why a static read of a stylesheet cannot produce the same answer.

See alsoColor pair

Blending a semi-transparent color with whatever sits behind it to get the color that actually paints.

Text in rgba(0,0,0,0.6) on white is not black, it is a mid gray, and it must be measured as one. Hand-checking a palette usually skips this, which is why translucent panels and scrims are such a common source of surprise failures.

See alsoColor pairaxe-core

A newer contrast algorithm intended to model perception better than the WCAG 2.x ratio.

It is under consideration for a future WCAG version and is not what any current law or contract requires. Useful as a design sanity check, not as a compliance answer, and it produces a different kind of number that cannot be compared to a ratio.

See alsoContrast ratioWCAG