What contrast ratios are required for WCAG AA and AAA?

For normal text: AA requires 4.5:1, AAA requires 7:1. For large text (18pt+ or 14pt bold): AA is 3:1, AAA is 4.5:1. UI components and graphical objects need at least 3:1 for AA.

Why does my color pass in one tool but fail here?

Different tools sometimes use slightly different rounding or sRGB linearization. We follow the official WCAG 2.1 relative luminance formula exactly for maximum accuracy.

What counts as large text?

Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Most headings and larger UI text fall into this category.

Does it support alpha transparency?

The checker works with opaque colors. For transparent colors, composite them against the background first to get the effective RGB values, then check those.

Is AA or AAA required by law?

It depends on jurisdiction. In the US, ADA-based lawsuits often cite WCAG 2.1 AA as the de facto standard. The EU Web Accessibility Directive requires AA for public sector sites. Most laws target AA — AAA is a higher, voluntary standard.

What is the difference between contrast ratio and luminance?

Luminance measures how much light a color emits — a physical property. Contrast ratio compares the luminance of the lightest and darkest colors in a pair, expressed as (L1 + 0.05) / (L2 + 0.05). WCAG specifies thresholds for the ratio, not for absolute luminance.

Color Contrast Checker

Check whether your text and background colors pass WCAG 2.1 AA and AAA. See the contrast ratio, live preview at three text sizes and pass/fail status for normal text, large text and UI components. Swap foreground and background with one click.

How to use

Enter the foreground color

Type a HEX or RGB value for your text color.

Enter the background color

Type a HEX or RGB value for the background.

Read the contrast ratio

See the ratio and whether it passes AA, AAA or fails.

Check the live preview

See how the text looks at different sizes on that background.

Foreground (text)

Background

Contrast ratio

17.40:1

Normal text

AAA

AA 4.5:1 · AAA 7:1

Large text

AAA

AA 3:1 · AAA 4.5:1

UI components

AAA

AA 3:1

Live preview

Large heading at 24px

Normal body text at 16px — this is the standard reading size.

Small caption text at 14px

Remember: WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Large text is 18pt+ or 14pt bold.