Color Contrast Checker
Check text/background contrast against WCAG AA and AAA, with a live preview.
Large text sample
Normal body text sample — the quick brown fox jumps over the lazy dog.
Large text = 18pt (24px) regular, or 14pt (18.66px) bold, and larger. Everything runs in your browser.
How to use the Color Contrast Checker
Step 1 — Set your two colours
- Enter the text colour and background colour by hex or with the picker.
Step 2 — Read the ratio
- The large number is the contrast ratio; the preview shows real text on your background.
Step 3 — Check the grades
- See PASS or FAIL for AA and AAA at normal and large sizes, plus UI components.
Step 4 — Adjust until it passes
- Tweak a colour, or use Swap, until you hit the level you need.
Frequently asked questions
It is the ratio between the relative luminance of the lighter and darker colour, from 1:1 (identical) to 21:1 (black on white). WCAG defines minimum ratios for text to be readable by people with low vision.
For normal text, AA needs 4.5:1 and AAA needs 7:1. For large text (about 24px regular or 18.66px bold and above) AA needs 3:1 and AAA needs 4.5:1. User-interface components and meaningful graphics need at least 3:1.
Larger, heavier letterforms are inherently easier to read, so they remain legible at a lower contrast than small body text. That is why the thresholds drop for large text.
Contrast is one requirement among many. Passing helps a lot, but real accessibility also covers focus states, non-colour cues, keyboard use, and more. Treat this as one essential check, not the whole picture.
Hex in 3-digit (#abc) or 6-digit (#aabbcc) form, plus the native colour picker. The text field and picker stay in sync, and you can swap foreground and background with one click.
About the Color Contrast Checker
This tool measures the contrast between a text colour and its background and tells you, instantly, whether the combination meets the Web Content Accessibility Guidelines. It shows the exact ratio, a live preview of real text, and a clear pass or fail for each WCAG level.
How contrast is measured
Contrast in WCAG is not a vague impression — it is a precise ratio derived from each colour relative luminance, the perceived brightness after accounting for how human eyes weight red, green, and blue. The ratio runs from 1:1, where the two colours are identical and text is invisible, up to 21:1 for pure black on pure white. This tool computes that ratio with the official sRGB formula, so the number you see is the same one an auditing tool or a designer reviewer would calculate.
What the levels actually require
The guidelines set concrete minimums. For normal body text, level AA requires 4.5:1 and the stricter AAA requires 7:1. For large text — roughly 24px and up for regular weight, or 18.66px and up for bold — the bar drops to 3:1 for AA and 4.5:1 for AAA, because larger letterforms stay legible at lower contrast. Separately, interface elements such as button borders, form field outlines, focus indicators, and informative icons must reach 3:1 against their surroundings. This checker reports all five outcomes at once so you can see exactly which standard your colours satisfy, rather than guessing from a single number.
Using it well
Enter your colours as hex or pick them visually; the field and picker stay in sync, and the Swap button flips foreground and background for the common case of testing both light and dark variants. Aim for AA as a baseline for any public site, and AAA where legibility is critical or your audience skews older. One honest caveat: contrast is necessary but not sufficient for accessibility. A page can pass every ratio here and still be hard to use if it relies on colour alone to convey meaning, lacks visible focus states, or cannot be operated by keyboard. Treat this as the essential colour check it is, and pair it with the broader accessibility practices. Everything runs in your browser. To see how your palette appears to colour-blind users, try the Color Blind Test.