What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for users with visual impairments.

What are the WCAG AA and AAA standards?

AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text.

Is contrast checking required for web accessibility?

Yes, meeting WCAG contrast requirements is a legal obligation in many jurisdictions and essential for making websites accessible to all users.

Color Contrast Checker

Check WCAG color contrast ratios for accessibility. Verify AA and AAA compliance for text and background colors.

Foreground (Text) Color

Background Color

Large Text Preview

Small body text preview — this is what your users will read.

17.40

Contrast Ratio

WCAG 2.1 Results

✓Normal Text AA (4.5:1)

✓Large Text AA (3:1)

✓Normal Text AAA (7:1)

✓Large Text AAA (4.5:1)

AA Normal: Minimum contrast for normal text (under 18pt/14pt bold)

AAA Normal: Enhanced contrast for normal text — best for readability

AA Large: Minimum contrast for large text (18pt+ or 14pt+ bold)

How to Use

Check WCAG color contrast ratios for accessibility. Verify AA and AAA compliance for text and background colors.

1Enter or pick a foreground (text) color using the color picker or hex input.
2Enter or pick a background color the same way.
3The tool calculates the contrast ratio and displays it immediately.
4Check the WCAG AA and AAA pass/fail badges for normal text, large text, and UI components.
5Adjust either color until you meet the required WCAG standard.

Key Features

Calculates WCAG 2.1 contrast ratio between any two colors
Shows pass/fail status for AA and AAA levels across text sizes
Color picker and hex/RGB input for precise color selection
Instant feedback as you adjust colors without clicking any button

Frequently Asked Questions

Learn More

Color Codes Guide — HEX, RGB, HSL Explained