How is the contrast ratio calculated?

Using the official WCAG 2.x relative luminance formula, which gamma-corrects each color channel before weighting it by human luminance perception.

What's the difference between AA and AAA?

AA is the standard accessibility requirement (4.5:1 for normal text, 3:1 for large text); AAA is a stricter enhanced requirement (7:1 and 4.5:1 respectively).

What counts as 'large text'?

Text that's 18pt or larger, or 14pt and bold, qualifies for the more lenient large-text thresholds.

Does this tool check contrast for UI elements, not just text?

No, it checks the four standard text-contrast thresholds (AA and AAA, normal and large text) only — it doesn't check the separate 3:1 ratio WCAG requires for non-text UI components and graphical objects.

Can I enter colors as HEX, RGB, or color names?

Most versions accept HEX codes and RGB values directly; check the input field for which formats are supported before typing in a color name.

Why did my colors pass AA but fail AAA?

AAA requires a stricter 7:1 ratio for normal text compared to AA's 4.5:1, so a color pair with moderate contrast can satisfy the more lenient AA standard while falling short of AAA.

What's the difference between AA and AAA compliance?

AA is the standard minimum most sites aim for (4.5:1 for normal text); AAA is a stricter, optional level (7:1) recommended for content aimed at users with low vision.

Processed 100% locally in your browser

WCAG Color Contrast Checker

Check whether your text and background colors meet WCAG accessibility contrast requirements.

Quick Answer

WCAG Color Contrast Checker lets you: Check whether your text and background colors meet WCAG accessibility contrast requirements. To start, choose or type a foreground (text) color and a background color.

Loading tool…

How to use this tool

1
Pick your colors
Choose or type a foreground (text) color and a background color.
2
Check the ratio
See the exact contrast ratio and whether it passes AA and AAA thresholds.
3
Preview legibility
See live sample text rendered in your chosen colors at normal and large sizes.

Frequently Asked Questions

Color Picker

Click anywhere on an uploaded image to sample its exact pixel color — HEX, RGB, and HSL instantly.

SVG Optimizer

Clean and shrink SVG markup by removing comments, metadata, and unused IDs.

WCAG Color Contrast Checker

How to use this tool

Pick your colors

Check the ratio

Preview legibility

Frequently Asked Questions

How is the contrast ratio calculated?

What's the difference between AA and AAA?

What counts as 'large text'?

Does this tool check contrast for UI elements, not just text?

Can I enter colors as HEX, RGB, or color names?

Why did my colors pass AA but fail AAA?

What's the difference between AA and AAA compliance?

Related Tools

Color Picker

SVG Optimizer

WCAG Color Contrast Checker

How to use this tool

Pick your colors

Check the ratio

Preview legibility

Frequently Asked Questions

How is the contrast ratio calculated?

What's the difference between AA and AAA?

What counts as 'large text'?

Does this tool check contrast for UI elements, not just text?

Can I enter colors as HEX, RGB, or color names?

Why did my colors pass AA but fail AAA?

What's the difference between AA and AAA compliance?

Related Tools

Color Picker

SVG Optimizer