Color Contrast Checker

Test whether your text and background colors meet WCAG accessibility contrast requirements.

Text color

Hex

Background

Hex

The quick brown fox jumps over the lazy dog

🔒 Nothing you enter is sent anywhere or stored. All processing happens in your browser.

How it works

Text is only useful if people can read it, and low contrast between text and its background excludes users with low vision — and anyone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define a measurable contrast ratio, from 1:1 (no contrast) to 21:1 (black on white), with thresholds for different conformance levels.

Enter a text color and a background color (via the swatches or hex fields) and this checker computes the exact ratio using the official relative-luminance formula, then shows pass/fail for each standard: AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. A live preview shows your colors on real text so you can judge readability directly.

All calculation happens in your browser. Aim for at least AA on body text to keep your interface accessible and compliant.

Examples

Black on white → 21:1, passes every level.

Light grey on white → often fails AA; the tool flags it instantly.

Adjust the hex until "AA normal" shows PASS.

Frequently asked questions

What counts as 'large text'?

WCAG defines large text as roughly 18pt (24px) normal weight, or 14pt (18.66px) bold. It has a lower contrast requirement than body text.

Which level should I target?

AA is the common legal and practical baseline. AAA is stricter and ideal where maximum readability matters.

How is the ratio calculated?

From the relative luminance of each color using the WCAG 2.1 formula — (lighter + 0.05) ÷ (darker + 0.05).

Does it consider transparency?

No — it compares two solid colors. Flatten any transparency to an effective color first.