Contrast Checker

Check WCAG accessibility contrast ratios between two colors. Ensure your text and background colors meet WCAG AA and AAA standards for readability.

Color Contrast Checker

Text Color
Background

Live Preview

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ • abcdefghijklmnopqrstuvwxyz • 0123456789

Contrast Results

14.63:1
Contrast Ratio
AA Normal Text✓ Pass
AA Large Text✓ Pass
AAA Normal Text✓ Pass
AAA Large Text✓ Pass
About WCAG Contrast Ratios: The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text is defined as at least 18pt (24px) or 14pt (19px) bold.
Suggested Text Color
#000000
21.00:1 · Black

Why Contrast Matters for Accessibility

Color contrast is a critical factor in web accessibility. Sufficient contrast between text and its background ensures that content is readable by people with visual impairments, including low vision and color blindness. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio thresholds that websites should meet to be accessible to the widest possible audience.

Our contrast checker calculates the contrast ratio between any two colors and immediately tells you whether they pass WCAG AA or AAA standards. AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is a higher standard, requiring 7:1 for normal text and 4.5:1 for large text.

Using this tool is simple: enter a foreground and background color in HEX format, and the tool displays the contrast ratio along with pass/fail indicators for each WCAG level. The live preview shows exactly how your text will look against the chosen background. This is an essential tool for designers, developers, and content creators who want to build inclusive digital experiences.

Related Tools

Frequently Asked Questions

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility published by the W3C. It provides guidelines for making web content more accessible to people with disabilities, including recommendations for color contrast ratios to ensure text readability.

What is a good contrast ratio?

For WCAG AA compliance, normal text needs a contrast ratio of at least 4.5:1, and large text (18px+ bold or 24px+ regular) needs at least 3:1. For WCAG AAA compliance, normal text needs at least 7:1, and large text needs at least 4.5:1. A ratio of 21:1 is the maximum possible contrast (black on white).

How is contrast ratio calculated?

Contrast ratio is calculated using the relative luminance of the two colors. The formula defined by the W3C compares the brighter color's luminance (L1) to the darker color's luminance (L2): (L1 + 0.05) / (L2 + 0.05). The resulting ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

What colors should I test?

Always test your primary text color against your background color. Also test link text, placeholder text, error messages, and any other text elements. Don't forget to check hover states and focus indicators — they need sufficient contrast too.

Can I use this tool for mobile app design?

Absolutely! While WCAG is primarily a web standard, the same contrast principles apply to mobile apps, digital signage, and any other screen-based medium. Ensuring good contrast improves readability and user experience across all platforms.