Color Contrast Checker: WCAG AA/AAA Accessibility Test | Free

A WCAG requires minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA).

A Large text is 18pt (24px) regular or 14pt (18.67px) bold, per WCAG guidelines.

A Sufficient contrast ensures text is readable for users with low vision or color blindness, and is required by accessibility laws in many countries.

A Yes, completely free. No signup needed.

A Our free Color Contrast Checker is designed for solid color pairs. When dealing with text over a gradient, identify the point in the gradient where your text color has the *lowest* contrast. You should test your foreground text color against both the lightest and darkest sections of the gradient background to ensure WCAG AA or AAA compliance across the entire design.

A If your brand colors fail WCAG contrast, you'll need to adjust either your foreground (text) or background color. Our free Color Contrast Checker helps you iterate quickly. Slightly modify the failing color's hue, saturation, or lightness. Re-enter the new color codes into the tool and retest instantly. Aim for the minimum passing ratio while staying as close to your brand palette as possible, prioritizing readability for all users.

A To find your website's HEX color codes, you can use browser developer tools. In most browsers (like Chrome or Firefox), right-click on an element and select 'Inspect'. The 'Elements' or 'Styles' panel will show the CSS rules, including color properties. You can also use a browser extension like an 'eyedropper' tool to pick colors directly from your screen and get their HEX, RGB, or HSL values for input into our free Color Contrast Checker.

A No, this tool only works with solid color pairs. For images, you'll need different software. Take a screenshot of your image area, then use an eyedropper tool to sample the darkest and lightest pixels where text sits. Test both against your text color. If either fails, consider adding a semi-transparent overlay behind the text to boost contrast — a black overlay at 40% opacity often works well.