Free WCAG Contrast Checker – AA & AAA

Accessibility Contrast Checker

Check if a color pair meets WCAG standards — free, instant.

Text color

Background color

Sample Text — The quick brown fox jumps over the lazy dog

Making Sure Text Is Actually Readable, Not Just Pretty

A color combination that looks fine to a designer with typical vision can be genuinely difficult or impossible for someone with low vision or color blindness to read — accessibility guidelines exist specifically to catch this before it ships. This tool checks any foreground and background color pair against the official WCAG contrast standards, giving a clear pass or fail rather than relying on a designer's subjective judgment.

How the Contrast Ratio Is Calculated

WCAG defines a specific mathematical formula for contrast ratio based on the relative luminance (perceived brightness) of both colors, producing a ratio ranging from 1:1 (identical colors, effectively invisible text) up to 21:1 (pure black on pure white, maximum possible contrast). The tool calculates this exact ratio from your two input colors using the official formula, then compares it against the specific thresholds WCAG defines for different text sizes and conformance levels, all computed instantly with client-side JavaScript.

A Worked Example

A medium gray (#767676) on white background produces a contrast ratio just barely above 4.5:1 — passing WCAG AA for normal body text but with very little margin, meaning any slightly darker shift in that gray would fail the standard entirely. Switching to a darker gray like #595959 on the same white background raises the ratio well above 7:1, comfortably passing even the stricter AAA standard, illustrating how a seemingly small color adjustment can move a design from barely-compliant to genuinely robust.

Understanding the Different Thresholds

WCAG AA (the widely adopted baseline standard, often a legal requirement for government and many commercial sites) requires 4.5:1 contrast for normal-sized text and a lower 3:1 for large text (18pt+, or 14pt+ bold), since larger text remains legible at lower contrast than small text does. WCAG AAA, the stricter enhanced standard, raises these requirements to 7:1 for normal text and 4.5:1 for large text — AAA is recommended but not always required, often reserved for content specifically serving audiences with more significant visual impairment.

Who Actually Needs to Check This

Designers and developers building any public-facing website who want to meet baseline accessibility standards, both as good practice and often as a genuine legal requirement in many jurisdictions. Someone choosing a brand color palette, checking early whether their preferred colors will actually work for readable body text before committing to them across an entire design system. QA testers auditing an existing site's color choices for accessibility compliance. Anyone designing for an audience that may include users with low vision or color blindness, which realistically describes most general audiences to some degree.

What Passing Contrast Doesn't Guarantee

Sufficient contrast ratio is a necessary but not sufficient condition for full accessibility — a color pair can pass the numeric contrast test while still being difficult for someone with a specific color vision deficiency to distinguish, if the two colors differ mainly in hue rather than brightness. Contrast checking is one important piece of a broader accessibility practice, not the entire picture on its own.

Calculated Instantly, On Your Device

The contrast ratio calculation is straightforward math run with client-side JavaScript — no server call is needed, so results update instantly as you adjust either color.

A Second Example

A design team choosing between two similar shades of blue for their primary call-to-action button text checks both against their button's background color, discovering one shade passes AA comfortably while the other falls just short — a distinction invisible without an explicit contrast check, since both shades look "readable enough" to the eye at a glance.

What's the difference between WCAG AA and AAA?

AA is the widely required baseline standard (4.5:1 for normal text); AAA is a stricter, enhanced standard (7:1 for normal text) recommended but not always mandatory, often used for content specifically serving audiences with greater visual impairment.

Does large text really need less contrast than small text?

Yes — larger text remains legible at lower contrast ratios than small text does, which is why WCAG sets a lower 3:1 threshold specifically for text at 18pt or larger (or 14pt+ bold).

My colors pass the contrast check but still look hard to read to me — why?

Contrast ratio measures brightness difference specifically; other factors like font weight, letter spacing, or specific color vision deficiencies can still affect perceived readability beyond what the numeric ratio captures.

Is meeting WCAG AA a legal requirement?

In many jurisdictions, yes, particularly for government websites and increasingly for commercial sites under various accessibility laws — requirements vary by location, so check the specific regulations that apply to your situation.

Does this check work for any two colors, including gradients?

It checks a single foreground and background color pair; for gradients or images behind text, check contrast against the lightest and darkest points the text actually overlaps.