WCAG Color Contrast Checker

Check if color contrast meets accessibility standards

Home›Color Contrast Checker
12.6
Contrast Ratio

Normal Text AA

Pass
≥ 4.5:1

Normal Text AAA

Pass
≥ 7:1

Large Text AA

Pass
≥ 3:1

Large Text AAA

Pass
≥ 4.5:1
CVD Simulation:

Live Preview

This is sample text

About WCAG Contrast Standards

AA Level

Normal text: minimum 4.5:1 contrast ratio
Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast ratio

AAA Level

Normal text: minimum 7:1 contrast ratio
Large text (18pt+ or 14pt+ bold): minimum 4.5:1 contrast ratio

Large Text Definition

Text that is 18pt (24px) or larger, or 14pt (18.66px) or larger bold text

How to Use a Color Contrast Checker for Accessible Design

Understanding Color Contrast

Color contrast measures the difference in luminance between foreground and background colors. Higher contrast ratios make text easier to read, especially for users with visual impairments or color vision deficiencies. A good color contrast checker calculates this ratio instantly and helps you create accessible color combinations.

Who Needs WCAG Compliance?

Government websites, educational institutions, healthcare providers, and businesses serving the public must meet WCAG standards. WCAG AA compliance is the legal requirement in many countries, while AAA represents the highest accessibility standard for premium user experiences.

Testing Your Colors

Using ILovePalette's color contrast checker is simple: enter your foreground (text) and background colors in HEX format, or select from preset common colors. The tool instantly calculates your contrast ratio and shows which WCAG levels you pass. Test both normal and large text sizes since they have different requirements.

Common Contrast Issues

Low contrast combinations like light gray text on white backgrounds, or red text on green backgrounds, fail WCAG standards. Even stylish designs must maintain readability. When testing, ensure your primary content, navigation, and interactive elements all meet minimum contrast requirements.

Beyond Basic Contrast

Color contrast checking is just one part of accessible design. Don't rely on color alone to convey information—add icons, labels, or patterns. Consider users with different types of color blindness. Test your design with actual users who use assistive technologies to ensure comprehensive accessibility.

Best Practices

Start accessibility testing early in your design process. Use this color contrast checker to validate color choices before coding. Document your approved color combinations in a design system. Re-test after any color changes. Remember: accessible design benefits everyone, not just users with disabilities.

Why WCAG Contrast Ratio Matters for Web Accessibility

WCAG contrast ratio is a numeric measurement of the difference in relative luminance between a foreground color (text) and its background, ranging from 1:1 (identical colors, effectively invisible text) to 21:1 (black on white). The W3C chose luminance rather than subjective "readability" so any two colors can be scored objectively on the same scale - no design opinion required.

Contrast ratio matters because roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more live with low vision, cataracts, or the natural age-related decline in contrast sensitivity. Text that looks crisp on a bright office monitor can disappear for those users under sunlight glare or low screen brightness. WCAG AA conformance is also written into accessibility legislation around the world, including the ADA in the US and the European Accessibility Act, so low contrast is not just a usability problem - it can be a legal one.

Designers and developers should run every color pairing through a contrast checker before shipping UI because human eyes are unreliable judges of contrast, especially for light-on-light combinations, colored text, and color pairs that look distinct but differ little in luminance. Automating this check at design time catches failures before they reach users, and keeps the semantic color tokens in your design system safe to reuse across screens, themes, and components.

When to Target AA

WCAG AA is the practical, widely adopted baseline: 4.5:1 for normal text and 3:1 for large text and UI components. It is the level referenced by most accessibility laws and the one most teams are expected to meet. Treat AA as your minimum standard for every shipped interface.

When to Push for AAA

WCAG AAA raises the bar to 7:1 for normal text and 4.5:1 for large text, significantly improving readability for older users, low-vision users, and anyone reading in low-light environments. Aim for AAA on long-form reading content, body copy, and other places where comfort matters as much as compliance. Note that AAA cannot be met for every element - logos and inactive UI are exempt - so treat it as an enhancement target rather than a blanket requirement.

Frequently Asked Questions

What is WCAG contrast ratio?

WCAG contrast ratio is the numeric difference in relative luminance between a foreground color and its background, calculated as (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 for identical colors up to 21:1 for black on white. WCAG sets minimum ratios - 4.5:1 for normal text (AA) and 7:1 (AAA) - so any color pair can be judged consistently.

What is the difference between WCAG AA and AAA?

AA and AAA are two levels of WCAG conformance. AA requires 4.5:1 contrast for normal text and 3:1 for large text and UI components - it is the level referenced by most accessibility laws. AAA requires 7:1 for normal text and 4.5:1 for large text, which makes content easier to read for low-vision users but is harder to achieve on every element.

How do I fix a low-contrast color combination?

Darken the foreground or lighten the background to widen the luminance gap. Try this tool's Suggest Fix button, which searches for the closest WCAG AA-compliant shade, or swap mid-tones for darker grays. Remember that large text has lower thresholds (3:1 and 4.5:1), so increasing font size or weight can turn a failing pairing into a passing one.

Do UI components and focus states need contrast too?

Yes. WCAG 1.4.11 requires non-text UI components - buttons, input borders, icons, and focus indicators - to have at least a 3:1 contrast ratio against adjacent colors. Enter the component color and its background in this checker and look for a ratio of 3:1 or higher to verify interactive elements meet the standard.

What is the minimum contrast ratio for large text?

Large text (18pt/24px and up, or 14pt/18.66px bold and up) needs 3:1 for WCAG AA and 4.5:1 for WCAG AAA, instead of the 4.5:1 and 7:1 required for normal text. If a color pair fails for normal text, check the large-text thresholds before changing your palette.