What contrast ratio do I need for WCAG AA?

WCAG 2.1 Level AA requires at least 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold). Level AAA tightens it to 7:1 and 4.5:1.

What counts as 'large text'?

Text at least 18pt (24px) regular, or 14pt (18.66px) bold. Below that it must meet the stricter normal-text ratio.

Does the checker handle alpha-transparent text?

It checks the resolved foreground colour against the resolved background. For semi-transparent text on top of complex backgrounds, blend the colours yourself first.

WCAG 2.1 Compliant

Contrast Checker

Check if your color pairs meet WCAG AA and AAA accessibility standards. Real-time pass/fail for normal and large text.

Color Pair

Pick foreground and background

Foreground (Text)

Background

Sample Text

The quick brown fox jumps over the lazy dog

Contrast Ratio

18.89

: 1

APCA (WCAG 3): Lc 105 · body text

WCAG Compliance

Normal Text (AA)Pass

Normal Text (AAA)Pass

Large Text (AA)Pass

UI components (3:1)Pass

Requirements

AA Normal

4.5 : 1

AAA Normal

7 : 1

AA Large Text

3 : 1

UI / icons

3 : 1

Color-blindness preview

Normal vision

18.89:1

Protanopia

18.89:1

Deuteranopia

18.89:1

Tritanopia

19.00:1

Approximate sRGB simulation — confirms your pair stays distinguishable across common color-vision deficiencies.

How It Works

Step 1

Choose Your Colors

Pick foreground and background using the color picker or by typing HEX values directly.

Step 2

Get the Ratio

We calculate the contrast ratio using the WCAG 2.1 relative luminance formula instantly.

Step 3

Check Compliance

See whether your pair passes WCAG AA or AAA for normal and large text.

Step 4

Test Dark Mode

Swap foreground and background to test both light and dark variants of your design.

Contrast Checker

How It Works

Frequently Asked Questions

Color Converter

Site Style Guide Generator

Contrast Checker

How It Works

Frequently Asked Questions

What is WCAG contrast ratio and how is it calculated?

Difference between WCAG AA and AAA?

What qualifies as 'large text' in WCAG?

How do I test dark mode accessibility?

Does WCAG contrast apply to icons and UI elements?

Related tools

Color Converter

Site Style Guide Generator