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

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.

A Yes, it absolutely does. WCAG AA requires 4.5:1 for normal text under 18px, but only 3:1 for large text (18px bold or 24px regular). AAA demands 7:1 for normal text and 4.5:1 for large text. So if your heading at 32px scores 4.0:1 against the background, it passes AA but fails AAA. Our tool shows both thresholds instantly, so you can decide which level fits your audience. Practical tip: aim for AA on body copy and AAA on headings if possible — headings are bigger, so the higher ratio is easier to achieve.

A Your monitor's calibration and panel type affect how colors render, but the ratio itself is math. A 4.5:1 pass means the luminance difference is real, not perceived. If it looks washed out, the issue is usually brightness, not contrast. Try testing on a second device or adjusting your screen's color profile. One practical tip: switch to an sRGB profile in your OS settings—that's what most web designers target, and it'll give you a truer sense of how your palette performs for the average user.