What contrast ratio is required to pass WCAG AA?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

Each color channel is linearized from sRGB, then combined as L = 0.2126·R + 0.7152·G + 0.0722·B. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), ranging from 1:1 (identical) to 21:1 (black on white).

What counts as large text under WCAG?

WCAG defines large text as at least 18pt (≈24px) in normal weight, or at least 14pt (≈18.67px) in bold weight. The preview panel in this tool shows both sizes so you can judge readability visually.

Does this tool support alpha / transparent colors?

This tool works with fully opaque hex colors. For semi-transparent text over a solid background, first composite the colors manually, then paste the resulting opaque hex into this checker.

Which WCAG version does this tool follow?

This tool follows WCAG 2.1 (published June 2018). The contrast formulas are unchanged in WCAG 2.2. Note that the upcoming WCAG 3.0 introduces a different APCA algorithm, which is not yet a formal W3C standard.

WCAG Contrast Checker

Name: WCAG Contrast Checker
Availability: InStock
Author: Nham Vu

Enter foreground and background colors to instantly get the WCAG 2.1 contrast ratio and pass/fail status for AA and AAA at every text size.

Foreground (Text) Color

Background Color

Contrast Ratio

—

AA Normal

Requires 4.5:1

—

AA Large

Requires 3:1

—

AAA Normal

Requires 7:1

—

AAA Large

Requires 4.5:1

—

Live Preview

Normal Text (16px)

The quick brown fox jumps over the lazy dog.

Large Text (24px / 18pt)

Accessible design matters.

Bold Large Text (18.67px / 14pt bold)

Bold text for UI components.

UI Component Sample

Color Details

Foreground RGB —

Foreground Luminance —

Background RGB —

Background Luminance —

Summary

Enter foreground and background colors to instantly get the WCAG 2.1 contrast ratio and pass/fail status for AA and AAA at every text size.

How it works

Enter or pick a foreground (text) color using the hex input or color picker.
Enter or pick a background color using the second hex input or color picker.
The tool computes relative luminance for each color using the sRGB formula.
The contrast ratio is displayed alongside pass/fail badges for all four WCAG criteria.
Use the Swap button to reverse the two colors and re-check instantly.
A live preview shows how your text looks at normal and large sizes on the chosen background.

Use cases

Verify UI designs satisfy WCAG 2.1 AA before shipping to production.
Audit existing web pages for accessibility compliance.
Choose accessible color combinations during brand or design system development.
Confirm legal compliance requirements for government, healthcare, or finance sites.
Test button label and icon color pairs against their background.
Educate designers and developers on accessibility color requirements.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu