WCAG 2.2 Compliant

WCAG Contrast Checker & Color Picker

Test color combinations for accessibility in real time. Pick colors, see contrast ratios, and verify WCAG AA & AAA compliance instantly.

Foreground (Text)
Background
21.0
Contrast Ratio
AA · Normal Pass
Body text · 4.5:1 minimum
AA · Large Pass
18pt+ or 14pt bold · 3:1
AAA · Normal Pass
Body text · 7:1 minimum
AAA · Large Pass
18pt+ or 14pt bold · 4.5:1

Live Preview

See how your colors look on real text at different sizes.

The quick brown fox
Headings should be readable at a glance.
Body paragraphs are where most reading happens. They should never strain the eye, even after long sessions. Good contrast keeps your content accessible to everyone, including users with low vision.
Small print and captions need extra care — they require the same WCAG ratios as body text.
Sample Button

Quick Palette

Click any swatch to set the background. Hold Shift and click to set the foreground.

Understanding WCAG Contrast

Quick reference for the Web Content Accessibility Guidelines.

Contrast Ratio

A measure from 1:1 (no contrast) to 21:1 (max contrast, black on white). Higher ratios mean more readable text.

Level AA

The minimum standard most sites should meet. Requires 4.5:1 for normal text and 3:1 for large text.

Level AAA

The enhanced standard for maximum accessibility. Requires 7:1 for normal text and 4.5:1 for large text.

Large Text

Defined as 18pt (24px) or larger, or 14pt (18.66px) or larger when bold. Gets a slightly relaxed threshold.

Quick Guide

How to Use the Contrast Checker

Four simple steps to verify your color combinations meet WCAG accessibility standards.

  1. Pick Your Foreground

    Click the foreground swatch to open the color picker, or paste a HEX value directly into the input.

  2. Set the Background

    Choose a background color the same way. The live preview updates instantly so you can see the result.

  3. Read the Ratio

    The contrast ratio appears with AA and AAA pass/fail badges for normal and large text sizes.

  4. Copy & Apply

    Tap any copy icon to grab the HEX, RGB, or HSL value. Paste it straight into your CSS or design tool.

Pro tips

  • Swap colors instantly — use the swap button on the foreground card to flip foreground and background in one click.
  • Use the palette below — click any swatch to set the background, or hold Shift and click to set the foreground.
  • Aim for 4.5:1 minimum — that's the WCAG AA threshold for body text, and the safest baseline for most websites.
  • Check large text separately — headings (18pt+ or 14pt bold) only need 3:1, so they often pass when body text doesn't.
  • Test real content — the live preview shows your colors at multiple sizes so you can judge legibility, not just the number.
Frequently Asked

Common Questions About Contrast

Everything you need to know about WCAG ratios, AA vs AAA, large text, and how this tool works.

What is the minimum contrast ratio required for normal text under WCAG AA?

For standard WCAG AA conformance the contrast ratio between text and its background must be at least 4.5:1.

What is a contrast ratio, and how is it calculated?

A contrast ratio is a numerical value representing the difference in perceived luminance between the foreground (for example text) and the background color. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, such as black on white).

Does "large text" require the same contrast ratio as normal text?

No. For large text (typically 18pt regular or 14pt bold) WCAG AA requires a lower minimum contrast ratio of 3:1.

Are contrast rules applied to graphical objects or icons?

Yes. WCAG 2.1 (Success Criterion 1.4.11) requires that graphical objects and user interface components meet a contrast ratio of at least 3:1 against adjacent colors.

What is the primary difference between WCAG AA and AAA conformance?

WCAG AA is the commonly targeted level and requires 4.5:1 for normal text (3:1 for large text). AAA is stricter and requires 7:1 for normal text (4.5:1 for large text).

If my contrast checker says a color combination "fails," what should I do?

Adjust either the foreground or background color until the checker reports a passing ratio (for AA at least 4.5:1 for normal text). Small changes to brightness or saturation are often enough.

What are the best tools for checking color contrast?

Reliable online contrast checkers are available from Level Access, Deque University, TPGi, WebAIM, and Siteimprove.

What is APCA and how does it relate to contrast checking?

APCA stands for Accessible Perceptual Contrast Algorithm. It is a newer, more perceptually accurate method for measuring color contrast and is intended as the contrast approach for the upcoming WCAG 3 standards.

Can I use keyboard shortcuts?

Yes — type directly and press Enter to calculate.

Does it support decimals and negative numbers?

Yes, full decimal and negative number support.

Is this calculator ad-free?

100% ad-free and tracker-free.

Still have questions?

We're happy to help. Get in touch →

Copied to clipboard