Micro Tools
Advertisement

Contrast Checker

Check color contrast ratios for free. Pick text and background colors and see the WCAG ratio with AA and AAA pass/fail for normal and large text.

Colors

Pick the text and background colors to compare.

Result

Normal text: the quick brown fox
Large text: the quick brown fox

Advertisement

How contrast is measured

The tool computes relative luminance for both colors, then the WCAG contrast ratio: (lighter + 0.05) divided by (darker + 0.05). The result ranges from 1:1 (identical) to 21:1 (black on white).

Results are graded against WCAG 2.x thresholds: 4.5:1 for normal text AA, 3:1 for large text AA, and the stricter AAA levels.

Fixing a failing pair

Nudge the text darker or the background lighter until the ratio passes; small moves help a lot near the threshold. The live preview shows both normal and large text so you see the effect instantly.

Brand colors that fail as text often work fine as large headings or graphic accents, which only need 3:1. Reserve the strict 4.5:1 bar for body copy.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Contrast Checker FAQs

What do AA and AAA mean?
WCAG conformance levels. AA is the standard target for most websites; AAA is stricter and recommended where achievable, especially for body text.
What counts as large text?
At least 18pt (24px) regular or 14pt (18.66px) bold. Large text gets the easier 3:1 AA threshold because thicker strokes stay legible.
Does this guarantee accessibility?
No. Contrast is one requirement among many, including keyboard access, focus states and semantic markup. It is necessary but not sufficient.
Why do my brand colors fail?
Many brand palettes were chosen for print or large graphics, not small text. Use them for headings and pair body text with a darker or lighter variant.
Is anything uploaded?
No. The check runs entirely in your browser.
Advertisement