WCAG contrast checker — offline

Contrast is the accessibility requirement that affects the most people. Low-vision users, anyone over about forty, and every user reading a phone screen in sunlight all depend on adequate contrast — which makes it one of the highest-impact things you can check, and one of the easiest to get wrong by eye on a bright laptop display.

Enter a text and background colour, or use the pickers, and the WCAG luminance maths runs in your browser. Nothing is transmitted, so an unreleased brand palette stays private. HEX, rgb(), and hsl() are all accepted as input.

• AA, normal text — 4.5:1. The practical baseline, and what most accessibility policies and procurement requirements reference.
• AA, large text — 3:1. Large means 18pt and above, or 14pt bold and above.
• AAA, normal text — 7:1. The enhanced level, appropriate where the audience is known to include low-vision users.
• AAA, large text — 4.5:1.

The badges show exactly which levels a pairing passes, so you adjust until the ones you are targeting go green rather than guessing at how close you are.

Body text is usually fine because it gets the attention. The failures cluster in the places nobody checks: placeholder text in form fields, disabled-looking secondary buttons, grey helper text under inputs, footer links, and — most commonly of all — light grey text on white, which designers love and which routinely lands under 3:1.

A few things the ratio alone will not tell you. Contrast requirements also apply to non-text elements such as icons, form borders, and focus indicators, at 3:1. Text placed over a photograph has to meet the requirement against the lightest part of the image behind it. And colour must never be the only way information is conveyed — a red error message needs an icon or wording too, since a colour-blind user may not see the distinction at all.

Building the palette itself? The colour converter provides OKLCH, whose perceptual uniformity makes it much easier to adjust lightness predictably until a pairing passes — also entirely on your device.