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

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.

A Yes, you can input colors in HEX, RGB, or HSL. Just paste your color value into the field — the tool auto-detects the format. For example, type 'rgb(255, 0, 0)' or 'hsl(0, 100%, 50%)' and it converts instantly. This is handy when pulling colors from CSS code.

A Yes. Enter the default pair first, then swap in your hover colors separately. WCAG requires that hover and focus states also meet contrast minimums — it's not just the static text. For example, if your button background shifts from #007bff to #0056b3 on hover, test both against the white text. One common gotcha: designers often lighten hover backgrounds too much, which kills contrast.

A Non-text elements need contrast too, just with slightly different rules. WCAG requires a 3:1 ratio for UI components and graphical objects like icons, buttons, and form borders. Test your icon color against its background here. If it shows a ratio below 3:1, it won't meet AA. A good rule: use your text color for icons at the same size and see if it passes.

A Don't trust your eyes — they're terrible at judging contrast. Two colors that look fine to you might only hit a 2.5:1 ratio, which fails even WCAG AA. This tool calculates mathematically, factoring in human color perception and luminance. For example, a light gray like #C0C0C0 on white #FFFFFF feels readable but scores just 1.6:1. Always confirm visually with our pass/fail indicator.