WCAG Contrast Checker

about this tool

Two measures, one pair of colours

The WCAG 2 contrast ratio is the one the law and most audits use. Both colours are converted to relative luminance with the formula in the specification — sRGB channels linearised, then weighted 0.2126, 0.7152, 0.0722 — and the ratio is (L₁ + 0.05) / (L₂ + 0.05), from 1:1 to 21:1. The thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, 7:1 and 4.5:1 at AAA, and 3:1 for user-interface components and graphical objects (success criterion 1.4.11). Large text is 24px, or 18.66px when bold; the size and weight controls decide which row applies to your text, and the other is shown alongside. The displayed ratio is truncated, not rounded, because 4.47:1 does not pass and an auditor's tool will say 4.47.

APCA is the perceptual algorithm proposed for WCAG 3, implemented from the 0.1.9 constants and checked against its published reference values. It is directional — dark text on a light background scores differently from light on dark — and reports Lc, roughly 0 to 106, with the guidance levels its authors publish: Lc 90 preferred for body text, 75 the minimum for body text, 60 for other content text, 45 for large headlines, 30 for anything that must be read at all, 15 the threshold of visibility. APCA is not yet a standard; it is shown because it often disagrees with the ratio in ways that match what people see, and knowing both is useful when a pair scrapes past 4.5:1 but still looks faint.

Translucency

A colour with alpha has no contrast of its own; it depends on what is behind it. The tool composites the background over the page colour, then the text over that, exactly as the browser paints it, and measures the two opaque results. The page-colour field appears when either input has alpha.

Fixes

For each threshold the pair misses, the tool offers the nearest passing colour for the text and, separately, for the background. Only lightness moves, in OKLCH, so the hue and saturation you chose survive; the search picks whichever direction needs the smaller change, then confirms the rounded hex value still passes (a colour can pass with unrounded channels and fail by a hair once written as hex). When no lightness of that hue can reach the target against the other colour — nothing reaches 7:1 against a mid grey, for instance — it says so instead of changing the hue behind your back. "Use" applies a suggestion to the field; the report line copies the whole verdict for a ticket.

Limits

The checker measures two colours. Text over an image or gradient, text with a shadow or outline, and thin or light-weight fonts all read worse than the numbers suggest and are outside what a ratio can capture. APCA's font-size and weight lookup table is not reproduced; the levels shown are the general ones. WCAG 2's ratio also has known blind spots — it treats dark-on-light and light-on-dark identically and overrates some blue and orange pairs — which is why APCA exists. Nothing is stored.

To generate a scale with enough range that some of it passes, use the colour palette generator. To convert a failing colour into HSL and simply drop its lightness, the colour converter.

questions

What contrast ratio does WCAG require?

For AA: 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for user-interface parts such as icons and input borders. For AAA: 7:1 for normal text and 4.5:1 for large. The ratio runs from 1:1 (identical) to 21:1 (black on white) and is computed from the two colours’ relative luminance.

Why does #777777 on white fail?

It comes out at 4.47:1, just under the 4.5:1 that AA asks for normal text. #767676 is the lightest grey that passes on white, at 4.54:1. Auditors truncate rather than round, so 4.47 never becomes 4.5 — the tool shows the truncated figure for the same reason.

What is APCA and how is it different?

The Accessible Perceptual Contrast Algorithm is the candidate method for WCAG 3. It models how the eye actually reads text: it is directional (dark text on light is not the same as light on dark), and it reports a lightness contrast Lc from 0 to about 106 with guidance levels — Lc 90 preferred for body text, 75 the minimum for body text, 60 for other content text, 45 for large headlines, 30 for anything that must be read at all. It is not yet a legal standard; WCAG 2 is.

How are translucent colours handled?

They are composited the way the screen does it: the background over the page colour, then the text over that, and the two opaque results are measured. A semi-transparent grey over white and the same grey over black give very different ratios, which is why the page colour field appears when either colour has alpha.

How does the fix suggestion work?

It keeps the colour’s hue and saturation and moves only its lightness, in OKLCH, in whichever direction needs the smaller change to reach the target ratio — then checks the result still passes after rounding to a hex value. When no lightness of that hue can reach the target against the other colour, it says so rather than inventing a different hue.