Contrast Checker
Check a foreground and background pair against WCAG contrast ratios.
What the ratio measures
The WCAG contrast ratio compares the relative luminance of two colours on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is computed by converting each channel out of sRGB's gamma encoding and then weighting them — green contributes far more to perceived brightness than red, and red far more than blue. That weighting is why a mid-blue on black is much harder to read than a mid-green on black despite similar-looking numbers in a colour picker.
Crucially, the ratio ignores hue and saturation entirely. Two colours can be wildly different in hue and still fail, because they sit at the same brightness.
The thresholds and what "large text" means
Level AA requires 4.5:1 for normal text and 3:1 for large text; level AAA requires 7:1 and 4.5:1 respectively. Large text is defined as 18.66px bold or 24px regular and above — noticeably larger than most interfaces treat as "large". Non-text elements that convey meaning, such as icons, input borders, and focus indicators, need 3:1 against their surroundings under WCAG 2.1, a requirement that is failed constantly by pale grey form borders and low-contrast placeholder text.
Passing the check is not the same as being readable
The formula has known blind spots. It systematically overrates the readability of light text on dark backgrounds, which is why dark-mode designs that pass on paper often need a slightly reduced foreground weight in practice. It also takes no account of font weight, letter spacing, or size beyond the single large-text threshold, so thin 300-weight type at 4.5:1 can be genuinely hard to read while passing. APCA, the algorithm proposed for future WCAG versions, addresses several of these issues by modelling polarity and font weight directly.
Treat 4.5:1 as a floor to clear rather than a target to hit. Body text at 7:1 or better is noticeably more comfortable, particularly for older users and on low-quality displays in bright environments.
How to use it
- Enter your foreground and background colours.
- Check the ratio against the AA and AAA thresholds for your actual text size.
- Test the pairing on a real screen in bright light, not only in the checker.
- Check borders, icons, and focus rings too — they need 3:1 against their background.
Questions worth asking
What ratio do I actually need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular and above). AAA raises those to 7:1 and 4.5:1. Non-text elements such as icons and input borders need 3:1.
Why do two very different colours fail the check?
The ratio compares relative luminance only — it ignores hue entirely. Two colours far apart on the wheel but at similar brightness produce a low ratio and are genuinely hard to distinguish for many users.
Is passing 4.5:1 enough?
It is the legal floor, not a comfort target. Body text at 7:1 or better is measurably easier to read, especially for older users and on screens viewed in bright light.
Does this cover colour blindness?
Partly. Adequate luminance contrast helps everyone including colour-blind users, but it does not address information conveyed by hue alone. Never use colour as the only signal for state — pair it with text, an icon, or a shape.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.