Contrast Checker
WCAG contrast ratio with AA and AAA verdicts, judged before rounding.
Ratios are computed in this page. The colors you test are never transmitted or stored.
Low-contrast gray text fails more accessibility audits than any other single mistake, and it always looked fine on the monitor it was designed on. This checker gives you the number an audit will actually use: the WCAG contrast ratio between a text color and its background, computed exactly and held against every threshold that matters.
More about Contrast Checker
The two conformance levels are stricter versions of the same idea. AA — 4.5:1 for ordinary text — is the level most laws, standards and procurement rules cite. AAA at 7:1 is the enhanced level for reading-heavy pages and low-vision audiences. Large text, meaning at least 24px regular or about 19px bold, earns the relaxed thresholds of 3:1 and 4.5:1, because bigger strokes stay legible at lower contrast. Interface parts that are not text — borders, icons, focus rings — need 3:1 of their own.
Verdicts here are computed on the unrounded ratio: a pair measuring 4.4999 displays as 4.50 yet still fails AA, which is precisely what an auditor’s tool would conclude.
Translucent colors are composited before measuring, since contrast is only defined between opaque colors, and a note says when that happened. The preview shows your exact pair at both sizes, in this page, sent nowhere.
- Exact WCAG 2.2 ratio, judged before rounding and displayed to two decimals
- Verdicts for AA and AAA at normal and large text sizes
- The 3:1 non-text rule (SC 1.4.11) checked alongside the text ones
- Accepts hex, rgb(), hsl() and oklch(), just like the color converter
- Translucent colors composited over the background before measuring, with a note
- Live preview of the pair at 16px and 24px, plus a one-click swap
How to use it
- 1Enter the text color and the background color in any supported notation.
- 2Read the ratio and the pass or fail verdict on each WCAG line.
- 3Check the preview to judge the pair at normal and large sizes.
- 4Adjust either color until the level you are targeting passes.
Questions
What is the difference between AA and AAA?
AA (4.5:1 for normal text) is the conformance level most regulations require; AAA (7:1) is the enhanced level meant for low-vision readers and text-heavy interfaces. AA is the usual legal bar, AAA a deliberate extra.
What counts as large text?
At least 18pt (24px) regular, or 14pt (about 19px) bold. Large text needs only 3:1 for AA because bigger, thicker glyphs remain readable at lower contrast.
Why can a displayed 4.50 still fail AA?
The display is rounded to two decimals, but the verdict uses the exact ratio. A true 4.4999 shows as 4.50 and fails, which is the same judgement an audit tool would make.
How is transparency handled here?
WCAG defines contrast between opaque colors only, so a translucent color is first composited over what lies behind it. The ratio then describes the pixels a reader actually sees.
Does contrast apply to icons and input borders too?
Yes. WCAG 2.2 SC 1.4.11 requires 3:1 for the visual parts of controls and graphics, and the last row of the table checks exactly that rule.