Contrast checker
Two colours in, the ratio out, and a verdict at every size that WCAG grades separately. When a pair fails it finds the nearest colour that passes without moving your hue, so the fix stays on brand. The newer APCA figure sits alongside, clearly marked as not yet the standard.
| Where it is used | Needs | AA | AAA |
|---|
Large text, 24px and up
Body text at a normal size, the case most pages actually have to pass.
What the ratio actually measures
Each colour is converted to a relative luminance — a weighted sum of its red, green and blue channels after undoing the sRGB gamma curve, with green weighted most because our eyes are most sensitive to it. The ratio is the lighter luminance plus a small constant over the darker one plus the same constant. That constant is what stops the scale running away to infinity against pure black, and it is also why the formula is kinder to dark backgrounds than most people's eyes are.
Why one pair gets several verdicts
WCAG does not grade a colour pair once. Large text is allowed a lower bar than body text because size does some of the work that contrast otherwise has to, and interface components — a checkbox border, a focus ring — are graded separately again. A palette that fails for body copy can be perfectly correct for a heading, so the table gives every case rather than a single pass or fail.
Keeping the hue when you fix it
The usual fix for a failing pair is to reach for a darker grey, which quietly drains the colour out of a brand. The suggestion here moves lightness only, in the smallest step that clears the threshold, and leaves hue and saturation where you put them. It is the same colour, just far enough along to be readable.
About the APCA number
APCA is the contrast model being developed for the next version of the guidelines. It accounts for things the WCAG 2 ratio does not — polarity, font weight, the way perceived contrast falls off on dark backgrounds — and it usually agrees with your eyes where the older formula does not. It is shown here because it is genuinely informative, and it is labelled clearly because it is not what you are measured against. Conformance today is the ratio, not the Lc.
FAQ
What counts as large text?
18 point, roughly 24 pixels, or 14 point bold, roughly 18.66 pixels bold. Below that it is normal text and needs the higher ratio.
My greys pass on white but fail on dark. Why?
The WCAG 2 formula is not symmetric in the way perception is. Light text on a dark background reads as lower contrast to the eye than the ratio suggests, which is one of the gaps APCA was designed to close. If the pair only just passes on dark, trust your eyes and add a little more.
Does the ratio apply to icons and borders?
Yes, at 3:1, under the non-text contrast rule. That covers the parts of a control you need to see to use it — a field outline, a toggle, a focus indicator — but not decorative graphics or a logo.
Is anything I type here sent anywhere?
No. The colours never leave the page, and nothing is uploaded or stored.
Built by the GO AI team. OKLCH converter · Our accessibility statement · All free tools