Color Contrast Checker
Live WCAG contrast ratio with AA and AAA pass badges for any text and background pair. 100% free, no signup. Everything runs in your browser.
Loading the tool…
Pick a text color and a background color and this checker gives you the WCAG contrast ratio instantly, along with clear pass and fail badges for AA and AAA at both normal and large text sizes. A live preview renders your actual combination as real text, and when a pairing fails, the tool suggests lightened or darkened versions of your own colors that get you over the line without abandoning your palette.
The math is the WCAG 2.x relative luminance formula computed locally in your browser, with nothing sent anywhere. I check every color pairing on this site with this exact tool, which is the most honest endorsement I can offer.
How to use
- Set your text color using the color picker, or paste a hex code straight in.
- Set your background color the same way.
- Read the contrast ratio, displayed as a number like 4.6 to 1.
- Check the badges: AA and AAA each show pass or fail for normal text and for large text.
- Look at the live preview to judge how the combination reads at realistic sizes.
- If it fails, try the suggested adjusted shades, which nudge your colors lighter or darker until the pair passes.
Why use our color contrast checker?
The thresholds are worth knowing by heart. WCAG AA requires a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, meaning 18 point and up, or 14 point bold. AAA raises those to 7 to 1 and 4.5 to 1. The formal definitions live in the W3C's Understanding Contrast Minimum page, but in practice you just need your pairing to clear the badge for the level you are targeting.
Contrast is not only a compliance checkbox. Low-contrast text is hard for everyone in bad conditions: a phone in direct sunlight, a cheap projector, aging eyes, a heavily night-shifted screen. Every time I have fixed a failing contrast pair, the design got easier to read for every single user, not just people with low vision. The requirements are, mostly, a floor for plain readability.
The suggestion feature exists because the usual fix ritual is tedious: nudge the lightness, recheck, nudge again. The tool does that loop for you, walking your own colors lighter or darker until the ratio passes, so the result still looks like your brand rather than defaulting to black on white. If you are building out a palette, my color converter translates the winning values between hex, RGB, and HSL.
It runs entirely locally, so it is fast enough to live inside your design loop: change, check, change, check. When the colors come from an existing design rather than your imagination, the image color picker pulls exact values from a screenshot, and the color palette extractor grabs a whole scheme from an image so you can audit it pair by pair.
Who is this tool for?
Auditing an existing site. Work through your body text, muted captions, button labels, and link colors. Muted gray captions are where almost every site fails, because a light gray on white feels tasteful in the mockup and reads terribly on a real screen.
Choosing brand colors that will survive real use. If your brand blue cannot pass 4.5 to 1 against white, you will fight it in every design forever. Testing candidate colors at the palette stage costs minutes and saves years of workarounds.
Meeting formal requirements. If you build for government, education, healthcare, or any client with a WCAG clause in the contract, AA is usually the named standard, and documented ratios for your color tokens make those conversations short.
Dark mode variants. A pairing that passes on white frequently fails when inverted onto a dark background. Check both themes as separate pairings, because the luminance math does not care about your intentions.
Frequently asked questions
AA requires 4.5 to 1 for normal text and 3 to 1 for large text. AAA requires 7 to 1 and 4.5 to 1 respectively. The badges in this tool map to exactly those four checks, so you never have to remember the numbers.
In WCAG terms, text at 18 point (about 24 CSS pixels) or larger, or 14 point (about 18.7 CSS pixels) and bold. Larger glyphs stay legible at lower contrast, which is why the requirement relaxes to 3 to 1.
Both colors are converted to relative luminance using the WCAG 2.x formula, which linearizes the RGB channels and weights them to match human brightness perception. The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05, producing results from 1 to 1 up to 21 to 1 for pure black on pure white.
Logos and purely decorative elements are exempt. Meaningful interface graphics like button borders and form control outlines need 3 to 1 against adjacent colors under WCAG 2.1's non-text contrast rule. The ratio from this tool works for those checks too; just apply the 3 to 1 threshold.
AA is the standard named in most policies and contracts, and it is the sensible default for body text. AAA is worth pursuing for long-form reading and audiences that skew older, but it constrains color choice enough that many teams reserve it for core reading surfaces.
Contrast math is defined for solid colors, so flatten the transparency first: work out the actual rendered color of your text over your background and test that. If an overlay changes with whatever sits behind it, test the worst case.
No. The luminance math runs in your browser in a fraction of a millisecond, nothing is uploaded, and the checker keeps working offline once the page has loaded.