About Color Contrast Checker
Color Contrast Checker measures the WCAG contrast ratio between a foreground and a background color and reports whether the pair passes the accessibility thresholds for normal and large text. The ratio runs from 1:1 for identical colors up to 21:1 for black on white, and it is computed from the relative luminance of each color exactly as the WCAG specification defines it.
The output is three lines: the numeric ratio, whether it clears the 4.5:1 bar for normal-sized text, and whether it clears the 3:1 bar for large text. Those are the AA thresholds. The tool does not score AAA, which raises the normal-text requirement to 7:1, so if AAA is your target you should compare the reported number against 7 yourself.
Contrast ratio is deliberately independent of hue, and it ignores the text size in its arithmetic — it depends only on luminance. Two colors can look clearly different and still fail, or look similar and pass, which is precisely why measuring beats eyeballing.
How to use Color Contrast Checker
- 1 Choose the foreground color — the text color — in the first swatch.
- 2 Choose the background color in the second swatch.
- 3 Read the ratio and the two AA verdicts, and treat anything below 4.5:1 as a failure for body text.
Frequently asked questions
What counts as large text for the AA threshold?
WCAG treats text at 18 point, or 14 point bold, and above as large, and the requirement for it is 3:1 rather than 4.5:1. Below that size the stricter 4.5:1 figure applies.
Does it check AAA?
No. The tool reports the AA thresholds only. AAA asks for 7:1 for normal text and 4.5:1 for large text, so compare the ratio shown against those numbers if AAA is your goal.
Why do two similar-looking colors sometimes fail?
Because the ratio depends on relative luminance, not on how different the colors appear. A mid-tone placed against another mid-tone can land near 2:1 even when the hues look clearly distinct.
Should I swap the two colors to check the other direction?
It makes no difference. The ratio takes the lighter and the darker of the two colors, so swapping the fields gives the same number. What changes is only which one you call the text.
Does transparency affect the result?
The tool works on opaque colors. If your real design puts semi-transparent text over a background, the effective color is the visual blend, so check the blended result rather than the nominal color.
Free, online, and private
Free to use
Color Contrast Checker is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How Color Contrast Checker behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Formula | WCAG relative luminance — sRGB channels linearised at a 0.03928 cutoff, weighted 0.2126, 0.7152 and 0.0722, then (lighter + 0.05) divided by (darker + 0.05) |
| Reported | the ratio to two decimals, followed by a Pass or Fail line for AA normal text and one for AA large text |
| AA thresholds | 4.5 to 1 for normal text and 3 to 1 for large text |
| Inputs | two colour swatches, defaulting to white on #4F46E5 |
| Symmetry | which colour is entered as foreground and which as background does not change the ratio, because the two luminances are sorted first |
Compiled from the implementation of this tool and checked against it by itoolnet.
What Color Contrast Checker does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Only the two AA lines are produced. AAA — 7 to 1 for normal text and 4.5 to 1 for large — is never evaluated, and neither is the 3 to 1 requirement for non-text graphics, so a pass here is not a complete accessibility verdict.
- The large-text line tests only one half of the rule. It applies the 3 to 1 threshold without checking whether the text actually qualifies as large, so a pass there only means something if the type really is 18 pt or 14 pt bold.
- The two swatches are the entire input. The result says nothing about font weight, the surrounding elements or the text as rendered, and no alpha is read because the native colour inputs only produce opaque values.
Tested and documented by itoolnet, the team that builds and maintains this site.