WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 standards with automatic improvement suggestions
Safe conversion with no data sent to server
Last updated: March 2026
Live Preview
The quick brown fox jumps over the lazy dog
Large Text Sample
Results
AA Normal Text
>= 4.5:1
AA Large Text
>= 3:1
AAA Normal Text
>= 7:1
AAA Large Text
>= 4.5:1
What is WCAG Color Contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for users with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility regulations reference AA as the minimum standard.
FAQ
What counts as "large text"?
Large text is at least 18pt (24px) regular weight or 14pt (18.66px) bold weight. Large text has lower contrast requirements because bigger characters are easier to read.
How does the improvement suggestion work?
When your color combination fails a WCAG level, the tool suggests an adjusted foreground color that meets the required contrast ratio while staying as close as possible to your original color choice.
Related Design Tools Tools
HEX to RGB Converter
Instantly convert HEX color codes to RGB format for CSS
RGB to HEX Converter
Instantly convert RGB color values back to HEX format
HEX to Tailwind Color
Find the closest standard Tailwind CSS color corresponding to a HEX value
PX to REM Converter
Calculate REM values from pixels based on your root font size