WCAG Color Contrast Checker
Ensure your website is readable and compliant. Check your text and background colors against official Web Content Accessibility Guidelines (WCAG).
Smart Auto-Fix
If your colors fail, we can automatically adjust the text color to the nearest shade that passes WCAG AA.
Normal Text (14pt)
Large Text (18pt+)
Large Text Preview
This is how normal paragraph text will look with your chosen color combination. Ensuring good contrast makes your website accessible to visually impaired users and easier to read for everyone.
Recent Checks
How To Check Color Contrast
Input Your Colors
Enter the HEX codes for your text (Foreground) and background, or use the color pickers to visually find the exact shades you are using.
Review the Ratio
Our engine instantly calculates the mathematical contrast ratio. You need at least 4.5:1 for normal text to pass standard AA compliance.
Use Auto-Fix
If your chosen colors fail the WCAG test, simply click the "Smart Auto-Fix" button. We will automatically adjust your text color until it passes.
Understanding WCAG Standards
Level AA (Minimum)
This is the industry standard required for most commercial websites. It requires a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text.
Level AAA (Enhanced)
The highest level of accessibility, often required for government or specialized sites. It requires a contrast ratio of at least 7.0:1 for normal text and 4.5:1 for large text.
Normal vs. Large Text
WCAG defines "Large Text" as 18pt (24px) or 14pt (18.5px) if it is bold. Larger, thicker text is inherently easier to read, which is why it has lower contrast requirements.
Frequently Asked Questions
Good contrast ensures that text is readable for everyone, including people with visual impairments like color blindness. In many countries, meeting WCAG AA contrast standards is a legal requirement for public-facing businesses to comply with the ADA (Americans with Disabilities Act).
The ratio is calculated using the relative luminance of the colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. The result is a score ranging from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, e.g., black on white).
If your current text color fails, the Auto-Fix algorithm calculates whether your background is light or dark. It then incrementally lightens or darkens your chosen foreground color (preserving its hue as much as possible) until it mathematically passes the 4.5:1 AA requirement, ensuring your design remains intact while becoming compliant.
WCAG AA is the standard legal baseline for most websites, requiring a contrast ratio of 4.5:1 for normal text. WCAG AAA is an enhanced, stricter standard (requiring 7.0:1) usually reserved for specialized accessibility sites or government portals.
According to the WCAG 2.1 guidelines, text is considered "Large" if it is at least 18pt (which translates to 24px) with a normal weight, or 14pt (18.5px) if it is bold. Because larger text is naturally easier to read, it has a lower minimum contrast requirement of 3.0:1 for AA.
Contrast calculators rely on specific solid mathematical values (HEX/RGB). To test text overlaid on a gradient or an image, you should use the color picker to sample the lightest and darkest parts of the background directly behind the text, and test those extremes individually to ensure readability.