Color Contrast Checker
Check WCAG contrast ratio between two colors.
Almost before we knew it,
we had left the ground. — sample text
Understanding WCAG 2.1 Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define contrast ratio requirements to ensure text is readable by people with moderately low vision. The minimum contrast ratio for standard text is 4.5:1 (AA) or 7:1 (AAA). For large text (18pt/24px or bold 14pt/18.6px and larger), the requirements are lower: 3:1 (AA) or 4.5:1 (AAA).
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Checking a text and background pair against WCAG thresholds before shipping.
- Finding out how much a colour needs to darken to pass.
- Checking a brand colour against the requirement for body text.
- Comparing two candidate colours on ratio rather than appearance.
- Verifying a focus indicator's contrast against its surroundings.
How it works in practice
A worked example
A brand colour has to be checked against white for body text, and the answer needs to be a number rather than an opinion.
Foreground #0d6efd Background #ffffff
Contrast Ratio: 4.5:1 AA (PASS) WCAG AA Normal Text (4.5:1) Pass WCAG AA Large Text (3.0:1) Pass WCAG AAA Normal Text (7.0:1) Fail WCAG AAA Large Text (4.5:1) Pass Non-text Components (3.0:1) Pass
Four and a half to one, which clears the normal-text requirement by nothing at all — a single step darker and it fails. That is worth knowing before the colour is committed, because the figure is not a judgement call: each channel is linearised, weighted by how much the eye contributes to brightness, summed, and the two results compared with a fixed formula. The weights are the part implementations get wrong, and a transposed digit in the blue coefficient inflates every result while still looking like a plausible set of constants.
The edge case that catches people
The ratio knows nothing about hue, and the consequence is easy to miss. A vivid red and a vivid green can have almost identical luminance — one such pair scores exactly 1 to 1, which is the score two identical colours get — so a checker will call them indistinguishable while they look strikingly different to most viewers, and genuinely indistinguishable to someone with red-green colour deficiency. Contrast is a brightness measurement. Anything that carries meaning by hue alone needs a second signal, and no ratio will tell you that.
When not to use this tool
Not as the last word on whether text is readable. The number is a function of two colours and knows nothing about the size or the weight in front of it, so thin light type at a passing ratio can still be hard work while heavy type below the threshold reads comfortably. It also assumes two flat opaque colours: text over a photograph or a gradient has no single background, and the honest check there is to sample the lightest and darkest points the text actually crosses and require both to pass.
Frequently Asked Questions
- How is the contrast ratio calculated?
- (L1 + 0.05) / (L2 + 0.05), where L is WCAG relative luminance and L1 is the lighter colour. The 0.05 term models ambient screen flare, and it is why the ratio maxes out at 21:1 for black on white instead of running to infinity.
- What is relative luminance, exactly?
- Each channel is divided by 255, then linearised — values at or below 0.03928 are divided by 12.92, the rest go through ((v + 0.055) / 1.055)^2.4 — and combined as 0.2126R + 0.7152G + 0.0722B. Green dominates because human vision is most sensitive to it, which the raw hex values give no hint of.
- Which threshold applies to my text?
- 4.5:1 for normal text at AA, 7:1 at AAA. Large text drops to 3:1 and 4.5:1, where large means 18pt (24px) or bold 14pt (18.66px) and above. UI components and graphical objects need 3:1 under 1.4.11, which is a separate criterion from the text one.
- Does the ratio account for font weight or size?
- No — it is purely a function of the two colours. That is a known limitation: thin 300-weight text at 4.5:1 is genuinely harder to read than 700-weight at the same ratio. The APCA algorithm being developed for WCAG 3 takes weight and size into account; WCAG 2.x does not.
- How do I check text over an image or a gradient?
- You cannot check it as one pair — sample the lightest and darkest points the text actually sits on and require both to pass. In practice this is why overlays exist: a semi-opaque scrim makes the background predictable enough to have a single ratio worth measuring.
Common errors and gotchas
- Checking large-text thresholds and applying the colour to body text, which needs a higher ratio.
- Testing against the wrong background, such as a page colour when the text sits on a card.
- Checking text but not the non-text elements — icons, borders, focus rings — which have their own requirement.
- Assuming a passing ratio means readable, since weight and size matter too.
- Testing an opaque colour when the shipped one has alpha over a variable background.