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

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.

A Sunlight doesn't change the math, but it changes what's comfortable. WCAG AA at 4.5:1 is the baseline, yet outdoors you'll want more headroom. Try aiming for 7:1 (AAA) on anything you read for more than a few seconds. For quick glanceable UI like icons or time stamps, 3:1 might scrape by, but test your palette on an actual phone with brightness maxed. A color pair scoring 2.9:1 will look invisible outdoors, even if it passes on your monitor.

A No cap, no signup, no daily limit. Run 5 pairs or 500 — every result loads in under a second, showing the exact ratio and AA/AAA verdict. Nothing is stored, so your brand palette never leaves your browser. One designer I know tested 40 combinations before landing on an accessible accent color for a client site. Bookmark the page and treat it like a scratchpad during palette work.

A That approach usually breaks. A color like #000000 at 50% opacity over a white background creates a murky gray that fails WCAG requirements. Always test the resulting blended shade directly in our checker instead of guessing. You can drop the exact RGB value of the final composite color right into the input field to get an accurate pass or fail rating instantly.

A Usually not, unless you bump up the lightness or font weight. Light gray like #999999 against #121212 hits just 3.2:1, which fails AA standards. Drop that same gray over a lighter surface and the math gets even worse. Try lightening your text to #CCCCCC or thickening the font to 700 weight. The checker instantly recalculates your ratio so you can stop guessing hex codes.