WCAG Color Contrast Checker
Calculate the contrast ratio between text and background colors for web accessibility.
Enter a text foreground color and a background color to instantly calculate their mathematical contrast ratio. This tool determines if your chosen color palette passes the strict accessibility guidelines set by the Web Content Accessibility Guidelines (WCAG) 2.1.
Ensuring proper color contrast is not just good design—it is a critical requirement for making the web usable for people with visual impairments, color blindness, or users simply trying to read a screen in bright sunlight.
How it works
The contrast ratio is calculated using the official mathematical formula defined by the W3C. It compares the relative luminance of the lighter color to the darker color, resulting in a ratio that ranges from 1:1 (identical colors, completely invisible) to 21:1 (pure black on pure white, maximum contrast).
WCAG AA Standard: This is the baseline legal requirement for most commercial websites and government portals. Normal-sized text (typically below 18pt or 14pt bold) requires a minimum contrast ratio of 4.5:1. Large text requires a ratio of at least 3.0:1.
WCAG AAA Standard: This is the enhanced, stricter standard for maximum accessibility. Normal-sized text requires a ratio of 7.0:1, while large text requires 4.5:1. Reaching AAA compliance ensures your text is highly readable for virtually all users under any lighting condition.
Frequently asked questions
What is considered "Large Text" in WCAG guidelines?
According to WCAG, "Large Text" is defined as any font that is at least 18pt (typically 24px) in regular weight, or at least 14pt (typically 18.5px) if the font is bolded.
Why does color contrast matter?
Low contrast text is difficult or impossible to read for users with low vision, age-related macular degeneration, or color vision deficiencies (color blindness). Good contrast ensures your content is universally accessible and improves overall UX for everyone.
What happens if my colors fail the test?
If your ratio is too low, you must adjust the colors. The easiest solution is to slightly darken the text color or lighten the background color until the mathematical ratio climbs above the required 4.5:1 threshold.
Does this tool support transparent colors (RGBA)?
Currently, this specific tool strictly evaluates solid, fully opaque hex colors (like #FFFFFF). Calculating contrast for transparent colors requires knowing the exact solid color layered underneath it in the final rendered DOM.
Is this a legally binding accessibility test?
While the mathematics are completely accurate to the W3C specification, full ADA or Section 508 legal compliance requires manual testing of your actual website, including hover states, focus outlines, and image backgrounds.
Related tools
Color Converter
Convert HEX, RGB and HSL, with contrast ratios and a palette.
Developer UtilitiesHTML Encode / Decode
Safely escape HTML entities or decode them back to raw characters.
Developer UtilitiesCSS Minifier
Compress and minify CSS code to reduce file size and improve page speed.
Developer UtilitiesLorem Ipsum Generator
Generate placeholder text of any length for your designs and mockups.
Developer UtilitiesBase64 Encode / Decode
Encode text to Base64 or decode it back, including URL-safe Base64.
Developer UtilitiesCORS Tester
Test Cross-Origin Resource Sharing (CORS) headers for API endpoints.
Developer UtilitiesNeed hosting that just works?
Free SSL, daily backups and 24×7 support on every Loudhost plan.