WCAG Contrast Checker
Verify text and background color ratios against WCAG AA/AAA accessibility standards.
Color Configuration
Contrast Ratio
Normal Text
14pt (~18.5px) or smaller.
Large Text
18pt (~24px) or 14pt bold.
Live Visual Preview
Design is Intelligence Made Visible.
This is a live preview of your color combination. Good color contrast makes your text legible and ensures everyone can comfortably read your content, regardless of visual impairments or screen conditions.
What is this tool?
The Color Contrast Checker tests foreground and background color combinations against Web Content Accessibility Guidelines (WCAG 2.1) standards. It calculates the exact relative luminance contrast ratio (e.g. 4.5:1, 7:1) and determines compliance across AA and AAA levels for Normal Text, Large Text, and User Interface components.
How to verify WCAG color contrast compliance
- Enter or pick your Foreground (Text) color using hex codes or the color picker.
- Enter or pick your Background color.
- Check the calculated Contrast Ratio displayed in the summary meter.
- Review the pass/fail indicators across WCAG AA and AAA standards for Normal Text, Large Text, and Graphical UI elements.
- Use the Swap button to quickly test inverted color pairings.
Key Features
- Calculates exact relative luminance contrast ratios following WCAG 2.1 specifications
- Pass/Fail compliance badges for WCAG Level AA and Level AAA
- Separate evaluation for Normal Text (16px), Large Text (18pt+ / 14pt bold), and UI components
- Live visual readability preview showing sample typography against the background
- Quick-swap button to test foreground and background reversals
- Instant color adjustments via hex inputs and browser color pickers
Frequently Asked Questions
What is the minimum WCAG contrast ratio for normal body text?
Under WCAG 2.1 Level AA, normal text (under 18pt or under 14pt bold) requires a minimum contrast ratio of 4.5:1. For Level AAA, the requirement increases to 7:1.
What is considered 'Large Text' under WCAG standards?
Large text is defined as text that is at least 18pt (24px) or at least 14pt (18.66px) bold. Large text requires a minimum contrast ratio of 3:1 for Level AA and 4.5:1 for Level AAA.
Why is color contrast accessibility important for web design?
Proper color contrast ensures that your website content is readable for people with visual impairments, color vision deficiencies (color blindness), and aging eyes, as well as users viewing screens in bright sunlight.
Does WCAG require contrast checks for disabled buttons or decorative graphics?
No. Inactive user interface components (such as disabled buttons) and purely decorative elements with no informational purpose are exempt from WCAG contrast requirements.
Privacy First
All color calculations and contrast ratios are evaluated locally in your browser. No color data is uploaded or tracked.