🎨 Color Contrast Checker — WCAG AA/AAA

Check foreground/background color contrast ratios against WCAG AA and AAA accessibility standards. Instant pass/fail results for normal and large text. Free color contrast checker.

Foreground (Text)

Background

The quick brown fox jumps over the lazy dog

Normal body text — can you read this clearly?

Large Text (24px bold)

—

Contrast Ratio

—

AA Normal ≥4.5:1

—

AA Large ≥3:1

—

AAA Normal ≥7:1

—

AAA Large ≥4.5:1

How to Use

Pick your colors

Use the color pickers or type HEX codes for both the foreground (text) color and background color.

Read the contrast ratio

The tool instantly calculates the contrast ratio and shows Pass/Fail for all four WCAG 2.1 standards (AA/AAA × normal/large text).

Adjust until you pass

Tweak colors until you reach the standard you need. The preview text updates in real time so you can see the actual readability.

Frequently Asked Questions

What contrast ratio does WCAG require? +

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

What counts as large text? +

Large text is defined as 18pt (24px) or larger, or 14pt bold (18.67px bold) or larger. Below these sizes the stricter AA 4.5:1 requirement applies.

How is the contrast ratio calculated? +

The tool calculates relative luminance for each color using the WCAG formula, then divides the lighter luminance by the darker: (L1 + 0.05) / (L2 + 0.05).

Can I check transparent overlays? +

This tool checks opaque colors. For semi-transparent text, first compute the final rendered color by blending with the background, then paste that result into the checker.

संपूर्ण गाइड: Color Contrast Checker

Color Contrast Checker क्या है?

Color Contrast Checker text और background colors के बीच contrast ratio check करता है WCAG (Web Content Accessibility Guidelines) standards के अनुसार। WCAG 2.1 requires: normal text के लिए 4.5:1 ratio (AA), large text के लिए 3:1। AAA (enhanced) 7:1 ratio require करता है।

Low contrast text visually impaired users और bright sunlight में सभी users के लिए difficult to read होता है। Accessibility compliance legal requirement है कई jurisdictions में।

कैसे उपयोग करें

Text color enter करें।
Background color enter करें।
Contrast ratio देखें।
WCAG level check करें: AA या AAA pass/fail।
Suggested alternatives explore करें अगर fail हो।

Pro Tips

Minimum AA compliance target करें — AAA always achievable नहीं होता।
Brand colors को contrast requirements meet करने के लिए slightly adjust करें।
Color blindness simulation use करें real user experience check करने के लिए।