ALLYX ONE
100% browser-based · zero uploads

Color Contrast Checker

Check whether your text and background colours pass WCAG 2.1 AA and AAA accessibility standards — instantly, right here in your browser. Pick any hex colours, read the contrast ratio and pass/fail badges, and get a suggested fix when the combination falls short. No sign-up, no uploads, nothing to install.

hsl(217, 33%, 17%)

hsl(0, 0%, 100%)

The quick brown fox jumps over the lazy dog

Small body text — must meet AA 4.5:1 for normal text accessibility compliance.

Large text (18pt+ bold) — requires only AA 3:1 under WCAG 2.1.

Contrast Ratio

14.63:1

Normal text (≥18pt)

WCAG AA (4.5:1)AAA
WCAG AAA (7:1)AAA

Large text (≥18pt / 14pt bold)

WCAG AA (3:1)AAA
WCAG AAA (4.5:1)AAA

Foreground

#1E293B

hsl(217, 33%, 17%)

Background

#FFFFFF

hsl(0, 0%, 100%)

What do these WCAG levels mean?

WCAG AA is the legal minimum in most countries. It requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt bold).

WCAG AAA is the enhanced standard. It requires 7:1 for normal text and 4.5:1 for large text — recommended for high-readability content.

These thresholds are defined by the W3C Web Content Accessibility Guidelines (WCAG) 2.1.

How It Works

Color Contrast Checker lets you verify any colour pair against WCAG 2.1 in seconds — no sign-up, no uploads, nothing to install. Everything happens right here in your browser.

1

Pick your colours

Use the colour pickers or type any hex value for your foreground (text) and background. You can also type directly — the result updates as you type.

2

See the ratio instantly

The contrast ratio appears immediately alongside WCAG AA and AAA badges for both normal and large text — there's no button to press.

3

Preview on real text

The live preview shows your exact colour combination applied to sample normal and large text, so you can see how it will look to users.

4

Apply a fix if needed

If the combination fails WCAG AA, you'll see a suggested foreground or background colour that would pass. Click to apply it immediately.

Why users love this tool

  • Your data never leaves your device — all calculations run locally using JavaScript, so no colour values are ever sent to a server.
  • Results in under a second — because nothing is uploaded or downloaded, the ratio appears the instant you change a colour.
  • No account needed — just open the page and start checking.
  • Works on any device — desktop, tablet, or mobile, any modern browser.

Frequently Asked Questions

What is WCAG colour contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background so that people with low vision or colour blindness can read content clearly. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). The enhanced AAA standard requires 7:1 for normal text and 4.5:1 for large text.
What's the difference between WCAG AA and AAA?
AA is the minimum legal accessibility standard required in most countries, including US Section 508 and the EU EN 301 549 standard. AAA is the enhanced level recommended for high-readability contexts. AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter colour and L2 the darker. Relative luminance converts each RGB channel to linear light using the sRGB gamma correction formula specified in WCAG 2.1 SC 1.4.3.
What counts as 'large text'?
Under WCAG 2.1, large text is 18 point (approximately 24 px) or larger at regular weight, or 14 point (approximately 18.67 px) or larger at bold weight. Large text has a lower contrast threshold — 3:1 for AA and 4.5:1 for AAA.
Does this tool upload any data?
No. All contrast calculations run locally in your browser using JavaScript. No colour values or any other data are ever sent to a server.