What the ratio means
A contrast ratio compares the relative luminance of two colours on a scale from 1:1 to 21:1. Black on white is 21:1. The same colour on itself is 1:1. WCAG 2 asks for 4.5:1 on body text, relaxing to 3:1 once text reaches 24px, or 18.66px when it is bold. Interface elements — input borders, focus rings, icons that carry meaning — need 3:1.
The number is not a score. It is a threshold, and clearing it by 0.01 is not meaningfully different from failing by 0.01. Treat a bare pass as a warning that the pair will fail the moment someone sets it a little smaller.
Why this tool shows two numbers
WCAG 2 looks only at the two colours. It cannot see that one of them is about to be set in 12px Light and the other in 32px Bold, so it gives both the same answer. Anyone who has shipped a passing caption that turned out to be unreadable has met this limitation directly.
APCA — the candidate algorithm for WCAG 3 — scores on a signed Lc scale and takes size and weight into account. It produces some uncomfortable results: 14px at regular weight cannot pass at any contrast, not even pure black on pure white. It needs 16px, or bold. WCAG 2 will wave that caption through.
Neither is authoritative on its own. WCAG 2 is what conformance is measured against today, and APCA is the better predictor of whether someone can actually read the thing. Where they disagree, ship to the stricter one.
Fixing a failure without losing the brand
The common advice — "pick an accessible colour" — is not advice. It skips the part that is hard, which is that the colour is usually not yours to change.
Contrast is driven overwhelmingly by lightness. Hue and saturation barely move it. That is useful, because it means you can hold the two properties that make a colour recognisable and adjust only the one that affects the measurement. The lightness track above draws that axis for your specific hue: the stretches that pass are shown clearly, the rest is veiled, and your current colour is marked. The fix stops being a guess and becomes a distance.
The suggestions are ranked by perceptual distance, using CIEDE2000, so the smallest visual change comes first. Moving the background is offered too — when the brand colour is the text, changing what sits behind it is often the smaller compromise, and it is the option most tools never mention.
Questions people ask
Straight answers. Each one links directly: copy the address after opening it.
What contrast ratio do I actually need?
4.5:1 for body text and 3:1 for large text (24px, or 18.66px bold) to meet WCAG 2 AA. AAA asks for 7:1 and 4.5:1. Interface components like input borders and icons need 3:1 under success criterion 1.4.11.
Why do WCAG 2 and APCA disagree?
WCAG 2 compares two colours and ignores everything else, so a 12px hairline caption and a 32px bold heading in the same colours score identically. APCA weighs size and weight, because a thin glyph puts less ink on screen and reads as lower contrast at the same ratio. The disagreement is loudest on small thin text and on dark backgrounds.
Can I keep my brand colour and still pass?
Usually, yes. Contrast is driven mainly by lightness, and hue survives a lightness change. Moving your colour along its own lightness axis is almost always enough, and it leaves the colour recognisable. Occasionally it is not enough — a saturated yellow can never reach 7:1 against white — and then the honest answer is to change the background instead.
Does WCAG 2 work for dark mode?
Not reliably. The formula adds a fixed 0.05 flare constant that dominates at the dark end, so pairs near black can post a passing ratio while reading as dim. APCA was built partly to fix this. On dark backgrounds, trust the APCA figure.